From 5aa5b1613bbb8ddbb7b8243c6eed6ee91ee5c0c8 Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Wed, 26 Aug 2026 17:17:43 +0800
Subject: [PATCH 01/15] [MISC][XY] Add DS agent skills

---
 docs/skills/cc-flagship-ds/SKILL-v4.md        | 174 +++++
 docs/skills/cc-flagship-ds/SKILL.md           | 190 ++++++
 docs/skills/cc-flagship-ds/catalogue.md       | 173 +++++
 docs/skills/cc-flagship-ds/evals/evals.json   | 317 +++++++++
 .../resources/v3/components/accordion.md      | 115 ++++
 .../resources/v3/components/alert.md          |  56 ++
 .../resources/v3/components/animation.md      |  17 +
 .../resources/v3/components/avatar.md         |  13 +
 .../resources/v3/components/badge.md          |  21 +
 .../resources/v3/components/box-container.md  |  54 ++
 .../resources/v3/components/breadcrumb.md     |  69 ++
 .../v3/components/button-with-icon.md         |  32 +
 .../resources/v3/components/button.md         |  75 +++
 .../resources/v3/components/calendar.md       | 109 +++
 .../resources/v3/components/card.md           |  49 ++
 .../resources/v3/components/checkbox.md       |  56 ++
 .../v3/components/countdown-timer.md          |  24 +
 .../resources/v3/components/data-table.md     | 145 ++++
 .../resources/v3/components/date-navigator.md |  27 +
 .../resources/v3/components/divider.md        |  21 +
 .../resources/v3/components/drawer.md         |  80 +++
 .../resources/v3/components/error-display.md  | 114 ++++
 .../v3/components/feedback-rating.md          |  64 ++
 .../resources/v3/components/file-download.md  |  41 ++
 .../resources/v3/components/file-upload.md    |  91 +++
 .../resources/v3/components/filter.md         | 210 ++++++
 .../resources/v3/components/footer.md         |  95 +++
 .../v3/components/form-date-input.md          |  85 +++
 .../v3/components/form-date-range-input.md    | 139 ++++
 .../v3/components/form-e-signature.md         |  46 ++
 .../resources/v3/components/form-input.md     |  88 +++
 .../v3/components/form-masked-input.md        |  55 ++
 .../v3/components/form-multi-select.md        | 112 ++++
 .../v3/components/form-nested-multi-select.md | 173 +++++
 .../v3/components/form-nested-select.md       | 165 +++++
 .../v3/components/form-otp-verification.md    | 164 +++++
 .../v3/components/form-phone-number-input.md  |  80 +++
 .../components/form-predictive-text-input.md  | 102 +++
 .../resources/v3/components/form-select.md    | 122 ++++
 .../resources/v3/components/form-slider.md    | 115 ++++
 .../resources/v3/components/form-textarea.md  | 122 ++++
 .../v3/components/form-time-range-picker.md   |  84 +++
 .../v3/components/form-timepicker.md          |  68 ++
 .../v3/components/form-unit-number-input.md   | 132 ++++
 .../components/fullscreen-image-carousel.md   | 123 ++++
 .../v3/components/histogram-slider.md         |  40 ++
 .../resources/v3/components/icon-button.md    |  25 +
 .../resources/v3/components/icon.md           | 175 +++++
 .../resources/v3/components/image-button.md   |  14 +
 .../resources/v3/components/input.md          |  45 ++
 .../v3/components/language-switcher.md        |  17 +
 .../resources/v3/components/layout.md         | 138 ++++
 .../resources/v3/components/link-list.md      |  89 +++
 .../resources/v3/components/local-nav.md      |  95 +++
 .../resources/v3/components/masthead.md       |  14 +
 .../resources/v3/components/menu.md           | 115 ++++
 .../resources/v3/components/modal.md          | 114 ++++
 .../resources/v3/components/navbar.md         | 203 ++++++
 .../v3/components/notification-banner.md      |  67 ++
 .../resources/v3/components/pagination.md     | 104 +++
 .../resources/v3/components/pill.md           |  58 ++
 .../resources/v3/components/popover.md        |  72 ++
 .../v3/components/progress-indicator.md       |  48 ++
 .../resources/v3/components/radio-button.md   |  69 ++
 .../resources/v3/components/schedule.md       |  72 ++
 .../resources/v3/components/sidenav.md        | 190 ++++++
 .../v3/components/singpass-button.md          |  15 +
 .../v3/components/smart-app-banner.md         |  29 +
 .../resources/v3/components/tab.md            |  85 +++
 .../resources/v3/components/tag.md            |  71 ++
 .../resources/v3/components/text-list.md      |  44 ++
 .../v3/components/time-slot-bar-week.md       |  67 ++
 .../resources/v3/components/time-slot-bar.md  |  42 ++
 .../v3/components/time-slot-week-view.md      |  63 ++
 .../resources/v3/components/timeline.md       |  59 ++
 .../resources/v3/components/timetable.md      |  82 +++
 .../resources/v3/components/toast.md          |  67 ++
 .../resources/v3/components/toggle.md         | 120 ++++
 .../resources/v3/components/tooltip.md        |  62 ++
 .../resources/v3/components/typography.md     |  92 +++
 .../v3/components/uneditable-section.md       |  94 +++
 .../layout-composition-patterns.md            |  47 ++
 .../resources/v3/foundations/tokens.md        | 628 ++++++++++++++++++
 .../resources/v3/patterns/dashboard.md        | 154 +++++
 .../resources/v3/patterns/detail.md           | 364 ++++++++++
 .../resources/v3/patterns/setup.md            | 369 ++++++++++
 .../resources/v3/patterns/states.md           | 305 +++++++++
 .../resources/v3/templates/form.md            | 555 ++++++++++++++++
 .../resources/v3/templates/listing.md         | 579 ++++++++++++++++
 .../resources/v4/components/accordion.md      | 115 ++++
 .../resources/v4/components/alert.md          |  56 ++
 .../resources/v4/components/animation.md      |  17 +
 .../resources/v4/components/avatar.md         |  13 +
 .../resources/v4/components/badge.md          |  21 +
 .../resources/v4/components/box-container.md  |  54 ++
 .../resources/v4/components/breadcrumb.md     |  69 ++
 .../resources/v4/components/button.md         |  78 +++
 .../resources/v4/components/calendar.md       | 109 +++
 .../resources/v4/components/card.md           |  51 ++
 .../resources/v4/components/checkbox.md       |  56 ++
 .../v4/components/countdown-timer.md          |  24 +
 .../resources/v4/components/data-table.md     | 145 ++++
 .../resources/v4/components/date-navigator.md |  27 +
 .../resources/v4/components/divider.md        |  21 +
 .../resources/v4/components/drawer.md         |  80 +++
 .../resources/v4/components/error-display.md  | 114 ++++
 .../v4/components/feedback-rating.md          |  64 ++
 .../resources/v4/components/file-download.md  |  41 ++
 .../resources/v4/components/file-upload.md    |  91 +++
 .../resources/v4/components/filter.md         | 211 ++++++
 .../resources/v4/components/footer.md         |  95 +++
 .../v4/components/form-date-input.md          |  92 +++
 .../v4/components/form-date-range-input.md    | 146 ++++
 .../v4/components/form-e-signature.md         |  46 ++
 .../resources/v4/components/form-input.md     |  88 +++
 .../v4/components/form-masked-input.md        |  55 ++
 .../v4/components/form-multi-select.md        | 112 ++++
 .../v4/components/form-nested-multi-select.md | 173 +++++
 .../v4/components/form-nested-select.md       | 165 +++++
 .../v4/components/form-otp-verification.md    | 164 +++++
 .../v4/components/form-phone-number-input.md  |  87 +++
 .../components/form-predictive-text-input.md  | 102 +++
 .../resources/v4/components/form-select.md    | 122 ++++
 .../resources/v4/components/form-slider.md    | 115 ++++
 .../resources/v4/components/form-textarea.md  | 122 ++++
 .../v4/components/form-time-range-picker.md   |  91 +++
 .../v4/components/form-timepicker.md          |  75 +++
 .../v4/components/form-unit-number-input.md   | 139 ++++
 .../components/fullscreen-image-carousel.md   | 123 ++++
 .../v4/components/histogram-slider.md         |  40 ++
 .../resources/v4/components/icon.md           | 175 +++++
 .../resources/v4/components/image-button.md   |  14 +
 .../resources/v4/components/input.md          |  45 ++
 .../v4/components/language-switcher.md        |  17 +
 .../resources/v4/components/layout.md         | 143 ++++
 .../resources/v4/components/link-list.md      |  89 +++
 .../resources/v4/components/local-nav.md      |  95 +++
 .../resources/v4/components/masthead.md       |  14 +
 .../resources/v4/components/menu.md           | 115 ++++
 .../resources/v4/components/modal.md          | 114 ++++
 .../resources/v4/components/navbar.md         | 203 ++++++
 .../v4/components/notification-banner.md      |  67 ++
 .../resources/v4/components/pagination.md     | 104 +++
 .../resources/v4/components/pill.md           |  58 ++
 .../resources/v4/components/popover.md        |  72 ++
 .../v4/components/progress-indicator.md       |  48 ++
 .../resources/v4/components/radio-button.md   |  69 ++
 .../resources/v4/components/schedule.md       |  72 ++
 .../resources/v4/components/sidenav.md        | 190 ++++++
 .../v4/components/singpass-button.md          |  15 +
 .../v4/components/smart-app-banner.md         |  29 +
 .../resources/v4/components/tab.md            |  85 +++
 .../resources/v4/components/tag.md            |  71 ++
 .../resources/v4/components/text-list.md      |  44 ++
 .../v4/components/time-slot-bar-week.md       |  67 ++
 .../resources/v4/components/time-slot-bar.md  |  42 ++
 .../v4/components/time-slot-week-view.md      |  63 ++
 .../resources/v4/components/timeline.md       |  59 ++
 .../resources/v4/components/timetable.md      |  82 +++
 .../resources/v4/components/toast.md          |  67 ++
 .../resources/v4/components/toggle.md         | 120 ++++
 .../resources/v4/components/typography.md     |  92 +++
 .../v4/components/uneditable-section.md       |  94 +++
 .../resources/v4/patterns/setup.md            | 162 +++++
 .../resources/v4/templates/form.md            | 545 +++++++++++++++
 .../resources/v4/templates/listing.md         | 445 +++++++++++++
 package.json                                  |   3 +-
 scripts/init-skills.js                        |  88 +++
 168 files changed, 17649 insertions(+), 1 deletion(-)
 create mode 100644 docs/skills/cc-flagship-ds/SKILL-v4.md
 create mode 100644 docs/skills/cc-flagship-ds/SKILL.md
 create mode 100644 docs/skills/cc-flagship-ds/catalogue.md
 create mode 100644 docs/skills/cc-flagship-ds/evals/evals.json
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/accordion.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/alert.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/animation.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/avatar.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/badge.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/box-container.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/breadcrumb.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/button-with-icon.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/button.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/calendar.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/card.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/checkbox.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/countdown-timer.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/data-table.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/date-navigator.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/divider.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/drawer.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/error-display.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/feedback-rating.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/file-download.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/file-upload.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/filter.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/footer.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-date-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-date-range-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-e-signature.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-masked-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-multi-select.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-nested-multi-select.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-nested-select.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-otp-verification.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-phone-number-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-predictive-text-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-select.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-slider.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-textarea.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-time-range-picker.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-timepicker.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/form-unit-number-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/fullscreen-image-carousel.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/histogram-slider.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/icon-button.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/icon.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/image-button.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/language-switcher.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/layout.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/link-list.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/local-nav.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/masthead.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/menu.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/modal.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/navbar.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/notification-banner.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/pagination.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/pill.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/popover.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/progress-indicator.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/radio-button.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/schedule.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/sidenav.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/singpass-button.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/smart-app-banner.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/tab.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/tag.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/text-list.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar-week.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/time-slot-week-view.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/timeline.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/timetable.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/toast.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/toggle.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/tooltip.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/typography.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/components/uneditable-section.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/foundations/layout-composition-patterns.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/foundations/tokens.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/patterns/dashboard.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/patterns/detail.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/patterns/setup.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/patterns/states.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/templates/form.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v3/templates/listing.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/accordion.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/alert.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/animation.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/avatar.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/badge.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/box-container.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/breadcrumb.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/button.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/calendar.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/card.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/checkbox.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/countdown-timer.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/data-table.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/date-navigator.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/divider.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/drawer.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/error-display.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/feedback-rating.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/file-download.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/file-upload.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/filter.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/footer.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-date-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-date-range-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-e-signature.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-masked-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-multi-select.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-nested-multi-select.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-nested-select.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-otp-verification.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-phone-number-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-predictive-text-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-select.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-slider.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-textarea.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-time-range-picker.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-timepicker.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/form-unit-number-input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/fullscreen-image-carousel.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/histogram-slider.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/icon.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/image-button.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/input.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/language-switcher.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/layout.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/link-list.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/local-nav.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/masthead.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/menu.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/modal.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/navbar.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/notification-banner.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/pagination.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/pill.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/popover.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/progress-indicator.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/radio-button.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/schedule.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/sidenav.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/singpass-button.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/smart-app-banner.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/tab.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/tag.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/text-list.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar-week.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/time-slot-week-view.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/timeline.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/timetable.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/toast.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/toggle.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/typography.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/components/uneditable-section.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/patterns/setup.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/templates/form.md
 create mode 100644 docs/skills/cc-flagship-ds/resources/v4/templates/listing.md
 create mode 100644 scripts/init-skills.js

diff --git a/docs/skills/cc-flagship-ds/SKILL-v4.md b/docs/skills/cc-flagship-ds/SKILL-v4.md
new file mode 100644
index 0000000000..5b0644144d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/SKILL-v4.md
@@ -0,0 +1,174 @@
+---
+name: "flagship-v4"
+description: "Use when building with @lifesg/react-design-system v4 (alpha). Covers composition rules, correct import patterns, token usage, and component discovery. Apply whenever the user's package.json has @lifesg/react-design-system ^4.x."
+metadata:
+    version: "4.0.0-alpha"
+    audience: external
+    category: design-system
+---
+
+# Flagship Design System v4 — Agent Skill
+
+You are helping build web applications with **`@lifesg/react-design-system` v4** for government digital products.
+
+> **Pre-release:** v4 is in alpha. ThemeProvider API and token shapes are locked; CSS URLs still reference v3 CDN paths for fonts.
+
+This file covers v4-specific setup and rules. For components not yet documented in `resources/v4/`, fall back to `resources/v3/` component docs — most component APIs are unchanged.
+
+---
+
+## Install
+
+```bash
+pnpm add @lifesg/react-design-system @lifesg/react-icons @floating-ui/react @mui/icons-material
+```
+
+Do not install `styled-components` — v4 uses CSS Modules for custom styles.
+
+Peer deps: `react` + `react-dom` (^17, ^18, or ^19).
+
+**If the project is new or missing setup** — read `./resources/v4/patterns/setup.md` for the full CSS/ThemeProvider/Vite walkthrough before writing any component code.
+
+---
+
+## ThemeProvider (required)
+
+Every app must wrap all components in `ThemeProvider`. Without it, components throw errors.
+
+```tsx
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+import "@lifesg/react-design-system/theme/styles/lifesg.css";
+
+export default function App() {
+    return <ThemeProvider theme="lifesg">{/* your app */}</ThemeProvider>;
+}
+```
+
+Theme is a **string**: `"lifesg"` · `"bookingsg"` · `"ccube"` · `"mylegacy"` · `"oneservice"` · `"pa"` · `"supportgowhere"` · `"sgw-digital-lobby"` · `"careercompass"` · `"rbs"` · `"imda"` · `"spf"` · `"smgs"` · `"a11y-playground"`
+
+Dark/light mode: `mode` prop defaults to `"auto"` (OS preference). Override with `mode="light"` or `mode="dark"`.
+
+---
+
+## Component imports
+
+Always use subpath imports:
+
+```tsx
+import { Button } from "@lifesg/react-design-system/button";
+import { Form } from "@lifesg/react-design-system/form";
+```
+
+---
+
+## Page structure
+
+Every page must have `Navbar` at the top and `Footer` at the bottom.
+
+```tsx
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+
+<Navbar
+    resources={{ primary: { brandName: "MyService", logoSrc: "/logo.svg" } }}
+    items={{ desktop: [{ id: "home", children: "Home", href: "/" }] }}
+/>;
+{
+    /* page content */
+}
+<Footer />;
+```
+
+---
+
+## Design tokens
+
+Tokens are **plain CSS variable strings** — use directly in CSS Modules or inline styles.
+
+Prefer CSS Modules for layout and responsive styles:
+
+```css
+/* Component.module.css */
+.card {
+    background: var(--fds-colour-bg-strong);
+    padding: var(--fds-spacing-24);
+    border-radius: var(--fds-radius-md);
+
+    :global(body.fds-breakpoint-lg-min) & {
+        padding: var(--fds-spacing-32);
+    }
+}
+```
+
+> **CSS Modules gotcha:** always use `:global(body.fds-breakpoint-lg-min)` — never `:where(body.fds-breakpoint-lg-min)`. CSS Modules scopes every class selector it finds; `:global()` opts the breakpoint class out of scoping so it matches the runtime class `ThemeProvider` adds to `document.body`.
+
+Inline styles work for simple one-off values:
+
+```tsx
+import { Colour, Spacing } from "@lifesg/react-design-system/theme";
+
+<div style={{ color: Colour.text, padding: Spacing["spacing-24"] }} />;
+```
+
+**Responsive breakpoints** use body class selectors added by `ThemeProvider`:
+
+-   `body.fds-breakpoint-lg-min` — viewport ≥ lg (769px)
+-   `body.fds-breakpoint-md-min` — viewport ≥ md (481px)
+-   `body.fds-breakpoint-xl-min` — viewport ≥ xl (1201px)
+
+---
+
+## Icons
+
+1. `@lifesg/react-icons` first — read `./resources/v3/components/icon.md` to discover available icon names.
+2. `@mui/icons-material` as fallback only.
+3. Never guess icon names — verify the import exists before using.
+
+---
+
+## Rules
+
+-   Sentence case for all UI text — "Save changes" not "Save Changes"
+-   DS components over raw HTML — `Button` not `<button>`, `Form.Input` not `<input>`
+-   `Form.*` fields: `label` always required; `errorMessage` only after validation fails; `readOnly` on review screens, not `disabled`
+-   Never hardcode `px` values — always use `Spacing` tokens
+-   All `Form.*` components import from `@lifesg/react-design-system/form`
+
+---
+
+## For AI agents — task → resource map
+
+This skill is self-contained — all resource files live under `./resources/` relative to this file. No npm install or external lookup needed.
+
+**Do not write component code without reading its resource file first.**
+
+| Task                                                                  | What to read                                                                                        |
+| --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| New project / missing setup                                           | `./resources/v4/patterns/setup.md`                                                                  |
+| Find the right component                                              | `./catalogue.md` — search "Also known as" column by keyword                                         |
+| Use a component                                                       | Check `./resources/v4/components/{name}/` first; fall back to `./resources/v3/components/{name}.md` |
+| Grid system, breakpoints, column widths                               | `./resources/v3/components/layout.md`                                                               |
+| Build a form page (single or multi-step)                              | Check `./resources/v4/templates/form.md`; fall back to `./resources/v3/templates/form.md`           |
+| Build a dashboard                                                     | Check `./resources/v4/patterns/dashboard.md`; fall back to `./resources/v3/patterns/dashboard.md`   |
+| Build a listing / search results page                                 | `./resources/v4/templates/listing.md`                                                               |
+| Build a detail / record page                                          | `./resources/v3/patterns/detail.md`                                                                 |
+| Handle loading / error / empty states                                 | `./resources/v3/patterns/states.md`                                                                 |
+| Token question (Colour, Spacing, Radius, Typography)                  | `./resources/v3/foundations/tokens.md`                                                              |
+| Spacing rhythm, visual hierarchy, card rules, settings page structure | `./resources/v3/foundations/layout-composition-patterns.md`                                         |
+
+**Reading strategy:** read `catalogue.md` once for discovery, then fetch only the specific component `{name}.md` files you need. Do not pre-load all component files.
+
+---
+
+## Gotchas
+
+| Symptom                                                                    | Fix                                                                                                                                                                                      |
+| -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Components throw errors                                                    | Add `ThemeProvider` from `@lifesg/react-design-system/theme`                                                                                                                             |
+| No styles / wrong fonts                                                    | Read `./resources/v4/patterns/setup.md` — CSS imports are likely missing or mismatched                                                                                                   |
+| Font falls back to serif (Times)                                           | `body { font-family }` not set — add `font-family: var(--fds-font-family-body)` to `index.css`                                                                                           |
+| Navbar links have underline / user-agent margins on headings or paragraphs | CSS reset missing — v3 CDN `main.css` included a full reset; v4 npm CSS does not. Add the reset block from `./resources/v4/patterns/setup.md` Step 2 to `index.css`                      |
+| Footer doesn't stick to bottom on short pages                              | v4 `ThemeProvider` renders a wrapper `<div>` as the only child of `#root`, breaking the flex column. Add `#root > div { display: flex; flex-direction: column; flex: 1 }` to `index.css` |
+| Responsive breakpoint rules don't fire                                     | Using `:where(body.fds-breakpoint-*)` — replace with `:global(body.fds-breakpoint-*)` so CSS Modules doesn't scope the class                                                             |
+| Theme CSS not loading                                                      | Vite resolves `node_modules` CSS automatically; other tools need CSS resolver config                                                                                                     |
+| `styled-components` import error                                           | Remove it — v4 uses CSS Modules; use `className={styles.x}` with a `.module.css` file                                                                                                    |
diff --git a/docs/skills/cc-flagship-ds/SKILL.md b/docs/skills/cc-flagship-ds/SKILL.md
new file mode 100644
index 0000000000..d48d2a44a8
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/SKILL.md
@@ -0,0 +1,190 @@
+---
+name: "cc-flagship-ds"
+description: "Use when building with @lifesg/react-design-system v3. Covers composition rules, correct import patterns, styled-components token usage, and component discovery. Apply whenever the user's package.json has @lifesg/react-design-system ^3.x (or no version). If package.json shows ^4.x, load SKILL-v4.md instead."
+metadata:
+    version: "3.x"
+    audience: external
+    category: design-system
+---
+
+# Flagship Design System — Agent Skill
+
+You are helping build web applications with **`@lifesg/react-design-system`** for government digital products.
+
+## Version check
+
+Read `@lifesg/react-design-system` version from the consumer's `package.json` before doing anything else:
+
+-   `^4.x` → stop here, load **`SKILL-v4.md`** instead
+-   `^3.x` or not found → continue with this file (v3)
+
+**Key differences if you need to compare:**
+
+|               | v3                                                          | v4                                                                |
+| ------------- | ----------------------------------------------------------- | ----------------------------------------------------------------- |
+| Styling       | `styled-components` peer dep required                       | No `styled-components` — CSS Modules / inline styles              |
+| ThemeProvider | `StyleSheetManager` + `ThemeProvider` with theme **object** | `ThemeProvider` with theme **string**, no wrapper needed          |
+| CSS setup     | CDN `main.css` only                                         | CDN font + `theme/styles/{theme}.css` from package                |
+| Design tokens | Interpolation functions — template literals only            | Plain CSS variable strings — inline styles, CSS Modules, anywhere |
+
+---
+
+## Install
+
+```bash
+pnpm add @lifesg/react-design-system @lifesg/react-icons styled-components @floating-ui/react @mui/icons-material @emotion/is-prop-valid
+```
+
+Peer deps: `react` + `react-dom` (^17, ^18, or ^19).
+
+**If the project is new or missing setup** — read `./resources/v3/patterns/setup.md` for the full CSS/ThemeProvider/Vite walkthrough before writing any component code.
+
+---
+
+## ThemeProvider (required)
+
+Every app must wrap all components in `StyleSheetManager` (outer) + `ThemeProvider` (inner). Missing either causes errors or DOM warnings.
+
+```tsx
+import { ThemeProvider, StyleSheetManager } from "styled-components";
+import isPropValid from "@emotion/is-prop-valid";
+import { LifeSGTheme } from "@lifesg/react-design-system/theme";
+
+export default function App() {
+    return (
+        <StyleSheetManager shouldForwardProp={isPropValid}>
+            <ThemeProvider theme={LifeSGTheme}>{/* your app */}</ThemeProvider>
+        </StyleSheetManager>
+    );
+}
+```
+
+`StyleSheetManager` with `isPropValid` stops styled-components forwarding DS-specific props (e.g. `weight`) to DOM elements.
+
+Theme is an **imported object** — not a string. Available themes: `LifeSGTheme` · `BookingSGTheme` · `CCubeTheme` · `MyLegacyTheme` · `OneServiceTheme` · `PATheme` · `SupportGoWhereTheme` · `SGWDigitalLobbyTheme` · `IMDATheme` · `SPFTheme` · `SMGSTheme` · `A11yPlaygroundTheme`
+
+For auto dark/light mode: swap `ThemeProvider` for `DSThemeProvider` (same import path). Force fixed mode: `LifeSGTheme.light` or `LifeSGTheme.dark`.
+
+---
+
+## Component imports
+
+Always use subpath imports:
+
+```tsx
+import { Button } from "@lifesg/react-design-system/button";
+import { Form } from "@lifesg/react-design-system/form";
+```
+
+---
+
+## Page structure
+
+Every page must have `Navbar` at the top and `Footer` at the bottom. Page shells are defined in their respective pattern/template files — see the task map below.
+
+---
+
+## Design tokens
+
+Tokens are **styled-components interpolation functions** — use only inside `styled` template literals, never in inline `style={{}}` props.
+
+```tsx
+import styled from "styled-components";
+import {
+    Colour,
+    Font,
+    Spacing,
+    Radius,
+} from "@lifesg/react-design-system/theme";
+
+const Card = styled.div`
+    background: ${Colour["bg-strong"]};
+    color: ${Colour.text};
+    padding: ${Spacing["spacing-24"]};
+    border-radius: ${Radius.md};
+    ${Font["body-baseline-regular"]}
+`;
+```
+
+Never hardcode `px` values — always use `Spacing` tokens.
+
+---
+
+## Icons
+
+1. `@lifesg/react-icons` first — read `./resources/v3/components/icon.md` to discover available icon names.
+2. `@mui/icons-material` as fallback only.
+3. Never guess icon names — verify the import exists before using.
+
+---
+
+## Rules
+
+-   Sentence case for all UI text — "Save changes" not "Save Changes"
+-   DS components over raw HTML — `Button.Default` not `<button>`, `Form.Input` not `<input>`
+-   `Form.*` fields: `label` always required; `errorMessage` only after validation fails; `readOnly` on review screens, not `disabled`
+-   Never hardcode `px` values — always use `Spacing` tokens
+-   All `Form.*` components import from `@lifesg/react-design-system/form`
+
+---
+
+## Component selection — ambiguous pairs
+
+Consult this before picking a component. Do not read individual component files to compare — use this table.
+
+| UI need                                           | Use                                      | Not                           |
+| ------------------------------------------------- | ---------------------------------------- | ----------------------------- |
+| Form input needing a visible card-style label     | `Toggle`                                 | `Checkbox`, `RadioButton`     |
+| Table row selection or filter list tick-box       | `Checkbox`                               | `Toggle`                      |
+| Binary yes / no question in a form                | `Toggle type="yes"` + `Toggle type="no"` | `RadioButton`                 |
+| Compact single-choice in a filter panel           | `RadioButton`                            | `Toggle`                      |
+| Block user with a focused action / confirmation   | `Modal`                                  | `Drawer`, `Popover`           |
+| Slide-in panel, filter sheet, side tray           | `Drawer`                                 | `Modal`                       |
+| Anchored floating panel with interactive content  | `Popover`                                | `Tooltip`                     |
+| Short non-interactive hover / focus hint          | `Tooltip`                                | `Popover`                     |
+| Multiple independently collapsible panels         | `Accordion`                              | `BoxContainer`                |
+| Single collapsible section with optional Edit CTA | `BoxContainer`                           | `Accordion`                   |
+| Static status label (1–2 words, no interaction)   | `Pill`                                   | `Tag`, `Badge`                |
+| Removable or interactive filter / category chip   | `Tag`                                    | `Pill`                        |
+| Numeric count overlaid on an icon or element      | `Badge`                                  | `Pill`, `Tag`                 |
+| Inline contextual message within page content     | `Alert`                                  | `NotificationBanner`, `Toast` |
+| Persistent announcement banner below Navbar       | `NotificationBanner`                     | `Alert`, `Toast`              |
+| Transient auto-dismissing feedback message        | `Toast`                                  | `Alert`, `NotificationBanner` |
+| Admin / internal table with 4+ structured columns | `DataTable`                              | `Table`, card list            |
+| Citizen-facing record listing or search results   | card list                                | `DataTable`                   |
+| Basic read-only table, no sorting or selection    | `Table`                                  | `DataTable`                   |
+
+---
+
+## For AI agents — task → resource map
+
+This skill is self-contained — all resource files live under `./resources/` relative to this file. No npm install or external lookup needed.
+
+**Do not write component code without reading its resource file first.**
+
+| Task                                                                  | What to read                                                           |
+| --------------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| New project / missing setup                                           | `./resources/v3/patterns/setup.md`                                     |
+| Find the right component                                              | `./catalogue.md` — search "Also known as" column by keyword            |
+| Use a component                                                       | `./resources/v3/components/{name}.md` — contains props AND usage rules |
+| Grid system, breakpoints, column widths                               | `./resources/v3/components/layout.md`                                  |
+| Build a form page (single or multi-step)                              | `./resources/v3/templates/form.md`                                     |
+| Build a dashboard                                                     | `./resources/v3/patterns/dashboard.md`                                 |
+| Build a listing / search results page                                 | `./resources/v3/templates/listing.md`                                  |
+| Build a detail / record page                                          | `./resources/v3/patterns/detail.md`                                    |
+| Handle loading / error / empty states                                 | `./resources/v3/patterns/states.md`                                    |
+| Token question (Colour, Spacing, Radius, Typography)                  | `./resources/v3/foundations/tokens.md`                                 |
+| Spacing rhythm, visual hierarchy, card rules, settings page structure | `./resources/v3/foundations/layout-composition-patterns.md`            |
+
+**Reading strategy:** read `catalogue.md` once for discovery, then fetch only the specific component `{name}.md` files you need. Do not pre-load all component files.
+
+---
+
+## Gotchas
+
+| Symptom                             | Fix                                                                                |
+| ----------------------------------- | ---------------------------------------------------------------------------------- |
+| Components throw errors             | Add `StyleSheetManager` + `ThemeProvider` wrapping app root                        |
+| styled-components DOM prop warnings | `StyleSheetManager` is missing or not wrapping `ThemeProvider`                     |
+| No styles / wrong fonts             | Read `./resources/v3/patterns/setup.md` — CSS imports likely missing or mismatched |
+| Token in inline `style={{}}`        | Tokens are functions — move to a `styled` template literal                         |
diff --git a/docs/skills/cc-flagship-ds/catalogue.md b/docs/skills/cc-flagship-ds/catalogue.md
new file mode 100644
index 0000000000..79478fe8e1
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/catalogue.md
@@ -0,0 +1,173 @@
+# Flagship Component Catalogue
+
+One-liner per component. Read `./resources/v3/components/{key}.md` for full props and usage rules before writing code.
+
+---
+
+## Buttons & Actions
+
+| Component        | Key                | Also known as                                     | Pairs with               | Description                                                                                                                                 | Key props                              |
+| ---------------- | ------------------ | ------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| `Button`         | `button`           | CTA, action button, submit button, primary button | `Form`, `Modal`, `Alert` | Text button. Variants: `Button.Default` (standard), `Button.Small`, `Button.Large`. Style types: default/secondary/light/link + danger flag | `styleType` (req), `loading`, `danger` |
+| `IconButton`     | `icon-button`      | icon action, icon-only button                     | `Navbar`                 | Icon-only button — `aria-label` always required. **v3 only — not available in v4**                                                          | `icon` (req), `aria-label` (req)       |
+| `ButtonWithIcon` | `button-with-icon` | labeled icon button, button with icon             | `Form`, `Modal`          | Text + icon button. Icon position: left (default) or right. **v3 only — not available in v4**                                               | `icon` (req), `iconPosition`           |
+
+---
+
+## Form — Inputs
+
+All `Form.*` components import from `@lifesg/react-design-system/form`. `label` is required on every field.
+
+| Component                  | Key                          | Also known as                                                      | Pairs with             | Description                                          | Key props                                                      |
+| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | ---------------------- | ---------------------------------------------------- | -------------------------------------------------------------- |
+| `Form.Input`               | `form-input`                 | text field, labeled input, form field, input box                   | `Alert`, `Button`      | Standard labeled text input with error state         | `label` (req), `value`, `onChange`, `errorMessage`             |
+| `Form.Textarea`            | `form-textarea`              | multiline, long text, text area, comments box                      | `Alert`, `Button`      | Multi-line text input                                | `label` (req), `value`, `onChange`, `rows`                     |
+| `Form.Select`              | `form-select`                | dropdown, select, single select, picker                            | `Form.Input`, `Button` | Single-option dropdown                               | `label` (req), `options`, `selectedOption`, `onSelectOption`   |
+| `Form.MultiSelect`         | `form-multi-select`          | multi-select, multi-choice dropdown, multi-pick                    | `Form.Input`, `Button` | Multi-option dropdown                                | `label` (req), `options`, `selectedOptions`, `onSelectOptions` |
+| `Form.NestedSelect`        | `form-nested-select`         | hierarchical select, tree select, nested dropdown, category select | —                      | Parent–child option dropdown                         | `label` (req), `options` (nested tree)                         |
+| `Form.NestedMultiSelect`   | `form-nested-multi-select`   | hierarchical multi-select, nested multi-choice                     | —                      | Multi-select variant of nested dropdown              | `label` (req), `options` (nested tree), `selectedOptions`      |
+| `Form.PredictiveTextInput` | `form-predictive-text-input` | autocomplete, typeahead, search with suggestions, live search      | —                      | Text input with async suggestion fetch               | `label` (req), `fetchOptions` (async fn), `onSelectOption`     |
+| `Form.MaskedInput`         | `form-masked-input`          | masked field, NRIC field, redacted input, hidden value             | —                      | Partially masked value with reveal toggle            | `label` (req), `maskRange`, `value`, `onChange`                |
+| `Form.OtpVerification`     | `form-otp-verification`      | OTP, one-time password, verification code, 2FA                     | —                      | Full OTP send-and-verify flow                        | `label` (req), `length`, `onComplete`                          |
+| `Form.ESignature`          | `form-e-signature`           | signature pad, e-signature, digital signature, sign                | —                      | Signature capture canvas — returns base64            | `label` (req), `onResult`                                      |
+| `Input`                    | `input`                      | standalone input, bare input                                       | —                      | Text input without label — use `Form.Input` in forms | `value`, `onChange`                                            |
+
+---
+
+## Form — Numbers & Units
+
+| Component               | Key                       | Also known as                                          | Pairs with   | Description                                       | Key props                                        |
+| ----------------------- | ------------------------- | ------------------------------------------------------ | ------------ | ------------------------------------------------- | ------------------------------------------------ |
+| `Form.Slider`           | `form-slider`             | slider, range input, numeric slider, range slider      | `Form.Input` | Slider for a single numeric value                 | `label` (req), `min`, `max`, `value`, `onChange` |
+| `Form.PhoneNumberInput` | `form-phone-number-input` | phone input, mobile number, country code, tel          | —            | Phone number with country code selector           | `label` (req), `value`, `onChange`               |
+| `Form.UnitNumberInput`  | `form-unit-number-input`  | unit number, floor unit, #floor-unit, apartment number | —            | Specialised input for Singapore floor-unit format | `label` (req), `value`, `onChange`               |
+
+---
+
+## Form — Dates & Times
+
+| Component              | Key                      | Also known as                                         | Pairs with                   | Description                                                          | Key props                                           |
+| ---------------------- | ------------------------ | ----------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------- | --------------------------------------------------- |
+| `Form.DateInput`       | `form-date-input`        | date picker, date field, calendar input, datepicker   | `Calendar`                   | Single date with calendar picker                                     | `label` (req), `value`, `onChange`, `disabledDates` |
+| `Form.DateRangeInput`  | `form-date-range-input`  | date range, start end date, date period, from to date | `Calendar`                   | Paired start/end date pickers — 3 variants: range, week, fixed-range | `label` (req), `value`, `onChange`, `variant`       |
+| `Form.TimePicker`      | `form-timepicker`        | time input, time field, time picker, hour minute      | `Form.DateInput`             | Time input — 12hr or 24hr                                            | `label` (req), `value`, `onChange`, `format`        |
+| `Form.TimeRangePicker` | `form-time-range-picker` | time range, start end time, from to time              | `Form.DateInput`, `Calendar` | Paired start/end time pickers                                        | `label` (req), `value`, `onChange`                  |
+
+---
+
+## Form — Selection & Upload
+
+| Component     | Key            | Also known as                                                   | Pairs with            | Description                                                                    | Key props                                                    |
+| ------------- | -------------- | --------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------ |
+| `Toggle`      | `toggle`       | option card, checkbox card, radio card, yes/no, selectable card | `Form.Input`          | **Preferred** for checkbox/radio inputs in forms — renders as selectable card  | `indicator` (req), `title`, `checked`, `onChange`            |
+| `Checkbox`    | `checkbox`     | checkmark, tick box, tick                                       | `DataTable`, `Filter` | Compact boolean — use for table row selection or filter lists, not form fields | `checked`, `onChange`                                        |
+| `RadioButton` | `radio-button` | radio, single choice, radio group                               | `Filter`              | Compact single-choice — use `Toggle` for form cards                            | `value`, `checked`, `onChange`                               |
+| `FileUpload`  | `file-upload`  | file input, drag and drop, attachment, upload                   | `Alert`, `Button`     | Drag-and-drop upload area — parent manages file state                          | `label` (req), `accept`, `multiple`, `fileItems`, `onUpload` |
+
+---
+
+## Data Display
+
+| Component      | Key             | Also known as                                              | Pairs with                       | Description                                                                      | Key props                                            |
+| -------------- | --------------- | ---------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------- |
+| `Card`         | `card`          | panel, content box, content card, surface                  | `Typography`, `Button`, `Layout` | Container for grouping related content                                           | `children`                                           |
+| `Accordion`    | `accordion`     | collapsible, expandable, disclosure, FAQ                   | `Typography`                     | Multiple grouped collapsible panels                                              | `items` (req — `{title, content}[]`)                 |
+| `BoxContainer` | `box-container` | collapsible section, collapsible panel, expandable section | `Typography`, `Alert`            | Single collapsible section — supports Edit CTA, error/warning state              | `title` (req), `collapsible`, `expanded`, `onToggle` |
+| `Timeline`     | `timeline`      | step list, event history, process steps, progress list     | `Typography`                     | Vertical sequence of events or steps                                             | `items` (req)                                        |
+| `LinkList`     | `link-list`     | related links, link group, resource list                   | `Card`                           | Styled list of links with descriptions and show-more toggle                      | `items` (req — `{title, href, description}[]`)       |
+| `Typography`   | `typography`    | text, heading, body text, paragraph, label, caption        | `Colour` tokens                  | Text components — `HeadingXXL`→`HeadingXS`, `BodyBL`→`BodyXS`, `LinkBL`→`LinkXS` | `weight`, `as` (override element)                    |
+| `Badge`        | `badge`         | count badge, notification dot, number badge, unread count  | `Navbar`, `IconButton`           | Numeric badge overlaid on another element                                        | `value` (req)                                        |
+| `Avatar`       | `avatar`        | user avatar, profile picture, initials, profile icon       | `Navbar`                         | User representation — image or initials fallback                                 | `name` or `imageUrl`                                 |
+
+---
+
+## Notifications & Status
+
+| Component            | Key                   | Also known as                                                     | Pairs with          | Description                                     | Key props                                                              |
+| -------------------- | --------------------- | ----------------------------------------------------------------- | ------------------- | ----------------------------------------------- | ---------------------------------------------------------------------- |
+| `Alert`              | `alert`               | inline alert, callout, info box, warning box, banner message      | `Form`, `Button`    | Inline callout — info/warning/success/error     | `type` (req: `"info"/"warning"/"success"/"error"`), `children`         |
+| `Toast`              | `toast`               | snackbar, flash message, notification, pop-up message             | `Button`            | Transient auto-dismissing notification          | `id`, `message` (req), `type`                                          |
+| `NotificationBanner` | `notification-banner` | banner, announcement, top banner, system banner                   | `Navbar`            | Persistent banner below Navbar                  | `type` (req), `children`                                               |
+| `Pill`               | `pill`                | status pill, status label, status badge, chip                     | `Card`, `DataTable` | Static status label — 1–2 words, no interaction | `color`, `children`                                                    |
+| `Tag`                | `tag`                 | filter chip, category label, filter tag, keyword tag              | `Filter`, `Card`    | Category/filter label — static or interactive   | `colorType`, `removable`, `onRemove`, `children`                       |
+| `ProgressIndicator`  | `progress-indicator`  | stepper, step indicator, progress steps, wizard steps, multi-step | `Button`, `Form`    | Step-by-step progress tracker                   | `steps` (req), `currentIndex` (req, 0-based), `displayExtractor` (req) |
+
+---
+
+## Navigation
+
+| Component    | Key          | Also known as                                      | Pairs with                    | Description                                                   | Key props                                                                                       |
+| ------------ | ------------ | -------------------------------------------------- | ----------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `Navbar`     | `navbar`     | top nav, navigation bar, header, app bar           | `Masthead`, `Footer`          | Top navigation — every page must include this                 | `resources.primary.brandName`, `items.desktop`                                                  |
+| `Footer`     | `footer`     | page footer, bottom bar                            | `Navbar`                      | Page footer — `<Footer />` with no props for standard variant | _(none required)_                                                                               |
+| `Breadcrumb` | `breadcrumb` | wayfinding, breadcrumb trail, crumbs               | `Navbar`                      | Hierarchical location breadcrumb                              | `items` (req — `{label, href}[]`)                                                               |
+| `Sidenav`    | `sidenav`    | sidebar navigation, side menu, left nav            | `Layout`                      | Vertical sidebar navigation — 4-level nesting                 | `items` (req), `selectedId`                                                                     |
+| `Tab`        | `tab`        | tabs, tabbed navigation, tab strip, tab bar        | `Filter`, `DataTable`         | Tabbed content switching                                      | `items` (req), `activeTabKey`, `onClickTab`                                                     |
+| `LocalNav`   | `local-nav`  | in-page nav, anchor links, section nav, jump links | `Layout`                      | In-page section navigation                                    | `items` (req — `{id, label}[]`)                                                                 |
+| `Menu`       | `menu`       | dropdown menu, context menu, action menu           | `Button`, `IconButton`        | Dropdown menu attached to a trigger                           | `items` (req), `trigger` (req)                                                                  |
+| `Pagination` | `pagination` | page controls, paging, page numbers                | `DataTable`, `Filter`, `Card` | Page navigation controls — always set `showFirstAndLastNav`   | `totalItems` (req), `pageSize` (req), `activePage`, `onPageChange`, `showFirstAndLastNav` (req) |
+
+---
+
+## Overlays
+
+| Component | Key       | Also known as                                 | Pairs with             | Description                                                                                                  | Key props                                            |
+| --------- | --------- | --------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- |
+| `Modal`   | `modal`   | dialog, popup, lightbox, confirmation dialog  | `Button`, `Form`       | Full overlay dialog — blocks background interaction                                                          | `show` (req); nest `Modal.Box` with `onClose` inside |
+| `Drawer`  | `drawer`  | side sheet, slide-in panel, tray, side drawer | `Filter`, `Sidenav`    | Slide-in panel from screen edge                                                                              | `show` (req), `onClose`                              |
+| `Popover` | `popover` | anchored popup, floating panel, overlay panel | `IconButton`, `Button` | Anchored floating content panel                                                                              | `trigger` (req), `content` (req)                     |
+| `Tooltip` | `tooltip` | hover tip, info tip, hint                     | `Form`                 | Short hover/focus tooltip — no interactive content. **v3 only — use `Popover` with `trigger="hover"` in v4** | `content` (req)                                      |
+
+---
+
+## Filters & Search
+
+| Component | Key      | Also known as                                                | Pairs with                                                   | Description                                              | Key props                       |
+| --------- | -------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------- |
+| `Filter`  | `filter` | filter panel, filter sidebar, faceted search, search filters | `DataTable`, `Pagination`, `Card`, `Checkbox`, `RadioButton` | Filter UI — auto-switches desktop sidebar / mobile modal | `items` (req), `onFilterChange` |
+
+---
+
+## Specialist / Complex
+
+| Component                 | Key                         | Also known as                                                                    | Pairs with                                 | Description                                                                                | Key props                                                        |
+| ------------------------- | --------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------- |
+| `DataTable`               | `data-table`                | sortable table, data grid, table with selection                                  | `Pagination`, `Filter`, `Checkbox`, `Pill` | Sortable, configurable data table with row selection                                       | `columns` (req), `data` (req)                                    |
+| `Table`                   | `table`                     | basic table, html table, simple table                                            | `Typography`                               | Basic styled table wrapper                                                                 | `children`                                                       |
+| `Calendar`                | `calendar`                  | date calendar, month view, date picker calendar                                  | `Form.DateInput`, `Form.DateRangeInput`    | Full calendar month view — single or multi-select                                          | `value`, `onSelect`, `disabledDates`                             |
+| `DateNavigator`           | `date-navigator`            | date stepper, prev next date, date arrow                                         | `Calendar`                                 | Prev/next date navigation control                                                          | `value` (req), `onPrev`, `onNext`                                |
+| `TimeSlotBar`             | `time-slot-bar`             | time slots, booking slots, availability bar                                      | `Calendar`, `Form.DateInput`               | Horizontal time slot selection bar                                                         | `slots` (req), `selectedSlot`, `onSelectSlot`                    |
+| `TimeSlotBarWeek`         | `time-slot-bar-week`        | week slots, weekly time slots                                                    | `Calendar`                                 | Week-view time slot bar                                                                    | `slots` (req), `selectedSlot`, `onSelectSlot`                    |
+| `TimeSlotWeekView`        | `time-slot-week-view`       | week view, weekly calendar, weekly availability                                  | `Calendar`                                 | Full week-view time slot grid                                                              | `slots` (req), `selectedSlot`, `onSelectSlot`                    |
+| `Timetable`               | `timetable`                 | schedule grid, period grid, class timetable                                      | —                                          | Timetable / period grid display                                                            | `data` (req)                                                     |
+| `Schedule`                | `schedule`                  | daily schedule, time schedule, day view                                          | `Calendar`                                 | Daily schedule display                                                                     | `data` (req), `date`                                             |
+| `ErrorDisplay`            | `error-display`             | error page, empty state, no results, 404, 500, maintenance page, session timeout | `Button`                                   | Full-page or section error/empty state — covers HTTP errors, empty results, session states | `type` (req: `"404"/"500"/"maintenance"/"no-results"/"timeout"`) |
+| `FeedbackRating`          | `feedback-rating`           | star rating, rating widget, feedback, satisfaction survey                        | `Modal`, `Toast`                           | Rating/feedback capture widget                                                             | `rating`, `onRatingChange`                                       |
+| `CountdownTimer`          | `countdown-timer`           | timer, countdown, time remaining, session timer                                  | `Alert`, `Modal`                           | Countdown display                                                                          | `targetDate` or `duration` (req)                                 |
+| `FileDownload`            | `file-download`             | download link, file download, attachment download                                | `Card`                                     | File download link/button                                                                  | `filename` (req), `fileUrl` (req)                                |
+| `FullscreenImageCarousel` | `fullscreen-image-carousel` | image carousel, lightbox gallery, photo gallery                                  | `Card`, `Button`                           | Fullscreen image carousel — discriminated union items                                      | `items` (req — discriminated union), `show`, `onClose`           |
+| `UnEditableSection`       | `uneditable-section`        | read-only field, display field, view mode, review field                          | `Form`, `Card`                             | Read-only field display for review screens                                                 | `items` (req — `{label, value, displayWidth}[]`)                 |
+
+---
+
+## Branding & Platform
+
+| Component          | Key                 | Also known as                                      | Pairs with | Description                                                 | Key props                                     |
+| ------------------ | ------------------- | -------------------------------------------------- | ---------- | ----------------------------------------------------------- | --------------------------------------------- |
+| `SingpassButton`   | `singpass-button`   | Singpass login, Myinfo button, Singpass            | —          | Pre-built Singpass login button — do not custom style       | _(none — do not custom style)_                |
+| `SmartAppBanner`   | `smart-app-banner`  | app download banner, mobile app banner, app store  | `Navbar`   | App store download prompt banner                            | `show`, `appStoreUrl`, `playStoreUrl`         |
+| `Masthead`         | `masthead`          | gov.sg masthead, government masthead, sgd masthead | `Navbar`   | Official gov.sg masthead — required for government services | _(none required)_                             |
+| `LanguageSwitcher` | `language-switcher` | language selector, locale switcher, bilingual      | `Navbar`   | Language/locale selection control                           | `items` (req), `selectedLanguage`, `onSelect` |
+
+---
+
+## Layout & Utility
+
+| Component         | Key                | Also known as                                                               | Pairs with           | Description                                                                                                                                     | Key props                                                      |
+| ----------------- | ------------------ | --------------------------------------------------------------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| `Layout`          | `layout`           | grid, container, column, responsive layout, col                             | `Card`, `Typography` | Responsive grid — `Layout.Container type="grid"` + `Layout.ColDiv xsCols`                                                                       | `Layout.Container type` (req), `Layout.ColDiv xsCols lgCols`   |
+| `TextList`        | `text-list`        | bullet list, unordered list, ordered list, numbered list, ul, ol            | `Typography`, `Card` | Semantic lists — `TextList.Ul` (bullets) and `TextList.Ol` (numbered/lettered). Supports custom icon bullets                                    | `items` (req), `listStyleType`                                 |
+| `HistogramSlider` | `histogram-slider` | range slider with histogram, price range, distribution slider, filter range | `Filter`             | Range slider with histogram chart above — for filter panels where showing value distribution aids range selection                               | `min` (req), `max` (req), `value`, `onChange`, `histogramData` |
+| `Divider`         | `divider`          | horizontal rule, separator, hr, line                                        | `Card`, `Accordion`  | Visual separator between sections                                                                                                               | _(none required)_                                              |
+| `ImageButton`     | `image-button`     | image CTA, image card button, clickable image                               | `Layout`             | Image with text overlay as a button                                                                                                             | `imageUrl` (req), `label`, `onClick`                           |
+| `Animation`       | `animation`        | loading spinner, spinner, loading indicator, animate, transition, dots      | —                    | Loading and transition animations — `LoadingSpinner`, `LoadingDots`, `LoadingDotsSpinner`. Import from `@lifesg/react-design-system/animations` | _(none required)_                                              |
diff --git a/docs/skills/cc-flagship-ds/evals/evals.json b/docs/skills/cc-flagship-ds/evals/evals.json
new file mode 100644
index 0000000000..daf2061a8a
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/evals/evals.json
@@ -0,0 +1,317 @@
+{
+    "skill_name": "cc-flagship-ds",
+    "evals": [
+        {
+            "id": 0,
+            "prompt": "Build a registration form page using @lifesg/react-design-system v4. The form should collect: full name, email, phone number, and date of birth. Include field validation — all fields required, email must be valid format. Show an error summary at the top if submission fails. Show a success Alert after successful submission. Include Navbar and Footer.",
+            "expected_output": "A React component using ThemeProvider from @lifesg/react-design-system/theme, Navbar, Footer, Layout.Container type=grid, Form.Input for name/email/phone, Form.DateInput for DOB, Button.Default type=submit with loading+disabled during async, Alert type=error for summary, Alert type=success after submission. errorMessage only set after validation fails. No raw <input> elements. No styled-components. No Tailwind.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-theme-provider",
+                    "description": "Wraps app in ThemeProvider from @lifesg/react-design-system/theme",
+                    "type": "contains",
+                    "value": "ThemeProvider"
+                },
+                {
+                    "id": "uses-form-input",
+                    "description": "Uses Form.Input not raw <input>",
+                    "type": "contains",
+                    "value": "Form.Input"
+                },
+                {
+                    "id": "no-raw-input",
+                    "description": "Does not use raw <input> elements",
+                    "type": "not_contains",
+                    "value": "<input"
+                },
+                {
+                    "id": "uses-form-date-input",
+                    "description": "Uses Form.DateInput for date of birth",
+                    "type": "contains",
+                    "value": "Form.DateInput"
+                },
+                {
+                    "id": "uses-alert-error",
+                    "description": "Uses Alert type=error for validation summary",
+                    "type": "contains",
+                    "value": "type=\"error\""
+                },
+                {
+                    "id": "uses-alert-success",
+                    "description": "Uses Alert type=success after submission",
+                    "type": "contains",
+                    "value": "type=\"success\""
+                },
+                {
+                    "id": "button-loading-disabled",
+                    "description": "Submit button uses both loading and disabled during async",
+                    "type": "contains",
+                    "value": "loading"
+                },
+                {
+                    "id": "uses-navbar",
+                    "description": "Page includes Navbar",
+                    "type": "contains",
+                    "value": "Navbar"
+                },
+                {
+                    "id": "uses-footer",
+                    "description": "Page includes Footer",
+                    "type": "contains",
+                    "value": "Footer"
+                },
+                {
+                    "id": "uses-layout-container",
+                    "description": "Uses Layout.Container for structure",
+                    "type": "contains",
+                    "value": "Layout.Container"
+                },
+                {
+                    "id": "no-styled-components",
+                    "description": "Does not import styled-components in v4",
+                    "type": "not_contains",
+                    "value": "from \"styled-components\""
+                },
+                {
+                    "id": "correct-form-import",
+                    "description": "Form imported from correct subpath",
+                    "type": "contains",
+                    "value": "@lifesg/react-design-system/form"
+                }
+            ]
+        },
+        {
+            "id": 1,
+            "prompt": "Build a service listing page using @lifesg/react-design-system v4. Show a hero banner with a title and a search bar (location input + category dropdown + Search button). Below the hero, show a filter sidebar on the left (sort by radio buttons, category checkboxes) and a results area on the right with a result count and 3 placeholder Card components. Include Navbar and Footer.",
+            "expected_output": "A React component with Navbar, a hero section, Layout.Container, a two-column layout with Filter component on the left and results on the right. Results area shows Typography.BodyMD for count and Card components. Uses Form.Input for location, Form.Select for category, RadioButton for sort, Filter.Checkbox or Checkbox for categories. No DataTable for citizen-facing results.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-navbar-footer",
+                    "description": "Includes Navbar and Footer",
+                    "type": "contains",
+                    "value": "Navbar"
+                },
+                {
+                    "id": "uses-filter",
+                    "description": "Uses Filter component for sidebar",
+                    "type": "contains",
+                    "value": "Filter"
+                },
+                {
+                    "id": "uses-card-not-datatable",
+                    "description": "Uses Card for citizen-facing results, not DataTable",
+                    "type": "contains",
+                    "value": "Card"
+                },
+                {
+                    "id": "no-datatable",
+                    "description": "Does not use DataTable for citizen-facing listing",
+                    "type": "not_contains",
+                    "value": "DataTable"
+                },
+                {
+                    "id": "shows-result-count",
+                    "description": "Shows a result count using Typography",
+                    "type": "contains",
+                    "value": "result"
+                },
+                {
+                    "id": "uses-form-input-search",
+                    "description": "Search bar uses Form.Input",
+                    "type": "contains",
+                    "value": "Form.Input"
+                },
+                {
+                    "id": "uses-form-select",
+                    "description": "Category uses Form.Select not raw <select>",
+                    "type": "contains",
+                    "value": "Form.Select"
+                },
+                {
+                    "id": "no-raw-select",
+                    "description": "Does not use raw <select>",
+                    "type": "not_contains",
+                    "value": "<select"
+                },
+                {
+                    "id": "two-column-layout",
+                    "description": "Uses a two-column layout structure",
+                    "type": "contains",
+                    "value": "Layout.Container"
+                }
+            ]
+        },
+        {
+            "id": 2,
+            "prompt": "I need a delete confirmation modal using @lifesg/react-design-system v4. A button labelled 'Delete item' opens a modal. The modal has a title 'Delete this item?', a description 'This action cannot be undone.', a Cancel button and a red Confirm button. Clicking either closes the modal.",
+            "expected_output": "Uses Modal + Modal.Box with show controlled by useState. enableOverlayClick + onOverlayClick both call the same close handler. Modal.Box has showCloseButton and onClose. Direct child of Modal is not a Fragment. Confirm button uses danger prop. Both Cancel and Confirm call setShow(false).",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-modal",
+                    "description": "Uses Modal component",
+                    "type": "contains",
+                    "value": "Modal"
+                },
+                {
+                    "id": "uses-modal-box",
+                    "description": "Uses Modal.Box inside Modal",
+                    "type": "contains",
+                    "value": "Modal.Box"
+                },
+                {
+                    "id": "controlled-show",
+                    "description": "show prop controlled by state",
+                    "type": "contains",
+                    "value": "show="
+                },
+                {
+                    "id": "has-close-button",
+                    "description": "Modal.Box has showCloseButton",
+                    "type": "contains",
+                    "value": "showCloseButton"
+                },
+                {
+                    "id": "uses-danger",
+                    "description": "Confirm/delete button uses danger prop",
+                    "type": "contains",
+                    "value": "danger"
+                },
+                {
+                    "id": "no-fragment-child",
+                    "description": "Does not use Fragment as direct child of Modal",
+                    "type": "not_contains",
+                    "value": "<>"
+                },
+                {
+                    "id": "overlay-click-handled",
+                    "description": "Overlay click handled via enableOverlayClick + onOverlayClick",
+                    "type": "contains",
+                    "value": "onOverlayClick"
+                }
+            ]
+        },
+        {
+            "id": 3,
+            "prompt": "Build a dashboard page using @lifesg/react-design-system v4. Show 4 KPI metric cards in a responsive grid (2 columns on tablet, 4 on desktop). Each card shows a metric label, a large number value, and a percentage change badge. Below the cards, show a full-width section heading and a placeholder for a chart. Include Navbar and Footer.",
+            "expected_output": "Uses Layout.Container type=grid with Layout.ColDiv xsCols=8 mdCols=6 lgCols=3 for the 4-column responsive grid. Metric values use Typography.HeadingXL or similar large heading. Badge component for percentage change. Colour tokens used, not hardcoded hex. No Tailwind classes.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-layout-grid",
+                    "description": "Uses Layout.Container type=grid",
+                    "type": "contains",
+                    "value": "type=\"grid\""
+                },
+                {
+                    "id": "responsive-cols",
+                    "description": "ColDiv uses xsCols for mobile stacking",
+                    "type": "contains",
+                    "value": "xsCols"
+                },
+                {
+                    "id": "uses-desktop-cols",
+                    "description": "ColDiv uses lgCols for 4-column desktop layout",
+                    "type": "contains",
+                    "value": "lgCols"
+                },
+                {
+                    "id": "uses-card",
+                    "description": "Metric cards use Card component",
+                    "type": "contains",
+                    "value": "Card"
+                },
+                {
+                    "id": "uses-badge",
+                    "description": "Percentage change uses Badge component",
+                    "type": "contains",
+                    "value": "Badge"
+                },
+                {
+                    "id": "uses-navbar-footer",
+                    "description": "Includes Navbar and Footer",
+                    "type": "contains",
+                    "value": "Navbar"
+                },
+                {
+                    "id": "no-hardcoded-hex",
+                    "description": "Does not hardcode hex colour values",
+                    "type": "not_contains",
+                    "value": "#"
+                },
+                {
+                    "id": "no-tailwind",
+                    "description": "Does not use Tailwind class names",
+                    "type": "not_contains",
+                    "value": "className=\"flex"
+                }
+            ]
+        },
+        {
+            "id": 4,
+            "prompt": "I need to show a 'no results found' state on my listing page using @lifesg/react-design-system. The search returned zero results. Show the appropriate empty state with a 'Clear filters' action button.",
+            "expected_output": "Uses ErrorDisplay component with type='no-item-found'. Imports from @lifesg/react-design-system/error-display. Provides actionButton prop with children='Clear filters' and onClick handler. Does not build a custom empty state with raw Typography + Button.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-error-display",
+                    "description": "Uses ErrorDisplay component, not a custom empty state",
+                    "type": "contains",
+                    "value": "ErrorDisplay"
+                },
+                {
+                    "id": "correct-type",
+                    "description": "Uses type='no-item-found'",
+                    "type": "contains",
+                    "value": "no-item-found"
+                },
+                {
+                    "id": "correct-import",
+                    "description": "Imports from error-display subpath",
+                    "type": "contains",
+                    "value": "error-display"
+                },
+                {
+                    "id": "has-action-button",
+                    "description": "Includes actionButton prop for clear filters",
+                    "type": "contains",
+                    "value": "actionButton"
+                }
+            ]
+        },
+        {
+            "id": 5,
+            "prompt": "Add a loading state to my page. While data is fetching, show a full-page loading spinner centred in a card. Once loaded, show the content.",
+            "expected_output": "Uses LoadingSpinner imported from @lifesg/react-design-system/animations (not invented or from another library). Wrapped in a Card with centred layout. Conditional render based on isLoading state.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-loading-spinner",
+                    "description": "Uses LoadingSpinner component",
+                    "type": "contains",
+                    "value": "LoadingSpinner"
+                },
+                {
+                    "id": "correct-import",
+                    "description": "LoadingSpinner imported from animations subpath",
+                    "type": "contains",
+                    "value": "@lifesg/react-design-system/animations"
+                },
+                {
+                    "id": "conditional-render",
+                    "description": "Loading state conditionally rendered",
+                    "type": "contains",
+                    "value": "isLoading"
+                },
+                {
+                    "id": "no-custom-spinner",
+                    "description": "Does not invent a custom spinner with raw CSS",
+                    "type": "not_contains",
+                    "value": "animation: spin"
+                }
+            ]
+        }
+    ]
+}
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/accordion.md b/docs/skills/cc-flagship-ds/resources/v3/components/accordion.md
new file mode 100644
index 0000000000..0ba95e2748
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/accordion.md
@@ -0,0 +1,115 @@
+# Accordion
+
+Import: `import { Accordion } from "@lifesg/react-design-system/accordion"`
+
+## When to use
+
+Use to reduce visual complexity when users don't need all content at once — FAQs, supplementary details, or grouped settings. Do not use when all content needs to be visible at the same time.
+
+## Composition
+
+```
+Accordion                    ← container, manages expand/collapse state
+├── Accordion.Item           ← expandable panel
+├── Accordion.Item
+└── Accordion.Item
+```
+
+All children must be `Accordion.Item`. Do not place other elements directly inside `Accordion`.
+
+## Variants
+
+| `type` on `Accordion.Item` | Usage                                |
+| -------------------------- | ------------------------------------ |
+| `"default"`                | Standard title size — default        |
+| `"small"`                  | Compact title size for dense layouts |
+
+## Usage
+
+```tsx
+import { Accordion } from "@lifesg/react-design-system/accordion";
+
+// Multiple items — all collapsed by default
+const FaqSection = () => (
+    <Accordion
+        title="Frequently asked questions"
+        headingLevel={2}
+        initialDisplay="collapse-all"
+        enableExpandAll
+    >
+        <Accordion.Item title="What is this service?">
+            <p>This service lets you manage your account settings.</p>
+        </Accordion.Item>
+        <Accordion.Item title="How do I reset my password?">
+            <p>Click "Forgot password" on the login page.</p>
+        </Accordion.Item>
+        {/* JSX in title must be wrapped in <span> — title renders inside <button> */}
+        <Accordion.Item
+            title={
+                <span>
+                    Can I use <strong>bold text</strong> in a title?
+                </span>
+            }
+        >
+            <p>Yes — wrap JSX title content in a span.</p>
+        </Accordion.Item>
+    </Accordion>
+);
+
+// Controlled item — force one item open regardless of Expand All state
+const ControlledExample = () => (
+    <Accordion initialDisplay="collapse-all">
+        <Accordion.Item title="Always expanded" expanded={true}>
+            <p>This item ignores the parent initialDisplay.</p>
+        </Accordion.Item>
+        <Accordion.Item title="Follows parent state">
+            <p>This item collapses with the rest.</p>
+        </Accordion.Item>
+    </Accordion>
+);
+```
+
+## Props
+
+### Accordion props
+
+| Prop                     | Type                               | Default        | Description                                        |
+| ------------------------ | ---------------------------------- | -------------- | -------------------------------------------------- |
+| `children`               | `JSX.Element` \| `JSX.Element[]`   | —              | Accordion items — required                         |
+| `title`                  | `string`                           | —              | Group title shown above items                      |
+| `enableExpandAll`        | `boolean`                          | `true`         | Show Expand All / Collapse All button              |
+| `initialDisplay`         | `"collapse-all"` \| `"expand-all"` | `"expand-all"` | Initial expand/collapse state of all items         |
+| `showTitleInMobile`      | `boolean`                          | `false`        | Show group title on mobile viewports               |
+| `headingLevel`           | `number`                           | `2`            | Heading level for the group title                  |
+| `id`                     | `string`                           | —              | Unique id of the component                         |
+| `className`              | `string`                           | —              | Class selector                                     |
+| `data-testid`            | `string`                           | —              | Test identifier                                    |
+| `onExpandCollapseChange` | `(expanded: boolean) => void`      | —              | Callback when Expand All / Collapse All is toggled |
+
+### Accordion.Item props
+
+| Prop          | Type                             | Default     | Description                                                       |
+| ------------- | -------------------------------- | ----------- | ----------------------------------------------------------------- |
+| `children`    | `JSX.Element` \| `JSX.Element[]` | —           | Panel content — required                                          |
+| `title`       | `string` \| `JSX.Element`        | —           | Header text of the item                                           |
+| `type`        | `"default"` \| `"small"`         | `"default"` | Title text size                                                   |
+| `expanded`    | `boolean`                        | —           | Controlled expand state; overrides `initialDisplay` for this item |
+| `collapsible` | `boolean`                        | `true`      | Whether the item can be collapsed                                 |
+| `id`          | `string`                         | —           | Unique id of the item                                             |
+| `className`   | `string`                         | —           | Class selector                                                    |
+| `data-testid` | `string`                         | —           | Test identifier                                                   |
+
+## Rules
+
+-   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
+-   Use `Accordion.Item` for all panels — do not place content directly in `Accordion`.
+-   Wrap custom JSX titles in `<span>` — item title renders inside a `<button>` and block elements are invalid inside it.
+-   Individual `expanded` on `Accordion.Item` overrides Expand All / Collapse All for that item.
+-   Use `initialDisplay="collapse-all"` when content is supplementary and users are unlikely to need it immediately.
+
+## Anti-patterns
+
+-   Placing content directly inside `Accordion` without `Accordion.Item` wrappers.
+-   Using Accordion when all content should be visible at once — use a plain layout instead.
+-   Using block elements (e.g. `<div>`) directly as `title` in `Accordion.Item` — wrap in `<span>`.
+-   Skipping `headingLevel` when `title` is set — this breaks heading hierarchy for screen readers.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/alert.md b/docs/skills/cc-flagship-ds/resources/v3/components/alert.md
new file mode 100644
index 0000000000..4d258c771c
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/alert.md
@@ -0,0 +1,56 @@
+# Alert
+
+Import: `import { Alert } from "@lifesg/react-design-system/alert"`
+
+## When to use
+
+Use to call out important information within page sections — warnings before a user starts a task, informational notes relevant to a specific section, or non-transient status messages. Not for form validation errors (use form error patterns instead).
+
+## Variants
+
+| `type`          | When to use                                |
+| --------------- | ------------------------------------------ |
+| `"success"`     | Action completed successfully              |
+| `"error"`       | Action failed or system error              |
+| `"warning"`     | User should proceed with caution           |
+| `"info"`        | Neutral informational message              |
+| `"description"` | Descriptive content with no status meaning |
+
+## Usage
+
+```tsx
+import { Alert } from "@lifesg/react-design-system/alert";
+
+<Alert type="warning" showIcon role="alert">
+    Your session will expire in 5 minutes. Save your work to avoid losing
+    progress.
+</Alert>;
+```
+
+## Props
+
+| Prop                 | Type                                                                   | Default              | Description                                                                |
+| -------------------- | ---------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------- |
+| `type`               | `"warning"` \| `"error"` \| `"success"` \| `"info"` \| `"description"` | —                    | Style type of the alert — required                                         |
+| `sizeType`           | `"default"` \| `"small"`                                               | `"default"`          | Size of the component                                                      |
+| `showIcon`           | `boolean`                                                              | `false`              | Show icon matching the alert type                                          |
+| `actionLink`         | `HTMLAnchorAttributes`                                                 | —                    | Action link rendered inside the alert                                      |
+| `actionLinkIcon`     | `JSX.Element`                                                          | `<ArrowRightIcon />` | Custom icon for the action link                                            |
+| `customIcon`         | `JSX.Element`                                                          | —                    | Custom replacement icon for the alert                                      |
+| `maxCollapsedHeight` | `number`                                                               | —                    | Maximum visible height of content in px; shows expand toggle when exceeded |
+
+Inherits all `HTMLDivElement` attributes.
+
+## Rules
+
+-   Always use `showIcon` — icons provide immediate visual recognition of alert severity.
+-   Use `actionLink` for recoverable errors (retry, undo, view details).
+-   Set `role` based on how the alert appears: `"alert"` for dynamic alerts triggered by user action, `"status"` for background status updates, omit for static content visible on page load.
+-   Use `maxCollapsedHeight` to avoid long content overwhelming the layout.
+-   `role` is not set automatically — set `role="alert"` for dynamic alerts, `role="status"` for background updates, and omit for static content.
+
+## Anti-patterns
+
+-   Using Alert for form field validation errors — use inline form error patterns instead.
+-   Omitting `role` on dynamically injected alerts — screen readers will not announce them.
+-   Using `type="description"` with `showIcon` — description has no semantic status meaning.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/animation.md b/docs/skills/cc-flagship-ds/resources/v3/components/animation.md
new file mode 100644
index 0000000000..96fc9e6277
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/animation.md
@@ -0,0 +1,17 @@
+# Animation
+
+Import: `import { Animation } from "@lifesg/react-design-system/animation"`
+
+## Props
+
+| Prop          | Type     | Default | Description                      |
+| ------------- | -------- | ------- | -------------------------------- |
+| `id`          | `string` | —       | Unique id of the component       |
+| `className`   | `string` | —       | Class selector of the component  |
+| `data-testid` | `string` | —       | Test identifier of the component |
+
+### Customised variant additional props
+
+| Prop    | Type     | Default | Description                            |
+| ------- | -------- | ------- | -------------------------------------- |
+| `color` | `string` | —       | Color applied on the animated elements |
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/avatar.md b/docs/skills/cc-flagship-ds/resources/v3/components/avatar.md
new file mode 100644
index 0000000000..6bc22170eb
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/avatar.md
@@ -0,0 +1,13 @@
+# Avatar
+
+Import: `import { Avatar } from "@lifesg/react-design-system/avatar"`
+
+## Props
+
+Inherits `HTMLAttributes<HTMLDivElement>`.
+
+| Prop          | Type                      | Default     | Description                                                                         |
+| ------------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------- |
+| `children`    | `string` \| `JSX.Element` | —           | Content displayed in the avatar — typically an initial or custom element — required |
+| `sizeType`    | `"default"` \| `"small"`  | `"default"` | Size of the avatar                                                                  |
+| `data-testid` | `string`                  | `"avatar"`  | Test identifier                                                                     |
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/badge.md b/docs/skills/cc-flagship-ds/resources/v3/components/badge.md
new file mode 100644
index 0000000000..32d04c1e6d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/badge.md
@@ -0,0 +1,21 @@
+# Badge
+
+Import: `import { Badge } from "@lifesg/react-design-system/badge"`
+
+## Props
+
+Inherits `HTMLAttributes<HTMLDivElement>`.
+
+| Prop          | Type                                                                                        | Default     | Description                                                     |
+| ------------- | ------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------- |
+| `variant`     | `"number"` \| `"number-with-border"` \| `"dot"` \| `"dot-with-border"` \| `"square-number"` | `"number"`  | Visual style of the badge                                       |
+| `color`       | `"default"` \| `"important"`                                                                | `"default"` | Color tone of the badge                                         |
+| `count`       | `number`                                                                                    | —           | Number to display — applies to number-based variants only       |
+| `badgeOffset` | `[string, string]`                                                                          | —           | Offset from top-right corner as `[left, top]` CSS length values |
+| `children`    | `JSX.Element`                                                                               | —           | Content to wrap — badge is positioned in the top-right corner   |
+| `data-testid` | `string`                                                                                    | `"badge"`   | Test identifier                                                 |
+
+## Rules
+
+-   `count` only applies to `"number"`, `"number-with-border"`, and `"square-number"` variants.
+-   When `children` is provided, the badge overlays the top-right corner of the child element.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/box-container.md b/docs/skills/cc-flagship-ds/resources/v3/components/box-container.md
new file mode 100644
index 0000000000..9ed4525216
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/box-container.md
@@ -0,0 +1,54 @@
+# BoxContainer
+
+Import: `import { BoxContainer } from "@lifesg/react-design-system/box-container"`
+
+## When to use
+
+Use for a single collapsible panel displaying form data or structured content — typically a named section within a form or detail view. Supports an optional header action and a status indicator to flag section-level errors or warnings.
+
+## Sub-components
+
+### BoxContainerSubComponentTestIds
+
+| Prop               | Type     | Description                            |
+| ------------------ | -------- | -------------------------------------- |
+| `title`            | `string` | Test id for the header title           |
+| `displayStateIcon` | `string` | Test id for the display state icon     |
+| `handle`           | `string` | Test id for the expand/collapse handle |
+
+## Variants
+
+| `displayState` | When to use                                |
+| -------------- | ------------------------------------------ |
+| `"default"`    | Normal state — no icon                     |
+| `"error"`      | Section has validation errors              |
+| `"warning"`    | Section has a warning that needs attention |
+
+## Props
+
+| Prop                    | Type                                    | Default     | Description                                                       |
+| ----------------------- | --------------------------------------- | ----------- | ----------------------------------------------------------------- |
+| `title`                 | `string` \| `JSX.Element`               | —           | Header title — required                                           |
+| `children`              | `JSX.Element` \| `JSX.Element[]`        | —           | Panel content — required                                          |
+| `collapsible`           | `boolean`                               | `true`      | Allow the panel to be collapsed                                   |
+| `expanded`              | `boolean`                               | `false`     | Controlled expand state (only valid when `collapsible` is `true`) |
+| `displayState`          | `"default"` \| `"error"` \| `"warning"` | `"default"` | Icon shown alongside title to indicate status                     |
+| `callToActionComponent` | `JSX.Element`                           | —           | Custom action rendered in the header                              |
+| `clickableHeader`       | `boolean`                               | —           | Make the entire header clickable to toggle expand/collapse        |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds`       | —           | Test ids for sub-elements                                         |
+| `id`                    | `string`                                | —           | Unique id of the component                                        |
+| `className`             | `string`                                | —           | Class selector                                                    |
+| `data-testid`           | `string`                                | —           | Test identifier                                                   |
+
+## Rules
+
+-   Use `displayState` to indicate section-level status — not as a substitute for inline field errors.
+-   Use `callToActionComponent` for section-level actions only — not for form submission buttons.
+-   Use `collapsible={false}` when the content must always be visible.
+-   Use `clickableHeader` to make the full header row the expand/collapse trigger — improves usability for dense layouts.
+
+## Anti-patterns
+
+-   Using `displayState="error"` instead of inline form field errors — `displayState` signals section-level status only.
+-   Using `callToActionComponent` for form submission — use a dedicated submit button outside the container.
+-   Nesting BoxContainer inside another BoxContainer.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/breadcrumb.md b/docs/skills/cc-flagship-ds/resources/v3/components/breadcrumb.md
new file mode 100644
index 0000000000..da62443b36
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/breadcrumb.md
@@ -0,0 +1,69 @@
+# Breadcrumb
+
+Import: `import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb"`
+
+## When to use
+
+Use on pages within a multi-level hierarchy to help users navigate to parent pages.
+
+Do not use on:
+
+-   The home page
+-   Pages with no parent
+-   Focused flows such as forms or wizards
+
+## Variants
+
+| `separatorStyle`      | When to use              |
+| --------------------- | ------------------------ |
+| `"chevron"` (default) | Standard pages           |
+| `"slash"`             | Alternative visual style |
+
+## Usage
+
+```tsx
+import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
+
+<Breadcrumb
+    links={[
+        { children: "Home", href: "/" },
+        { children: "Services", href: "/services" },
+        { children: "Apply" },
+    ]}
+/>;
+```
+
+## Props
+
+| Prop             | Type                          | Default     | Description                                                                                              |
+| ---------------- | ----------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
+| `links`          | `HTMLAnchorElement[]`         | —           | Breadcrumb items — **required**. Each item accepts standard anchor attributes (`children`, `href`, etc.) |
+| `separatorStyle` | `"chevron" \| "slash"`        | `"chevron"` | Separator style between items                                                                            |
+| `fadeColor`      | `string[] \| FadeColorSet`    | —           | Gradient color for scroll fade on overflow; set to match page background                                 |
+| `fadePosition`   | `"left" \| "right" \| "both"` | `"both"`    | Which edges show the scroll fade                                                                         |
+| `itemStyle`      | `CSS-JS string`               | —           | Custom style applied to each breadcrumb item                                                             |
+| `id`             | `string`                      | —           | Unique identifier                                                                                        |
+| `className`      | `string`                      | —           | Class selector                                                                                           |
+| `data-testid`    | `string`                      | —           | Test identifier                                                                                          |
+
+### FadeColorSet
+
+| Prop    | Type       | Description                 |
+| ------- | ---------- | --------------------------- |
+| `left`  | `string[]` | Color(s) for the left fade  |
+| `right` | `string[]` | Color(s) for the right fade |
+
+## Rules
+
+-   Always place the current page last in `links` — omit `href` on the last item.
+-   Keep breadcrumb trails to 4 items or fewer; 5 or more items automatically collapse the middle into an overflow menu.
+-   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
+-   The last item in `links` is rendered as the current page (non-clickable, `aria-current="page"`). Omit `href` on the last item.
+-   When 5 or more items are present, middle items automatically collapse into an overflow menu.
+-   On mobile, breadcrumbs scroll horizontally with a fade effect at the edges controlled by `fadeColor` and `fadePosition`.
+
+## Anti-patterns
+
+-   Do not add `href` to the last breadcrumb item — it represents the current page and must not be clickable.
+-   Do not use breadcrumbs on single-level or flat navigation structures.
+-   Do not use breadcrumbs inside forms or wizard flows.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/button-with-icon.md b/docs/skills/cc-flagship-ds/resources/v3/components/button-with-icon.md
new file mode 100644
index 0000000000..f828084707
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/button-with-icon.md
@@ -0,0 +1,32 @@
+# ButtonWithIcon
+
+> **Not available in v4.** If you are building for v4, do not use this component.
+
+Import: `import { ButtonWithIcon } from "@lifesg/react-design-system/button-with-icon"`
+
+## Sub-components
+
+| Sub-component            | When to use                    |
+| ------------------------ | ------------------------------ |
+| `ButtonWithIcon.Default` | Standard size                  |
+| `ButtonWithIcon.Small`   | Dense layouts, toolbars        |
+| `ButtonWithIcon.Large`   | Only when explicitly specified |
+
+## Props
+
+Also inherits all props from `HTMLButtonElement` (e.g. `disabled`, `onClick`, `children`).
+
+| Prop                    | Type                                                  | Default     | Description                                        |
+| ----------------------- | ----------------------------------------------------- | ----------- | -------------------------------------------------- |
+| `icon`                  | `JSX.Element`                                         | —           | Icon component to render                           |
+| `iconPosition`          | `"left"` \| `"right"`                                 | `"left"`    | Icon position relative to label                    |
+| `styleType`             | `"default"` \| `"secondary"` \| `"light"` \| `"link"` | `"default"` | Visual style of the button                         |
+| `danger`                | `boolean`                                             | `false`     | Applies a red color scheme for destructive actions |
+| `loading`               | `boolean`                                             | `false`     | Replaces the icon with a loading spinner           |
+| `focusableWhenDisabled` | `boolean`                                             | `false`     | Keeps button focusable when disabled               |
+
+## Rules
+
+-   `styleType` is mandatory.
+-   Use `iconPosition="right"` only for directional actions (next, continue, external link).
+-   Combine `loading` and `disabled` during async operations to prevent double-submission.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/button.md b/docs/skills/cc-flagship-ds/resources/v3/components/button.md
new file mode 100644
index 0000000000..dbfaf65db9
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/button.md
@@ -0,0 +1,75 @@
+# Button
+
+Import: `import { Button } from "@lifesg/react-design-system/button"`
+
+## When to use
+
+```
+┌─ "Which button component?"
+│
+├─ Icon only (no text)?
+│  └─ IconButton — aria-label required
+│
+├─ Text + icon together?
+│  └─ ButtonWithIcon — icon left (default) or right for directional actions
+│
+└─ Text only?
+   └─ Button
+```
+
+## Sub-components
+
+| Sub-component    | When to use                                             |
+| ---------------- | ------------------------------------------------------- |
+| `Button.Default` | Standard size — use for all buttons including hero CTAs |
+| `Button.Small`   | Dense layouts, toolbars                                 |
+| `Button.Large`   | Only when explicitly specified — do not use by default  |
+
+## Variants
+
+| `styleType`   | When to use                           |
+| ------------- | ------------------------------------- |
+| `"default"`   | Main action on the page               |
+| `"secondary"` | Cancel, go back, alternative option   |
+| `"light"`     | On colored or dark backgrounds        |
+| `"link"`      | Tertiary, de-emphasized inline action |
+
+Add `danger` for destructive actions (delete, remove) — applies to any `styleType`.
+
+## Usage
+
+```tsx
+import { Button } from "@lifesg/react-design-system/button";
+
+<Button.Default styleType="default" onClick={() => {}}>
+    Save changes
+</Button.Default>;
+```
+
+## Props
+
+| Prop                    | Type                                                  | Default     | Description                                        |
+| ----------------------- | ----------------------------------------------------- | ----------- | -------------------------------------------------- |
+| `styleType`             | `"default"` \| `"secondary"` \| `"light"` \| `"link"` | `"default"` | Visual style of the button                         |
+| `loading`               | `boolean`                                             | `false`     | Displays a loading spinner                         |
+| `danger`                | `boolean`                                             | `false`     | Applies a red color scheme for destructive actions |
+| `focusableWhenDisabled` | `boolean`                                             | `false`     | Keeps button focusable when disabled               |
+
+Also inherits all props from `HTMLButtonElement` (e.g. `disabled`, `type`, `onClick`, `children`).
+
+## Rules
+
+-   `styleType` is mandatory.
+-   Use sentence case for all labels — "Save changes" not "Save Changes".
+-   Use concise verb + noun labels — avoid "OK", "Yes", "Click here".
+-   Do not use `Button.Large` unless explicitly required — `Button.Default` is correct for hero CTAs.
+-   Combine `loading` and `disabled` during async operations to prevent double-submission.
+-   Never use raw `<button>` elements — always use design system button components.
+-   Do not nest buttons inside buttons or links.
+-   `danger` applies to any `styleType`.
+
+## Anti-patterns
+
+-   Do not use `Button.Large` as a default choice — it is a special case only.
+-   Do not use vague labels like "OK" or "Yes" — labels must describe the action.
+-   Do not use `loading` alone without also setting `disabled`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/calendar.md b/docs/skills/cc-flagship-ds/resources/v3/components/calendar.md
new file mode 100644
index 0000000000..f3340e089f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/calendar.md
@@ -0,0 +1,109 @@
+# Calendar
+
+Import: `import { Calendar } from "@lifesg/react-design-system/calendar"`
+
+## When to use
+
+-   Displaying an inline date picker when a full-page or panel calendar is preferable over a dropdown.
+-   Use `variant="single"` for standard single-date selection.
+-   Use `variant="multi"` when the user must pick multiple non-contiguous dates (e.g. recurring appointments).
+
+## Usage
+
+### variant="single" — single date selection
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "@lifesg/react-design-system/calendar";
+
+const AppointmentCalendar = () => {
+    const [date, setDate] = useState("2024-06-15");
+
+    return (
+        <Calendar
+            variant="single"
+            value={date}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            onChange={(selected) => setDate(selected)}
+        />
+    );
+};
+```
+
+### variant="multi" — multiple date selection
+
+Note `values` (plural) and `onChange` receives the full updated array.
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "@lifesg/react-design-system/calendar";
+
+const MultiDateCalendar = () => {
+    const [dates, setDates] = useState<string[]>([]);
+
+    return (
+        <Calendar
+            variant="multi"
+            values={dates}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            maxSelectable={5}
+            onChange={(selected) => setDates(selected)}
+        />
+    );
+};
+```
+
+## Props — shared
+
+| Prop                       | Type                                | Default      | Description                                                          |
+| -------------------------- | ----------------------------------- | ------------ | -------------------------------------------------------------------- |
+| `variant`                  | `"single" \| "multi"`               | `"single"`   | Calendar selection mode                                              |
+| `styleType`                | `"bordered" \| "no-border"`         | `"bordered"` | Whether a border is rendered                                         |
+| `disabledDates`            | `string[]`                          | —            | Dates to disable, in `YYYY-MM-DD` format                             |
+| `minDate`                  | `string`                            | —            | Minimum selectable date in `YYYY-MM-DD` format (inclusive)           |
+| `maxDate`                  | `string`                            | —            | Maximum selectable date in `YYYY-MM-DD` format (inclusive)           |
+| `showActiveMonthDaysOnly`  | `boolean`                           | `false`      | Show only the selected month's dates                                 |
+| `onHover`                  | `(value: string) => void`           | —            | Called with hovered date (`YYYY-MM-DD`) or empty string when leaving |
+| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void` | —            | Called when visible month/year changes                               |
+| `id`                       | `string`                            | —            | Unique identifier of the component                                   |
+| `className`                | `string`                            | —            | Class selector of the component                                      |
+| `data-testid`              | `string`                            | —            | Test identifier of the component                                     |
+
+## Props — variant="single"
+
+| Prop       | Type                      | Default | Description                           |
+| ---------- | ------------------------- | ------- | ------------------------------------- |
+| `value`    | `string`                  | —       | Selected date in `YYYY-MM-DD` format  |
+| `onChange` | `(value: string) => void` | —       | Called when the selected date changes |
+
+## Props — variant="multi"
+
+| Prop            | Type                         | Default | Description                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------ |
+| `values`        | `string[]`                   | —       | Array of selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                     | —       | Minimum number of dates required for a valid selection |
+| `maxSelectable` | `number`                     | —       | Maximum number of dates that can be selected           |
+| `onChange`      | `(values: string[]) => void` | —       | Called when the selection changes                      |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                           |
+| ------- | -------- | ------------------------------------- |
+| `year`  | `number` | Current visible year in `YYYY` format |
+| `month` | `number` | Current visible month, 1–12           |
+
+## Rules
+
+-   `variant="single"` uses `value: string` and `onChange: (date: string) => void`.
+-   `variant="multi"` uses `values: string[]` and `onChange: (dates: string[]) => void` — note the plural prop names.
+-   All dates must be in `YYYY-MM-DD` format.
+-   Use `minDate`/`maxDate` to constrain selectable range.
+-   Use `disabledDates` for specific non-selectable dates within the allowed range.
+
+## Anti-patterns
+
+-   Do not pass `value` to `variant="multi"` — the prop is `values` (plural).
+-   Do not pass `values` to `variant="single"` — the prop is `value` (singular).
+-   Do not use Calendar inside a form for simple date entry — prefer `Form.DateInput` for that pattern.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/card.md b/docs/skills/cc-flagship-ds/resources/v3/components/card.md
new file mode 100644
index 0000000000..8327d37526
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/card.md
@@ -0,0 +1,49 @@
+# Card
+
+Import: `import { Card } from "@lifesg/react-design-system/card"`
+
+## When to use
+
+Use to visually group related content — information panels, form sections, list items, or grid tiles.
+
+## Usage
+
+```tsx
+import styled from "styled-components";
+import { Card } from "@lifesg/react-design-system/card";
+import { Spacing } from "@lifesg/react-design-system/theme";
+import { Typography } from "@lifesg/react-design-system/typography";
+
+const CardBody = styled.div`
+    padding: ${Spacing["spacing-24"]};
+`;
+
+<Card>
+    <CardBody>
+        <Typography.HeadingSM>Card title</Typography.HeadingSM>
+        <Typography.BodyMD>Card content goes here.</Typography.BodyMD>
+    </CardBody>
+</Card>;
+```
+
+## Props
+
+Inherits all standard `HTMLDivElement` attributes.
+
+| Prop          | Type     | Default | Description                       |
+| ------------- | -------- | ------- | --------------------------------- |
+| `data-testid` | `string` | —       | Test identifier for the component |
+
+## Rules
+
+-   Card has no default padding — use `spacing-24` internal padding and `spacing-16` gap between content items as the standard.
+-   Shadow (`Shadow["md-subtle"]`) is applied automatically — do not add `box-shadow` manually.
+-   Do not nest cards inside cards.
+-   Use Typography components for all text inside Card — not raw HTML elements.
+-   Combine with `Layout.Container` and `Layout.ColDiv` for responsive card grids.
+
+## Anti-patterns
+
+-   Adding `box-shadow` via CSS — the Card component already applies the correct elevation shadow.
+-   Using raw `<div>` with custom styling instead of Card when the DS Card fits the use case.
+-   Nesting `<Card>` inside another `<Card>`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/checkbox.md b/docs/skills/cc-flagship-ds/resources/v3/components/checkbox.md
new file mode 100644
index 0000000000..cf2bb2ad68
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/checkbox.md
@@ -0,0 +1,56 @@
+# Checkbox
+
+Import: `import { Checkbox } from "@lifesg/react-design-system/checkbox"`
+
+## When to use
+
+-   Simple boolean selections where a compact tick-box is sufficient.
+-   Table row selection (single or "select all").
+-   Filter lists with multiple independent options.
+-   "Select all" patterns using the `indeterminate` state.
+
+Prefer `Toggle` over `Checkbox` when building form inputs that need a visible card-style label container.
+
+## Variants
+
+| `displaySize` | When to use                    |
+| ------------- | ------------------------------ |
+| `"default"`   | Standard use                   |
+| `"small"`     | Dense layouts, inline controls |
+
+## Usage
+
+```tsx
+import { Checkbox } from "@lifesg/react-design-system/checkbox";
+
+<label>
+    <Checkbox checked={agreed} onChange={(e) => {}} />I agree to the terms and
+    conditions
+</label>;
+```
+
+## Props
+
+| Prop                    | Type                                               | Default     | Description                                                                  |
+| ----------------------- | -------------------------------------------------- | ----------- | ---------------------------------------------------------------------------- |
+| `displaySize`           | `"default"` \| `"small"`                           | `"default"` | Display size of the component                                                |
+| `checked`               | `boolean`                                          | —           | Controlled checked state                                                     |
+| `indeterminate`         | `boolean`                                          | —           | Indeterminate state — use for "select all" when only some items are selected |
+| `focusableWhenDisabled` | `boolean`                                          | —           | Keeps component focusable when disabled, preventing all user interaction     |
+| `onChange`              | `(e: React.ChangeEvent<HTMLInputElement>) => void` | —           | Called when the checked state changes — inherited from `InputHTMLAttributes` |
+
+Also inherits all props from `React.InputHTMLAttributes<HTMLInputElement>` (e.g. `name`, `value`, `disabled`, `aria-*`).
+
+## Rules
+
+-   Always pair with a visible label — wrap in `<label>` or use `aria-label`.
+-   Use `indeterminate` for "select all" controls when only some items in a list are selected — not as a permanent state.
+-   Use the same `name` attribute when grouping checkboxes in a form.
+-   No dedicated `disabled` prop — use the inherited `disabled` from `InputHTMLAttributes`, or `focusableWhenDisabled` to retain focus while blocking interaction.
+-   `indeterminate` is a visual state; manage controlled `checked` separately.
+
+## Anti-patterns
+
+-   Do not use `indeterminate` as a permanent or final state — it is a transitional indicator only.
+-   Do not use `Checkbox` alone without a label — always provide accessible text.
+-   Do not use `Checkbox` when only one option from a set can be selected — use `RadioButton` instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/countdown-timer.md b/docs/skills/cc-flagship-ds/resources/v3/components/countdown-timer.md
new file mode 100644
index 0000000000..81c701bb60
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/countdown-timer.md
@@ -0,0 +1,24 @@
+# CountdownTimer
+
+Import: `import { CountdownTimer } from "@lifesg/react-design-system/countdown-timer"`
+
+## Props
+
+| Prop               | Type                                            | Default        | Description                                                                          |
+| ------------------ | ----------------------------------------------- | -------------- | ------------------------------------------------------------------------------------ |
+| `show` \*          | `boolean`                                       | —              | Starts the countdown timer when true                                                 |
+| `timer` \*         | `number`                                        | —              | Countdown duration in seconds                                                        |
+| `timestamp`        | `number`                                        | —              | Unix timestamp (ms) at which the countdown ends; required if `timer` is not provided |
+| `notifyTimer`      | `number`                                        | —              | Notification threshold in seconds                                                    |
+| `offset`           | `{ top: number; left: number; right: number; }` | `{ top: 168 }` | Sticky position on desktop/tablet (px)                                               |
+| `mobileOffset`     | `{ top: number; }`                              | `{ top: 80 }`  | Sticky position on mobile (px)                                                       |
+| `align`            | `"left" \| "right"`                             | `"right"`      | Horizontal alignment of the sticky component                                         |
+| `fixed`            | `boolean`                                       | `true`         | Whether the component is sticky when scrolled out of view                            |
+| `reminderInterval` | `number`                                        | `120`          | Interval in seconds for polite screen reader reminders                               |
+| `onTick`           | `(seconds: number) => void`                     | —              | Called every second when value ≤ `notifyTimer` (not guaranteed to be precise)        |
+| `onNotify`         | `() => void`                                    | —              | Called once when the timer value drops below `notifyTimer`                           |
+| `onFinish`         | `() => void`                                    | —              | Called when the timer reaches zero                                                   |
+| `className`        | `string`                                        | —              | Class selector of the component                                                      |
+| `data-testid`      | `string`                                        | —              | Test identifier of the component                                                     |
+
+`*` = required
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/data-table.md b/docs/skills/cc-flagship-ds/resources/v3/components/data-table.md
new file mode 100644
index 0000000000..85afc4b459
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/data-table.md
@@ -0,0 +1,145 @@
+# DataTable
+
+Import: `import { DataTable } from "@lifesg/react-design-system/data-table"`
+
+## When to use
+
+-   Displaying tabular data with optional sorting, row selection, and custom cell rendering.
+-   Use `enableMultiSelect` + `enableSelectAll` when users need to act on multiple rows at once.
+
+## Usage
+
+### Column definitions, sorting, selection, and custom cell rendering
+
+```tsx
+import { useState, useMemo } from "react";
+import {
+    DataTable,
+    SortIndicatorsProps,
+} from "@lifesg/react-design-system/data-table";
+import { Pill } from "@lifesg/react-design-system/pill";
+
+const rows = [
+    { id: "1", name: "Alice", status: "active", score: 90 },
+    { id: "2", name: "Bob", status: "inactive", score: 72 },
+    { id: "3", name: "Carol", status: "active", score: 85 },
+];
+
+const Example = () => {
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [sortState, setSortState] = useState<SortIndicatorsProps>({
+        score: "desc",
+    });
+
+    // onSelect: toggle a single row id
+    const handleSelect = (rowId: string, isSelected: boolean) => {
+        setSelectedIds((prev) =>
+            isSelected ? [...prev, rowId] : prev.filter((id) => id !== rowId)
+        );
+    };
+
+    // onSelectAll: isAllSelected=true means "clear all"; false means "select all"
+    const handleSelectAll = (isAllSelected: boolean) => {
+        setSelectedIds(isAllSelected ? [] : rows.map((r) => r.id));
+    };
+
+    const handleHeaderClick = (fieldKey: string) => {
+        if (fieldKey === "score") {
+            setSortState({ score: sortState.score === "asc" ? "desc" : "asc" });
+        }
+    };
+
+    const sorted = useMemo(
+        () =>
+            [...rows].sort((a, b) =>
+                sortState.score === "asc"
+                    ? a.score - b.score
+                    : b.score - a.score
+            ),
+        [sortState]
+    );
+
+    return (
+        <DataTable
+            headers={[
+                { fieldKey: "name", label: "Name", keyColumn: true },
+                { fieldKey: "status", label: "Status" },
+                { fieldKey: "score", label: "Score", clickable: true },
+            ]}
+            rows={sorted.map((row) => ({
+                ...row,
+                // custom cell: render status as a Pill
+                status: <Pill type="outline">{row.status}</Pill>,
+            }))}
+            selectedIds={selectedIds}
+            disabledIds={["2"]}
+            sortIndicators={sortState}
+            enableMultiSelect
+            enableSelectAll
+            onSelect={handleSelect}
+            onSelectAll={handleSelectAll}
+            onHeaderClick={handleHeaderClick}
+        />
+    );
+};
+```
+
+## Props
+
+| Prop                    | Type                                           | Default     | Description                                               |
+| ----------------------- | ---------------------------------------------- | ----------- | --------------------------------------------------------- |
+| `headers` \*            | `(string \| HeaderItemProps)[]`                | —           | Configuration for each header column                      |
+| `rows`                  | `RowProps[]`                                   | —           | The list of data                                          |
+| `selectedIds`           | `string[]`                                     | —           | The ids of selected items                                 |
+| `disabledIds`           | `string[]`                                     | —           | The ids of disabled items                                 |
+| `sortIndicators`        | `{ [fieldKey]: "asc" \| "desc" }`              | —           | Sort indicator display state for each column              |
+| `alternatingRows`       | `boolean`                                      | —           | Every alternate row gets a different background colour    |
+| `loadState`             | `"success" \| "loading"`                       | `"success"` | Table load state; shows animation while loading           |
+| `renderCustomEmptyView` | `() => React.ReactNode`                        | —           | Custom view rendered when the table is empty              |
+| `emptyView`             | `ErrorDisplayAttributes`                       | —           | Override props for the empty view display                 |
+| `enableMultiSelect`     | `boolean`                                      | —           | Enables a checkbox in each row for multi-selection        |
+| `enableSelectAll`       | `boolean`                                      | —           | Enables a header checkbox to select all / clear selection |
+| `enableStickyHeader`    | `boolean`                                      | —           | Fixes the header to the top                               |
+| `enableActionBar`       | `boolean`                                      | —           | Shows an action bar when one or more rows are selected    |
+| `actionBarContent`      | `React.ReactNode`                              | —           | Custom content rendered within the action bar             |
+| `onClearSelectionClick` | `() => void`                                   | —           | Called when the clear button in the action bar is clicked |
+| `onSelect`              | `(rowId: string, isSelected: boolean) => void` | —           | Called when a row is selected                             |
+| `onSelectAll`           | `(isAllSelected: boolean) => void`             | —           | Called when all rows are selected                         |
+| `onHeaderClick`         | `(fieldKey: string) => void`                   | —           | Called with the column field key when a header is clicked |
+| `id`                    | `string`                                       | —           | Unique identifier of the component                        |
+| `className`             | `string`                                       | —           | Class selector of the component                           |
+| `data-testid`           | `string`                                       | —           | Test identifier of the component                          |
+
+`*` = required
+
+## HeaderItemProps
+
+| Prop          | Type                        | Default | Description                                                            |
+| ------------- | --------------------------- | ------- | ---------------------------------------------------------------------- |
+| `fieldKey` \* | `string`                    | —       | Key name in the row item object                                        |
+| `label` \*    | `string \| React.ReactNode` | —       | Display label for the column header                                    |
+| `clickable`   | `boolean`                   | —       | If true, `onHeaderClick` is called when the cell is clicked            |
+| `style`       | `CSSProperties`             | —       | Custom styles for the column header cell                               |
+| `keyColumn`   | `boolean`                   | —       | Marks this column as descriptive for screen reader row checkbox labels |
+
+## RowProps
+
+| Prop         | Type                                                                           | Default | Description                             |
+| ------------ | ------------------------------------------------------------------------------ | ------- | --------------------------------------- |
+| `id` \*      | `string`                                                                       | —       | Row id                                  |
+| `[fieldKey]` | `string \| number \| React.ReactNode \| (row, renderProps) => React.ReactNode` | —       | Other properties on the row item object |
+
+## Rules
+
+-   Each row object must have a unique `id: string` field.
+-   `selectedIds` and `disabledIds` are arrays of row `id` strings — manage them in external state.
+-   `onSelect(rowId, isSelected)` fires per row; toggle the id into/out of your `selectedIds` array.
+-   `onSelectAll(isAllSelected)` fires when the header checkbox is clicked; `isAllSelected` is `true` when the action should clear all selections (the parameter name is inverted — see example).
+-   For sortable columns, set `clickable: true` on the header and handle `onHeaderClick(fieldKey)`.
+-   Custom cell rendering: set a row field to a `ReactNode` or a render function `(row, renderProps) => ReactNode`.
+
+## Anti-patterns
+
+-   Do not derive `selectedIds` from row data alone without external state — the table is uncontrolled for selection without it.
+-   Do not omit `id` on row objects — selection and disabled logic will break silently.
+-   Do not add `clickable: true` to a header without wiring `onHeaderClick` — clicks will silently do nothing.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/date-navigator.md b/docs/skills/cc-flagship-ds/resources/v3/components/date-navigator.md
new file mode 100644
index 0000000000..bbaa0c0f5e
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/date-navigator.md
@@ -0,0 +1,27 @@
+# DateNavigator
+
+Import: `import { DateNavigator } from "@lifesg/react-design-system/date-navigator"`
+
+## Props
+
+| Prop                     | Type                            | Default         | Description                                                            |
+| ------------------------ | ------------------------------- | --------------- | ---------------------------------------------------------------------- |
+| `selectedDate` \*        | `string`                        | —               | Current displayed date in `YYYY-MM-DD` format                          |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void` | —               | Called on left arrow navigation button click                           |
+| `onRightArrowClick` \*   | `(currentDate: string) => void` | —               | Called on right arrow navigation button click                          |
+| `minDate`                | `string`                        | —               | Minimum date allowed for navigation in `YYYY-MM-DD` format (inclusive) |
+| `maxDate`                | `string`                        | —               | Maximum date allowed for navigation in `YYYY-MM-DD` format (inclusive) |
+| `loading`                | `boolean`                       | —               | Disables navigation buttons while loading                              |
+| `showDateAsShortForm`    | `boolean`                       | —               | Shows the date in short form                                           |
+| `showCurrentDateAsToday` | `boolean`                       | —               | Shows today's system date as "Today"                                   |
+| `onCalendarDateSelect`   | `(currentDate: string) => void` | —               | Called on a calendar date selection                                    |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`        | `document body` | Root element that hosts the calendar dropdown                          |
+| `id`                     | `string`                        | —               | Identifier of the component                                            |
+| `className`              | `string`                        | —               | Class selector of the component                                        |
+| `data-testid`            | `string`                        | —               | Test identifier of the component                                       |
+
+`*` = required
+
+## Rules
+
+-   Only override `dropdownRootNode` if you need the dropdown to share a stacking context with a scroll container — may cause z-index issues.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/divider.md b/docs/skills/cc-flagship-ds/resources/v3/components/divider.md
new file mode 100644
index 0000000000..2603aed8a3
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/divider.md
@@ -0,0 +1,21 @@
+# Divider
+
+Import: `import { Divider } from "@lifesg/react-design-system/divider"`
+
+## Props
+
+Inherits all props from `HTMLElement`.
+
+| Prop          | Type                                           | Default   | Description                                                   |
+| ------------- | ---------------------------------------------- | --------- | ------------------------------------------------------------- |
+| `thickness`   | `number`                                       | `1`       | Height of the Divider in px                                   |
+| `lineStyle`   | `"solid" \| "dashed"`                          | `"solid"` | Style of the divider line                                     |
+| `layoutType`  | `"flex" \| "grid"`                             | `"flex"`  | Layout type context                                           |
+| `color`       | `string \| (props: ThemeStyleProps) => string` | —         | Color of the divider line                                     |
+| `mobileCols`  | `number \| number[]`                           | `4`       | Column span on mobile; only applies with `layoutType="grid"`  |
+| `tabletCols`  | `number \| number[]`                           | `8`       | Column span on tablet; only applies with `layoutType="grid"`  |
+| `desktopCols` | `number \| number[]`                           | `12`      | Column span on desktop; only applies with `layoutType="grid"` |
+
+## Rules
+
+-   `mobileCols`, `tabletCols`, `desktopCols` follow the same semantics as `Layout.ColDiv` — see ColDiv docs for details.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/drawer.md b/docs/skills/cc-flagship-ds/resources/v3/components/drawer.md
new file mode 100644
index 0000000000..f2b3ced59e
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/drawer.md
@@ -0,0 +1,80 @@
+# Drawer
+
+Import: `import { Drawer } from "@lifesg/react-design-system/drawer"`
+
+## When to use
+
+Use to show supplementary content or actions without navigating away from the current page — for example, filter panels or detail views.
+
+Do not use for:
+
+-   Primary forms that require focused attention
+-   Flows that need the full viewport
+
+## Usage
+
+```tsx
+import { useState } from "react";
+import { Drawer } from "@lifesg/react-design-system/drawer";
+import { Button } from "@lifesg/react-design-system/button";
+import { Text } from "@lifesg/react-design-system/text";
+
+const FilterDrawer = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+
+    return (
+        <>
+            <Button.Default onClick={() => setShow(true)}>
+                Open filters
+            </Button.Default>
+
+            <Drawer
+                show={show}
+                heading="Filter options"
+                onClose={handleClose}
+                onOverlayClick={handleClose}
+            >
+                <div style={{ padding: "1.5rem" }}>
+                    <Text.H4 style={{ marginBottom: "0.75rem" }}>
+                        Category
+                    </Text.H4>
+                    <Text.Body style={{ marginBottom: "2rem" }}>
+                        Filter content goes here.
+                    </Text.Body>
+                    <Button.Default styleType="secondary" onClick={handleClose}>
+                        Close
+                    </Button.Default>
+                </div>
+            </Drawer>
+        </>
+    );
+};
+```
+
+## Props
+
+| Prop             | Type              | Default | Description                                 |
+| ---------------- | ----------------- | ------- | ------------------------------------------- |
+| `show`           | `boolean`         | —       | Controls visibility                         |
+| `heading`        | `string`          | —       | Header text of the drawer panel             |
+| `onClose`        | `() => void`      | —       | Called when the close button is clicked     |
+| `onOverlayClick` | `() => void`      | —       | Called when the backdrop overlay is clicked |
+| `children`       | `React.ReactNode` | —       | Panel content                               |
+| `id`             | `string`          | —       | Unique identifier                           |
+| `className`      | `string`          | —       | Class selector                              |
+| `data-testid`    | `string`          | —       | Test identifier                             |
+
+## Rules
+
+-   Always provide `onClose` so users can dismiss the panel via the close button.
+-   Provide `onOverlayClick` to allow dismissal by clicking outside the panel; set it to the same handler as `onClose` unless the overlay should not close the panel.
+-   Use `heading` to give the drawer a descriptive title for the user and for screen readers.
+-   The drawer slides in from the right edge of the viewport.
+-   Content scrolls independently within the panel when it exceeds the panel height.
+
+## Anti-patterns
+
+-   Do not use the Drawer for full forms — use a dedicated page or Modal instead.
+-   Do not omit `onClose` — users must have a way to dismiss the panel.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/error-display.md b/docs/skills/cc-flagship-ds/resources/v3/components/error-display.md
new file mode 100644
index 0000000000..c605f4904d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/error-display.md
@@ -0,0 +1,114 @@
+# ErrorDisplay
+
+Import: `import { ErrorDisplay } from "@lifesg/react-design-system/error-display"`
+
+## When to use
+
+Use for full-page or full-section states where the primary content cannot be shown — HTTP errors, empty results, session states, and system messages. It handles illustration, title, description, and action button as a unit.
+
+Do not build custom error pages with raw Typography + Button — always use `ErrorDisplay` so illustrations and copy stay consistent across products.
+
+## Variants
+
+| `type`                          | When to use                                                      |
+| ------------------------------- | ---------------------------------------------------------------- |
+| `"no-item-found"`               | Search or filter returned no results                             |
+| `"404"`                         | Page not found                                                   |
+| `"403"`                         | Access denied / permission error                                 |
+| `"500"`                         | Internal server error                                            |
+| `"400"`                         | Bad request                                                      |
+| `"408"`                         | Request timeout                                                  |
+| `"502"`                         | Bad gateway                                                      |
+| `"503"`                         | Service unavailable                                              |
+| `"504"`                         | Gateway timeout                                                  |
+| `"maintenance"`                 | Planned downtime — requires `additionalProps.dateString`         |
+| `"inactivity"`                  | Session timeout warning — requires `additionalProps.secondsLeft` |
+| `"logout"`                      | User has been logged out                                         |
+| `"warning"`                     | General warning state                                            |
+| `"confirmation"`                | Action confirmed (e.g. submission complete)                      |
+| `"link-error"`                  | Broken or expired link                                           |
+| `"insufficient-credits"`        | User lacks credits to proceed                                    |
+| `"payment-unsuccessful"`        | Payment failed                                                   |
+| `"transfer-unsuccessful"`       | Transfer failed                                                  |
+| `"unsupported-browser"`         | Browser not supported                                            |
+| `"partially-supported-browser"` | Browser partially supported                                      |
+
+## Usage
+
+```tsx
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+
+{
+    /* No search results */
+}
+<ErrorDisplay
+    type="no-item-found"
+    title="No results found"
+    description="Try adjusting your search or filters."
+    actionButton={{ children: "Clear filters", onClick: handleClear }}
+/>;
+
+{
+    /* Page not found */
+}
+<ErrorDisplay type="404" />;
+
+{
+    /* Maintenance with scheduled date */
+}
+<ErrorDisplay
+    type="maintenance"
+    additionalProps={{ dateString: "1 Jan 2025, 8:00am to 10:00am" }}
+/>;
+
+{
+    /* Session inactivity warning */
+}
+<ErrorDisplay
+    type="inactivity"
+    additionalProps={{ secondsLeft: 60, reminderInterval: 30 }}
+/>;
+```
+
+## Props
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                           | Default               | Description                                        |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | -------------------------------------------------- |
+| `type` \*            | `"400" \| "403" \| "404" \| "408" \| "500" \| "502" \| "503" \| "504" \| "confirmation" \| "inactivity" \| "insufficient-credits" \| "link-error" \| "logout" \| "warning" \| "maintenance" \| "no-item-found" \| "payment-unsuccessful" \| "transfer-unsuccessful" \| "unsupported-browser" \| "partially-supported-browser"` | —                     | The type of error                                  |
+| `img`                | `HTMLImageElement`                                                                                                                                                                                                                                                                                                             | —                     | Error image properties                             |
+| `title`              | `string`                                                                                                                                                                                                                                                                                                                       | —                     | Title of the ErrorDisplay                          |
+| `description`        | `string \| JSX.Element`                                                                                                                                                                                                                                                                                                        | —                     | Description of the ErrorDisplay                    |
+| `actionButton`       | `HTMLButtonElement`                                                                                                                                                                                                                                                                                                            | `children: "Proceed"` | Action button at the bottom                        |
+| `illustrationScheme` | `"base" \| "bookingsg" \| "rbs"`                                                                                                                                                                                                                                                                                               | —                     | Use a resource scheme instead of the default theme |
+| `additionalProps`    | `MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes`                                                                                                                                                                                                                                                            | —                     | Additional properties for certain error types      |
+| `imageOnly`          | `boolean`                                                                                                                                                                                                                                                                                                                      | —                     | Renders only the image                             |
+
+`*` = required
+
+## MaintenanceAdditionalAttributes
+
+| Prop            | Type     | Default | Description                            |
+| --------------- | -------- | ------- | -------------------------------------- |
+| `dateString` \* | `string` | —       | Date display for the maintenance error |
+
+## InactivityAdditionalAttributes
+
+| Prop             | Type     | Default | Description                                          |
+| ---------------- | -------- | ------- | ---------------------------------------------------- |
+| `secondsLeft` \* | `number` | —       | Time remaining in seconds for the inactivity display |
+
+## Rules
+
+-   Always use `ErrorDisplay` for error/empty states — never build custom error pages with raw components.
+-   `type` is required — it determines the default illustration, title, and description.
+-   Override `title` and `description` only when the defaults don't fit your context.
+-   `actionButton` accepts standard `ButtonProps` — label and `onClick` are the common fields.
+-   `"maintenance"` requires `additionalProps.dateString` to render the scheduled date in the description.
+-   `"inactivity"` requires `additionalProps.secondsLeft` for the countdown display.
+-   For listing pages use `type="no-item-found"` — it has the correct "empty results" illustration.
+
+## Anti-patterns
+
+-   Do not use `imageOnly` unless rendering inside a constrained space where text would overflow.
+-   Do not hardcode error page titles/descriptions that duplicate what `ErrorDisplay` already provides by default.
+-   Do not use `type="warning"` as a generic placeholder — it implies a system-level warning, not a validation message (use `Alert` for that).
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/feedback-rating.md b/docs/skills/cc-flagship-ds/resources/v3/components/feedback-rating.md
new file mode 100644
index 0000000000..92bb2f0851
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/feedback-rating.md
@@ -0,0 +1,64 @@
+# FeedbackRating
+
+Import: `import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating"`
+
+## When to use
+
+Use at the end of a flow or session to collect a star rating and an optional submission action from the user.
+
+## Usage
+
+### Complete controlled pattern
+
+```tsx
+import { useState } from "react";
+import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating";
+
+const RatingWidget = () => {
+    // Track rating separately — onSubmit does NOT receive it
+    const [rating, setRating] = useState(0);
+
+    const handleSubmit = () => {
+        // Read from state, not from onSubmit arguments (there are none)
+        submitFeedback({ stars: rating });
+    };
+
+    return (
+        <FeedbackRating
+            rating={rating}
+            onRatingChange={(value) => setRating(value)}
+            onSubmit={handleSubmit}
+            description="How was your experience?"
+            buttonLabel="Send feedback"
+        />
+    );
+};
+```
+
+**Key gotcha:** `onSubmit` has the signature `() => void` — it carries no payload. The rating value is only available through the `rating` state you control via `onRatingChange`.
+
+## Props
+
+| Prop                | Type                      | Default                  | Description                                        |
+| ------------------- | ------------------------- | ------------------------ | -------------------------------------------------- |
+| `rating` \*         | `number`                  | —                        | Current selected rating state                      |
+| `onRatingChange` \* | `(value: number) => void` | —                        | Called when a star is clicked                      |
+| `onSubmit` \*       | `() => void`              | —                        | Called when the submit button is clicked           |
+| `imgSrc`            | `string`                  | Default banner image     | Banner image src; pass empty string to hide banner |
+| `description`       | `string`                  | `"Rate your experience"` | Description text displayed above the stars         |
+| `buttonLabel`       | `string`                  | `"Submit"`               | Submit button label                                |
+| `id`                | `string`                  | —                        | Unique id of the component                         |
+| `className`         | `string`                  | —                        | Class selector of the component                    |
+| `data-testid`       | `string`                  | —                        | Test identifier of the component                   |
+
+`*` = required
+
+## Rules
+
+-   All three props — `rating`, `onRatingChange`, `onSubmit` — are required.
+-   `onSubmit` does **not** receive the rating value. Track the rating separately via `onRatingChange` state and read it inside `onSubmit`.
+-   `rating` must be controlled state; the component does not manage selection internally.
+
+## Anti-patterns
+
+-   Do not try to read the rating from inside `onSubmit`'s arguments — it receives none. Always use the state value set by `onRatingChange`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/file-download.md b/docs/skills/cc-flagship-ds/resources/v3/components/file-download.md
new file mode 100644
index 0000000000..504a7851cc
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/file-download.md
@@ -0,0 +1,41 @@
+# FileDownload
+
+Import: `import { FileDownload } from "@lifesg/react-design-system/file-download"`
+
+## Sub-components
+
+-   `FileItemProps` — shape of each item in `fileItems`
+
+## Props
+
+| Prop            | Type                                                     | Default      | Description                               |
+| --------------- | -------------------------------------------------------- | ------------ | ----------------------------------------- |
+| `fileItems` \*  | `FileItemProps[]`                                        | —            | The files to be rendered                  |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —            | Called when a file item is clicked        |
+| `title`         | `string \| JSX.Element`                                  | —            | A title to be displayed for the component |
+| `description`   | `string \| JSX.Element`                                  | —            | The description to be displayed           |
+| `styleType`     | `"bordered" \| "no-border"`                              | `"bordered"` | The style type for the component          |
+| `id`            | `string`                                                 | —            | The unique id of the component            |
+| `className`     | `string`                                                 | —            | The class selector of the component       |
+| `data-testid`   | `string`                                                 | —            | The test identifier for the component     |
+
+`*` = required
+
+## FileItemProps
+
+| Prop                    | Type                        | Default | Description                                   |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------- |
+| `id` \*                 | `string`                    | —       | The unique identifier of the file             |
+| `name` \*               | `string`                    | —       | The name of the file                          |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file                     |
+| `filePath` \*           | `string`                    | —       | The remote path of the file                   |
+| `size`                  | `number`                    | —       | The size of the file in bytes                 |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Custom error message when file download fails |
+| `thumbnailImageDataUrl` | `string`                    | —       | The thumbnail of the file                     |
+| `truncateText`          | `boolean`                   | `true`  | Indicates if text should be truncated         |
+| `ready`                 | `boolean`                   | `true`  | Indicates if the file is ready for download   |
+
+## Rules
+
+-   `fileItems` and `onDownload` are required.
+-   On `FileItemProps`: `id`, `name`, `mimeType`, and `filePath` are required.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/file-upload.md b/docs/skills/cc-flagship-ds/resources/v3/components/file-upload.md
new file mode 100644
index 0000000000..8c1f2d6e3c
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/file-upload.md
@@ -0,0 +1,91 @@
+# FileUpload
+
+Import: `import { FileUpload } from "@lifesg/react-design-system/file-upload"`
+
+## When to use
+
+-   Forms that require users to attach one or more files (e.g. supporting documents, ID scans, images).
+-   Use `sortable` when file order matters for downstream processing.
+-   Use `editableFileItems` when image files need alt-text or descriptions.
+-   Use `readOnly` on review or summary screens to display uploaded files without allowing changes.
+
+## Usage
+
+```tsx
+import { FileUpload } from "@lifesg/react-design-system/file-upload";
+
+<FileUpload
+    title="Upload supporting documents"
+    description="PDF, JPG, or PNG. Max 5 MB each."
+    accept=".pdf,.jpg,.png"
+    fileItems={fileItems}
+    onChange={(files) => {}}
+    onDelete={(item) => {}}
+/>;
+```
+
+## Props
+
+| Prop                       | Type                                   | Default      | Description                                                             |
+| -------------------------- | -------------------------------------- | ------------ | ----------------------------------------------------------------------- |
+| `fileItems`                | `FileItemProps[]`                      | —            | Files currently displayed in the list                                   |
+| `title`                    | `string \| JSX.Element`                | —            | Title displayed above the upload area                                   |
+| `description`              | `string \| JSX.Element`                | —            | Supporting text inside the upload area                                  |
+| `styleType`                | `"bordered" \| "no-border"`            | `"bordered"` | Visual style of the component                                           |
+| `maxFiles`                 | `number`                               | —            | Maximum number of files allowed                                         |
+| `warning`                  | `string \| JSX.Element`                | —            | Warning message shown below the upload area                             |
+| `errorMessage`             | `string \| JSX.Element`                | —            | General error message for the component                                 |
+| `editableFileItems`        | `boolean`                              | —            | Allows users to edit descriptions on image file items                   |
+| `fileDescriptionMaxLength` | `number`                               | —            | Maximum length of the image file description                            |
+| `descriptionRequired`      | `boolean`                              | `true`       | When `false`, the save button is enabled even with an empty description |
+| `descriptionLabel`         | `FormLabelProps`                       | —            | Overrides the default label and subtext for the description field       |
+| `sortable`                 | `boolean`                              | —            | Allows users to reorder file items via drag                             |
+| `readOnly`                 | `boolean`                              | —            | Shows uploaded files without the upload area                            |
+| `disabled`                 | `boolean`                              | —            | Disables the component                                                  |
+| `id`                       | `string`                               | —            | Unique identifier of the component                                      |
+| `name`                     | `string`                               | —            | Name attribute of the component                                         |
+| `className`                | `string`                               | —            | Class selector of the component                                         |
+| `onChange`                 | `(files: File[]) => void`              | —            | Called when files are added via drag-drop or click                      |
+| `onEdit`                   | `(fileItem: FileItemProps) => void`    | —            | Called when a file item description is updated                          |
+| `onDelete`                 | `(fileItem: FileItemProps) => void`    | —            | Called when a file item's delete button is clicked                      |
+| `onSort`                   | `(fileItems: FileItemProps[]) => void` | —            | Called when files are reordered via drag                                |
+
+Also inherits additional props from the HTML `<input type="file">` element (e.g. `accept`).
+
+## Custom labels
+
+| Prop                             | Type     | Default          | Description                                       |
+| -------------------------------- | -------- | ---------------- | ------------------------------------------------- |
+| `customLabels.uploadButtonLabel` | `string` | `"Upload files"` | Label of the button that triggers the file dialog |
+
+## FileItemProps
+
+| Prop                    | Type                        | Required | Description                              |
+| ----------------------- | --------------------------- | -------- | ---------------------------------------- |
+| `id`                    | `string`                    | Yes      | Unique identifier for the file           |
+| `name`                  | `string`                    | Yes      | File name displayed in the list          |
+| `type`                  | `string`                    | Yes      | MIME type of the file                    |
+| `size`                  | `number`                    | Yes      | File size in bytes                       |
+| `description`           | `string`                    | —        | Alt text or description for the file     |
+| `progress`              | `number`                    | —        | Upload progress from 0 to 1              |
+| `errorMessage`          | `string \| React.ReactNode` | —        | Per-file error message                   |
+| `thumbnailImageDataUrl` | `string`                    | —        | Thumbnail data URL rendered for the file |
+| `truncateText`          | `boolean`                   | `true`   | Truncates long file names                |
+
+## Rules
+
+-   Always manage `fileItems` state in the parent — the component does not store files internally.
+-   Always handle `onChange` to convert incoming `File[]` into `FileItemProps[]` and add them to state.
+-   Always handle `onDelete` to remove the corresponding item from state.
+-   Use `maxFiles` to enforce the maximum number of attachments allowed by the backend.
+-   Use `progress` on individual `FileItemProps` to show per-file upload progress.
+-   Use `errorMessage` on individual `FileItemProps` to surface per-file upload errors.
+-   Use the component-level `errorMessage` for overall validation errors (e.g. "At least one file is required").
+-   Use `accept` (inherited from `<input type="file">`) to restrict file types to what the backend accepts.
+
+## Anti-patterns
+
+-   Do not use without wiring `onChange` and `onDelete` — the list will not update.
+-   Do not store files in component state inside the same component that renders `FileUpload` — hoist state to the form level.
+-   Do not skip `id`, `name`, `type`, and `size` in `FileItemProps` — they are required fields.
+-   Do not use `editableFileItems` for non-image files — description editing only applies to images.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/filter.md b/docs/skills/cc-flagship-ds/resources/v3/components/filter.md
new file mode 100644
index 0000000000..46a4cfa867
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/filter.md
@@ -0,0 +1,210 @@
+# Filter
+
+Import: `import { Filter } from "@lifesg/react-design-system/filter"`
+
+## When to use
+
+Use on listing pages to narrow a result set. `Filter` automatically switches between a desktop sidebar and a mobile modal at the `lg-max` breakpoint.
+
+## Composition
+
+```
+Filter                                  ← recommended: auto-switches sidebar ↔ modal at lg breakpoint
+├── Filter.Item title="Sort by"         ← section header + collapsible wrapper
+│   └── {RadioButton group}             ← sort options use RadioButton, not Filter.Checkbox
+├── Filter.Item title="Category"
+│   └── Filter.Checkbox                 ← multi-select filter options
+└── Filter.Item title="..."
+    └── Filter.Checkbox
+```
+
+Manual variants (bypass auto-responsive):
+
+```
+Filter.Sidebar                          ← desktop sidebar only
+Filter.Modal                            ← mobile modal only
+Filter.Page                             ← full-page filter (mobile-only flows)
+```
+
+`Filter.Item` is the only valid direct child of `Filter`, `Filter.Sidebar`, or `Filter.Modal`. Use `RadioButton` for sort (single-select); use `Filter.Checkbox` for multi-select filters.
+
+## Variants
+
+| Variant                  | When to use                                                     |
+| ------------------------ | --------------------------------------------------------------- |
+| `<Filter>` (recommended) | Auto-responsive — desktop sidebar + mobile modal                |
+| `<Filter.Sidebar>`       | Desktop sidebar only — when bypassing auto-responsive behaviour |
+| `<Filter.Modal>`         | Mobile modal only — when bypassing auto-responsive behaviour    |
+
+## Usage
+
+### Auto-responsive Filter (recommended)
+
+`Filter` renders a sidebar on desktop and a modal on mobile automatically. Pass children as a function to receive `mode` (`"desktop" | "mobile"`) when you need to render differently per viewport.
+
+```tsx
+import { useState } from "react";
+import { Filter } from "@lifesg/react-design-system/filter";
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+const ListingFilter = () => {
+    const [category, setCategory] = useState("all");
+    const [activeCount, setActiveCount] = useState(0);
+
+    const handleClear = () => {
+        setCategory("all");
+        setActiveCount(0);
+    };
+
+    return (
+        <Filter
+            count={activeCount}
+            onClear={handleClear}
+            onDone={() => {
+                /* commit draft state */
+            }}
+            onDismiss={() => {
+                /* discard draft state */
+            }}
+        >
+            {(mode) => (
+                <>
+                    <Filter.Item title="Category">
+                        <RadioButton
+                            name="category"
+                            value="all"
+                            checked={category === "all"}
+                            onChange={() => setCategory("all")}
+                        >
+                            All
+                        </RadioButton>
+                        <RadioButton
+                            name="category"
+                            value="news"
+                            checked={category === "news"}
+                            onChange={() => setCategory("news")}
+                        >
+                            News
+                        </RadioButton>
+                    </Filter.Item>
+                    <Filter.Item title="Sort by" collapsible={false}>
+                        <RadioButton name="sort" value="newest" defaultChecked>
+                            Newest first
+                        </RadioButton>
+                        <RadioButton name="sort" value="oldest">
+                            Oldest first
+                        </RadioButton>
+                    </Filter.Item>
+                </>
+            )}
+        </Filter>
+    );
+};
+```
+
+Key points:
+
+-   `onDone` and `onDismiss` are mobile-only callbacks; they are ignored on desktop.
+-   `collapsible={false}` on sort sections keeps them always expanded.
+-   `count` drives the active-filter badge in the header.
+
+## Props
+
+### Filter
+
+Auto-responsive: renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile at the `lg-max` breakpoint.
+
+| Prop                      | Type                                                               | Default   | Description                                                      |
+| ------------------------- | ------------------------------------------------------------------ | --------- | ---------------------------------------------------------------- |
+| `children`                | `React.ReactNode \| (mode: Mode) => React.ReactNode`               | —         | `Filter.Item` children — **required**                            |
+| `onClear`                 | `() => void`                                                       | —         | Called when the Clear button is pressed                          |
+| `clearButtonDisabled`     | `boolean`                                                          | `false`   | Disable the Clear button                                         |
+| `count`                   | `number`                                                           | —         | Selected filter count shown in the header when greater than zero |
+| `customLabels`            | `FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps`     | —         | Override built-in label strings                                  |
+| `onDismiss`               | `() => void`                                                       | —         | Mobile only — called when the modal is dismissed                 |
+| `onDone`                  | `() => void`                                                       | —         | Mobile only — called when Done is tapped                         |
+| `onModalOpen`             | `() => void`                                                       | —         | Mobile only — called when the modal opens                        |
+| `toggleFilterButtonStyle` | `"default" \| "secondary" \| "light" \| "link"`                    | `"light"` | Mobile only — style of the "Filters" toggle button               |
+| `insets`                  | `{ top?: number, bottom?: number, left?: number, right?: number }` | —         | Mobile only — safe-area insets for notched devices               |
+| `id`                      | `string`                                                           | —         | Unique identifier                                                |
+| `className`               | `string`                                                           | —         | Class selector                                                   |
+| `data-testid`             | `string`                                                           | —         | Test identifier                                                  |
+
+### Custom labels (Filter / Filter.Modal)
+
+| Key                       | Default                   |
+| ------------------------- | ------------------------- |
+| `headerTitle`             | `"Filters"`               |
+| `clearButtonLabel`        | `"Clear"`                 |
+| `toggleFilterButtonLabel` | `"Filters"` (mobile only) |
+| `doneButtonLabel`         | `"Done"` (mobile only)    |
+
+### Filter.Sidebar
+
+| Prop                  | Type                                                  | Default | Description                             |
+| --------------------- | ----------------------------------------------------- | ------- | --------------------------------------- |
+| `children`            | `React.ReactNode`                                     | —       | `Filter.Item` components — **required** |
+| `onClear`             | `() => void`                                          | —       | Called when the Clear button is pressed |
+| `clearButtonDisabled` | `boolean`                                             | `false` | Disable the Clear button                |
+| `count`               | `number`                                              | —       | Selected filter count                   |
+| `customLabels`        | `{ headerTitle?: string, clearButtonLabel?: string }` | —       | Override label strings                  |
+| `id`                  | `string`                                              | —       | Unique identifier                       |
+| `className`           | `string`                                              | —       | Class selector                          |
+| `data-testid`         | `string`                                              | —       | Test identifier                         |
+
+### Filter.Modal
+
+Inherits Filter.Sidebar props, plus:
+
+| Prop                      | Type                                                               | Default   | Description                                       |
+| ------------------------- | ------------------------------------------------------------------ | --------- | ------------------------------------------------- |
+| `onDismiss`               | `() => void`                                                       | —         | Called when the modal is dismissed                |
+| `onDone`                  | `() => void`                                                       | —         | Called when Done is tapped                        |
+| `onModalOpen`             | `() => void`                                                       | —         | Called when the modal opens                       |
+| `toggleFilterButtonStyle` | `"default" \| "secondary" \| "light" \| "link"`                    | `"light"` | Style of the "Filters" toggle button              |
+| `insets`                  | `{ top?: number, bottom?: number, left?: number, right?: number }` | —         | Safe-area insets for notched devices              |
+| `customLabels`            | `FilterModalCustomLabelProps`                                      | —         | Override label strings including mobile-only keys |
+
+### Filter.Item
+
+| Prop                | Type                                                 | Default | Description                                     |
+| ------------------- | ---------------------------------------------------- | ------- | ----------------------------------------------- |
+| `children`          | `React.ReactNode \| (mode: Mode) => React.ReactNode` | —       | Filter controls — **required**                  |
+| `title`             | `string`                                             | —       | Section heading                                 |
+| `collapsible`       | `boolean`                                            | `true`  | Allow collapsing the section (desktop only)     |
+| `initialExpanded`   | `boolean`                                            | `false` | Initial expand state (uncontrolled)             |
+| `expanded`          | `boolean`                                            | —       | Controlled expand state                         |
+| `onExpandChange`    | `(expanded: boolean) => void`                        | —       | Called when expand state changes (desktop only) |
+| `showDivider`       | `boolean`                                            | `true`  | Show header divider in desktop mode             |
+| `showMobileDivider` | `boolean`                                            | `true`  | Show divider in mobile mode                     |
+| `id`                | `string`                                             | —       | Unique identifier                               |
+| `className`         | `string`                                             | —       | Class selector                                  |
+| `data-testid`       | `string`                                             | —       | Test identifier                                 |
+
+### Filter.Page
+
+| Prop        | Type              | Description                          |
+| ----------- | ----------------- | ------------------------------------ |
+| `children`  | `React.ReactNode` | Page content — **required**          |
+| `onDismiss` | `() => void`      | Called when the back arrow is tapped |
+| `onDone`    | `() => void`      | Called when Done is tapped           |
+
+`Mode` is `"desktop" | "mobile"`.
+
+## Rules
+
+-   `Filter` is the recommended entry point — it automatically renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile.
+-   Always provide `onClear` to reset all filter state in a single handler.
+-   Set `collapsible={false}` on sort sections — sort options should always be visible.
+-   Pass children as a function `(mode) => ReactNode` to render different content on desktop vs mobile.
+-   `Filter.Modal` has a built-in Done button — do not add an external Apply button; use `onDone` to react to it.
+-   Add a keyword search input (`Form.Input`) above the `Filter` component — search is not built into `Filter`.
+-   Use `count` to show the number of active filters in the header.
+-   Use `Filter.Sidebar` or `Filter.Modal` directly only when overriding the responsive behaviour.
+-   `Filter.Page` is used inside `Filter.Modal` only, for drill-down sub-pages.
+
+## Anti-patterns
+
+-   Do not pass `viewport`, `showSearch`, or `searchText` — these props do not exist.
+-   Do not add an external Apply button when using `Filter.Modal` — the built-in Done button handles it.
+-   Do not use `Filter.Sidebar` and `Filter.Modal` separately unless you need to override responsive behaviour — use `Filter` instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/footer.md b/docs/skills/cc-flagship-ds/resources/v3/components/footer.md
new file mode 100644
index 0000000000..3454193946
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/footer.md
@@ -0,0 +1,95 @@
+# Footer
+
+Import: `import { Footer } from "@lifesg/react-design-system/footer"`
+
+## When to use
+
+Place at the bottom of every page. Required on all pages.
+
+## Variants
+
+| Variant                 | When to use                                                      |
+| ----------------------- | ---------------------------------------------------------------- |
+| `<Footer />` (no props) | Standard pages — disclaimer links and copyright are theme-driven |
+| `links`                 | Pages with navigational footer links (max 2 columns)             |
+| `copyrightInfo`         | Custom copyright text required                                   |
+| `layout="stretch"`      | Full-width layout — pair with `Navbar layout="stretch"`          |
+
+## Usage
+
+```tsx
+import { Footer } from "@lifesg/react-design-system/footer";
+
+{
+    /* Standard footer — no props required */
+}
+<Footer />;
+
+{
+    /* Footer with navigation links */
+}
+<Footer
+    links={[
+        [
+            { children: "About us", href: "/about" },
+            { children: "Contact", href: "/contact" },
+        ],
+    ]}
+    lastUpdated={new Date("2025-01-01")}
+/>;
+```
+
+## Props
+
+| Prop                | Type                                 | Default       | Description                                                                                   |
+| ------------------- | ------------------------------------ | ------------- | --------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`             | —             | Navigation links in the top section — array of columns                                        |
+| `children`          | `JSX.Element \| JSX.Element[]`       | —             | Custom content for the top section; overrides `links` and addons                              |
+| `showDownloadAddon` | `boolean`                            | —             | Show app store download buttons                                                               |
+| `showResourceAddon` | `boolean`                            | —             | Show theme-specific resource links; `showDownloadAddon` takes precedence when both are `true` |
+| `disclaimerLinks`   | `DisclaimerLinks`                    | —             | Override href/onClick for mandatory disclaimer links                                          |
+| `copyrightInfo`     | `string`                             | —             | Custom copyright text; overrides auto-generated text and makes `lastUpdated` irrelevant       |
+| `logoSrc`           | `string`                             | theme default | Logo image source                                                                             |
+| `logoAlt`           | `string`                             | `""`          | Logo image alt text                                                                           |
+| `lastUpdated`       | `Date`                               | —             | Date shown in "Last updated" text (ignored when `copyrightInfo` is set)                       |
+| `hideLogo`          | `boolean`                            | —             | Hide the logo; links align to the leftmost area                                               |
+| `layout`            | `"default" \| "stretch"`             | `"default"`   | Layout type — must match Navbar `layout`                                                      |
+| `onFooterLinkClick` | `(link: FooterLinkProps<T>) => void` | —             | Called when a footer link is clicked                                                          |
+| `id`                | `string`                             | —             | Unique identifier                                                                             |
+| `className`         | `string`                             | —             | Class selector                                                                                |
+| `data-testid`       | `string`                             | —             | Test identifier                                                                               |
+
+## FooterLinkProps\<T\>
+
+Inherits `TypographyLinkProps`, plus:
+
+| Prop           | Type     | Description                                 |
+| -------------- | -------- | ------------------------------------------- |
+| `data-options` | `T`      | Custom attributes passed to the link object |
+| `data-testid`  | `string` | Test identifier                             |
+
+## DisclaimerLinks
+
+| Prop                  | Type                  | Default    | Description                                                         |
+| --------------------- | --------------------- | ---------- | ------------------------------------------------------------------- |
+| `privacy`             | `TypographyLinkProps` | predefined | Privacy Statement link — text is fixed to "Privacy Statement"       |
+| `termsOfUse`          | `TypographyLinkProps` | predefined | Terms of Use link — text is fixed to "Terms of Use"                 |
+| `reportVulnerability` | `TypographyLinkProps` | predefined | Report Vulnerability link — text is fixed to "Report Vulnerability" |
+
+## Rules
+
+-   Use `<Footer />` with no props for standard pages — do not add unnecessary props.
+-   `layout` must match the Navbar `layout` prop; do not mix `"default"` and `"stretch"`.
+-   Wrap the app in a flex column layout so the footer stays pinned to the bottom on short pages:
+    -   Outer wrapper: `display: flex; flex-direction: column; min-height: 100vh`
+    -   Page content area: `flex: 1`
+-   Disclaimer link text cannot be customised — only `href` and event handlers can be overridden via `disclaimerLinks`.
+-   `copyrightInfo` overrides `lastUpdated` — do not set both.
+-   When `showDownloadAddon` and `showResourceAddon` are both `true`, download takes precedence.
+-   `links` is a 2D array: each inner array is one column of links.
+
+## Anti-patterns
+
+-   Do not omit the flex layout wrapper — the footer will not stick to the bottom on short pages.
+-   Do not pass `children` and `links` together — `children` replaces the top section entirely.
+-   Do not customise disclaimer link labels — they are legally fixed strings.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-date-input.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-date-input.md
new file mode 100644
index 0000000000..fd29e86f2d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-date-input.md
@@ -0,0 +1,85 @@
+# Form.DateInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a single date from the user (e.g. date of birth, appointment date, submission deadline).
+-   Any form field that requires calendar-based date selection.
+
+## Usage
+
+```tsx
+const StyledDateInput = styled(Form.DateInput)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper — `max-width` constrains the component without conflicting with its internal `width: 100%`.
+
+## Props
+
+| Prop                       | Type                                | Default         | Description                                                                      |
+| -------------------------- | ----------------------------------- | --------------- | -------------------------------------------------------------------------------- |
+| `value`                    | `string`                            | —               | Selected date in `YYYY-MM-DD` format                                             |
+| `disabled`                 | `boolean`                           | —               | Disables the component; entry not allowed                                        |
+| `readOnly`                 | `boolean`                           | —               | Read-only state; selection not allowed                                           |
+| `error`                    | `boolean`                           | —               | Sets error display (not needed if `errorMessage` is set)                         |
+| `id`                       | `string`                            | —               | Unique identifier of the component                                               |
+| `className`                | `string`                            | —               | Class selector of the component                                                  |
+| `data-testid`              | `string`                            | —               | Test identifier of the component                                                 |
+| `minDate`                  | `string`                            | —               | Minimum selectable date in `YYYY-MM-DD` format (inclusive)                       |
+| `maxDate`                  | `string`                            | —               | Maximum selectable date in `YYYY-MM-DD` format (inclusive)                       |
+| `disabledDates`            | `string[]`                          | —               | Specific dates to disable, each in `YYYY-MM-DD` format                           |
+| `allowDisabledSelection`   | `boolean`                           | —               | If true, dates disabled by `minDate`/`maxDate`/`disabledDates` remain selectable |
+| `hideInputKeyboard`        | `boolean`                           | —               | Hides the input keyboard when the field is focused                               |
+| `withButton`               | `boolean`                           | `true`          | Renders Done/Cancel action buttons                                               |
+| `zIndex`                   | `number`                            | `50`            | z-index of the calendar dropdown                                                 |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`            | `document.body` | Root element hosting the calendar dropdown                                       |
+| `onChange`                 | `(date: string) => void`            | —               | Called when a date is selected; returns `YYYY-MM-DD`                             |
+| `onBlur`                   | `() => void`                        | —               | Called on field defocus                                                          |
+| `onFocus`                  | `() => void`                        | —               | Called when field is focused                                                     |
+| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void` | —               | Called when the displayed month/year changes                                     |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                       |
+| ------- | -------- | --------------------------------- |
+| `year`  | `number` | Currently displayed year (`YYYY`) |
+| `month` | `number` | Currently displayed month (1–12)  |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## FormLabelProps
+
+| Prop       | Type                    | Default | Description                           |
+| ---------- | ----------------------- | ------- | ------------------------------------- |
+| `addon`    | `FormLabelAddonProps`   | —       | Tooltip or popover addon on the label |
+| `subtitle` | `string \| JSX.Element` | —       | Subtitle text for the label           |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `YYYY-MM-DD` string.
+-   Use `minDate`/`maxDate` to constrain selectable dates to valid business ranges.
+-   Use `disabledDates` for known blackout dates (e.g. public holidays).
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
+-   Use `readOnly` on review or summary screens where the value should be visible but not editable.
+-   Specify `dropdownRootNode` if the component is inside a scrollable container to prevent the calendar from clipping.
+-   Date strings use `YYYY-MM-DD` format throughout (value, minDate, maxDate, disabledDates, onChange return).
+
+## Anti-patterns
+
+-   Do not use a plain text input for date collection — the picker enforces valid date formats automatically.
+-   Do not set `allowDisabledSelection` unless there is a specific UX reason to allow out-of-range dates.
+-   Do not rely on `error` prop alone without an `errorMessage`; users need descriptive feedback.
+-   Do not use for date-range selection — use `Form.DateRangeInput` instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-date-range-input.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-date-range-input.md
new file mode 100644
index 0000000000..86d8541bef
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-date-range-input.md
@@ -0,0 +1,139 @@
+# Form.DateRangeInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a start and end date from the user (e.g. leave period, booking period, date range filter).
+-   Use `variant="week"` when the selection must always be a full calendar week.
+-   Use `variant="fixed-range"` when the duration is predetermined (e.g. always 7 days).
+
+## Usage
+
+`onChange` always receives both start and end as `YYYY-MM-DD` strings, even for week and fixed-range variants.
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const LeavePeriodField = () => {
+    const [start, setStart] = useState("");
+    const [end, setEnd] = useState("");
+
+    return (
+        <Form.DateRangeInput
+            label="Leave period"
+            value={start}
+            valueEnd={end}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            onChange={(s, e) => {
+                setStart(s);
+                setEnd(e);
+            }}
+        />
+    );
+};
+```
+
+```tsx
+{
+    /* variant="week" — whole-week selection */
+}
+<Form.DateRangeInput
+    label="Select week"
+    variant="week"
+    value={start}
+    valueEnd={end}
+    onChange={(s, e) => {
+        setStart(s);
+        setEnd(e);
+    }}
+/>;
+
+{
+    /* variant="fixed-range" — valueEnd derived automatically; only store start */
+}
+<Form.DateRangeInput
+    label="14-day quarantine period"
+    variant="fixed-range"
+    numberOfDays={14}
+    value={start}
+    valueEnd={end}
+    onChange={(s, e) => {
+        setStart(s);
+        setEnd(e);
+    }}
+/>;
+```
+
+Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper:
+
+```tsx
+const StyledDateRangeInput = styled(Form.DateRangeInput)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+## Props
+
+| Prop                       | Type                                           | Default         | Description                                                                      |
+| -------------------------- | ---------------------------------------------- | --------------- | -------------------------------------------------------------------------------- |
+| `value`                    | `string`                                       | —               | Start date in `YYYY-MM-DD` format                                                |
+| `valueEnd`                 | `string`                                       | —               | End date in `YYYY-MM-DD` format (range/fixed-range only)                         |
+| `variant`                  | `"range" \| "week" \| "fixed-range"`           | `"range"`       | Selection type                                                                   |
+| `numberOfDays`             | `number`                                       | `7`             | Days to select when `variant="fixed-range"`                                      |
+| `disabled`                 | `boolean`                                      | —               | Disables the component; entry not allowed                                        |
+| `readOnly`                 | `boolean`                                      | —               | Read-only state; selection not allowed                                           |
+| `error`                    | `boolean`                                      | —               | Sets error display (not needed if `errorMessage` is set)                         |
+| `id`                       | `string`                                       | —               | Unique identifier of the component                                               |
+| `className`                | `string`                                       | —               | Class selector of the component                                                  |
+| `data-testid`              | `string`                                       | —               | Test identifier of the component                                                 |
+| `minDate`                  | `string`                                       | —               | Minimum selectable date in `YYYY-MM-DD` format (inclusive)                       |
+| `maxDate`                  | `string`                                       | —               | Maximum selectable date in `YYYY-MM-DD` format (inclusive)                       |
+| `disabledDates`            | `string[]`                                     | —               | Specific dates to disable, each in `YYYY-MM-DD` format                           |
+| `allowDisabledSelection`   | `boolean`                                      | —               | If true, dates disabled by `minDate`/`maxDate`/`disabledDates` remain selectable |
+| `hideInputKeyboard`        | `boolean`                                      | —               | Hides the input keyboard when the field is focused                               |
+| `withButton`               | `boolean`                                      | `true`          | Renders Done/Cancel action buttons                                               |
+| `zIndex`                   | `number`                                       | `50`            | z-index of the calendar dropdown                                                 |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                       | `document.body` | Root element hosting the calendar dropdown                                       |
+| `onChange`                 | `(startDate: string, endDate: string) => void` | —               | Called when a selection is made; returns start and end dates in `YYYY-MM-DD`     |
+| `onBlur`                   | `() => void`                                   | —               | Called on field defocus                                                          |
+| `onFocus`                  | `() => void`                                   | —               | Called when field is focused                                                     |
+| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void`            | —               | Called when displayed month/year changes                                         |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                       |
+| ------- | -------- | --------------------------------- |
+| `year`  | `number` | Currently displayed year (`YYYY`) |
+| `month` | `number` | Currently displayed month (1–12)  |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` (start) and `valueEnd` (end) for controlled usage; `onChange` receives both as `YYYY-MM-DD` strings.
+-   Use `minDate`/`maxDate` to restrict selection to valid business date ranges.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
+-   Use `readOnly` on review screens where the range should be visible but not editable.
+-   Specify `dropdownRootNode` if the component is inside a scrollable container.
+-   `valueEnd` is only relevant for `variant="range"` and `variant="fixed-range"`.
+-   `numberOfDays` only applies when `variant="fixed-range"`.
+
+## Anti-patterns
+
+-   Do not use for single-date selection — use `Form.DateInput` instead.
+-   Do not set `numberOfDays` unless `variant="fixed-range"` is also set.
+-   Do not rely on `error` alone without an `errorMessage`.
+-   Do not allow end date before start date — validate in `onChange` before updating state.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-e-signature.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-e-signature.md
new file mode 100644
index 0000000000..436e42c585
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-e-signature.md
@@ -0,0 +1,46 @@
+# Form.ESignature
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Forms that legally require a handwritten signature from the user (e.g. consent forms, declarations, agreements).
+-   Use `description` to guide the user on how to sign (e.g. "Sign within the box using your mouse or touchscreen").
+
+## Props
+
+| Prop              | Type                              | Default          | Description                                                                            |
+| ----------------- | --------------------------------- | ---------------- | -------------------------------------------------------------------------------------- |
+| `value`           | `string`                          | —                | Pre-filled signature as a base64-encoded PNG data URL                                  |
+| `description`     | `string`                          | —                | Helper text displayed below the signature canvas                                       |
+| `disabled`        | `boolean`                         | —                | Disables the signature canvas                                                          |
+| `loadingProgress` | `number`                          | —                | Upload progress between 0 and 1; shows a progress indicator                            |
+| `loadingLabel`    | `string`                          | `"Uploading..."` | Text above the progress indicator (requires `loadingProgress`)                         |
+| `id`              | `string`                          | —                | Unique identifier of the component                                                     |
+| `className`       | `string`                          | —                | Class selector of the component                                                        |
+| `data-testid`     | `string`                          | —                | Test identifier of the component                                                       |
+| `onChange`        | `(value: string \| null) => void` | —                | Called when the signature changes; returns base64 PNG data URL, or `null` when cleared |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; the value is a base64-encoded PNG string.
+-   Use `loadingProgress` and `loadingLabel` to indicate server upload progress after the signature is submitted.
+-   Set `errorMessage` when signature validation fails (e.g. canvas is empty on submit).
+-   Use `disabled` when the signature field should be locked (e.g. after submission or in a locked step).
+-   `value` and the `onChange` return value are both base64-encoded PNG strings.
+-   `loadingProgress` and `loadingLabel` are used to show upload progress after the signature is captured.
+
+## Anti-patterns
+
+-   Do not use for typed signatures or checkbox confirmations — this component is for handwritten drawing input only.
+-   Do not store the raw base64 string in a URL parameter or cookie — it is large; use server-side storage.
+-   Do not omit `description` — users need guidance on where and how to draw their signature.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-input.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-input.md
new file mode 100644
index 0000000000..4a1eaedb9e
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-input.md
@@ -0,0 +1,88 @@
+# Form.Input
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use for any single-line text entry inside a form. Always prefer `Form.Input` over the bare `Input` component when a label or error message is required.
+
+## Variants
+
+| `styleType`            | When to use                                                                                 |
+| ---------------------- | ------------------------------------------------------------------------------------------- |
+| `"bordered"` (default) | Standard form fields — provides clear affordance                                            |
+| `"no-border"`          | Inline editing or contexts where a surrounding container already provides visual separation |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+<Form.Input
+    label="Full name"
+    placeholder="Enter your name"
+    value={value}
+    onChange={(e) => {}}
+/>;
+```
+
+## Props
+
+### Input specific props
+
+| Prop          | Type                          | Default      | Description                                                         |
+| ------------- | ----------------------------- | ------------ | ------------------------------------------------------------------- |
+| `spacing`     | `number`                      | —            | Number of characters before a space is inserted — `type="tel"` only |
+| `error`       | `boolean`                     | —            | Show error styling — not needed if `errorMessage` is set            |
+| `allowClear`  | `boolean`                     | `false`      | Show clear icon button inside the field                             |
+| `onClear`     | `() => void`                  | —            | Called when clear icon is clicked                                   |
+| `styleType`   | `"no-border"` \| `"bordered"` | `"bordered"` | Border style variant                                                |
+| `data-testid` | `string`                      | —            | Test identifier for the component                                   |
+
+Also inherits all props from `HTMLInputElement`.
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+### FormLabelProps
+
+| Prop       | Type                      | Default | Description                              |
+| ---------- | ------------------------- | ------- | ---------------------------------------- |
+| `addon`    | `FormLabelAddonProps`     | —       | Tooltip or popover attached to the label |
+| `disabled` | `string`                  | —       | Greyed-out label state                   |
+| `subtitle` | `string` \| `JSX.Element` | —       | Secondary text beneath the main label    |
+
+### FormLabelAddonProps
+
+| Prop          | Type                       | Default               | Description                                               |
+| ------------- | -------------------------- | --------------------- | --------------------------------------------------------- |
+| `content`     | `string` \| `JSX.Element`  | —                     | **Required.** Content shown in the tooltip/popover bubble |
+| `type`        | `"tooltip"` \| `"popover"` | `"popover"`           | Addon display type                                        |
+| `icon`        | `JSX.Element`              | `<ICircleFillIcon />` | Icon used for the addon trigger                           |
+| `id`          | `string`                   | —                     | Unique identifier for the addon                           |
+| `zIndex`      | `number`                   | —                     | Custom z-index for the popover                            |
+| `data-testid` | `string`                   | —                     | Test identifier for the addon                             |
+
+## Rules
+
+-   Set `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
+-   Use `readOnly` on review or summary screens — not `disabled`. Disabled implies interaction is unavailable; read-only implies the field is intentionally non-editable in context.
+-   Use `allowClear` for optional fields and search-like inputs; pair with `onClear` to reset controlled value.
+-   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
+-   Provide `errorMessage` rather than `error` alone — the string drives both the visual state and the accessible error text.
+-   Use `label` as a plain string for simple labels; use `FormLabelProps` (with `subtitle` or `addon`) only when additional context is needed.
+-   `error` is redundant when `errorMessage` is provided — `errorMessage` implies the error state automatically.
+-   `spacing` only has effect when `type="tel"`.
+-   `styleType="no-border"` removes the visible border — use only in contexts with a background that provides visual separation.
+
+## Anti-patterns
+
+-   Do not use `disabled` on review screens — use `readOnly`.
+-   Do not set both `error` and `errorMessage` — `errorMessage` is sufficient.
+-   Do not use `spacing` with input types other than `"tel"`.
+-   Do not use `styleType="no-border"` in a form context without a containing element that visually distinguishes the field.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-masked-input.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-masked-input.md
new file mode 100644
index 0000000000..4f863977e3
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-masked-input.md
@@ -0,0 +1,55 @@
+# Form.MaskedInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Displaying sensitive data that should be partially hidden by default with a user-controlled reveal toggle (e.g. NRIC, FIN, passport number, bank account number).
+-   Read-only fields that are loaded asynchronously and should show a loading / error state.
+
+## Props
+
+Inherits all props from `Form.Input`. Additional props:
+
+| Prop                | Type                               | Default            | Description                                                                                    |
+| ------------------- | ---------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------- |
+| `maskRange`         | `number[]`                         | —                  | `[startIndex, endIndex]` — character index range to mask                                       |
+| `unmaskRange`       | `number[]`                         | —                  | `[startIndex, endIndex]` — character index range to NOT mask                                   |
+| `maskRegex`         | `RegExp`                           | —                  | Regex matched characters are replaced with `maskChar`                                          |
+| `maskTransformer`   | `(value: string) => string`        | —                  | Custom function to transform the masked value                                                  |
+| `maskChar`          | `string`                           | `"•"`              | Character used for masking                                                                     |
+| `iconMask`          | `string`                           | `<EyeSlashIcon />` | Icon shown when the field is masked                                                            |
+| `iconUnmask`        | `string`                           | `<EyeIcon />`      | Icon shown when the field is unmasked                                                          |
+| `iconActiveColor`   | `string`                           | `Color.Primary`    | Color of the mask icon in active state                                                         |
+| `iconInactiveColor` | `string`                           | `Color.Neutral[3]` | Color of the mask icon in inactive state                                                       |
+| `transformInput`    | `"uppercase" \| "lowercase"`       | —                  | Auto-transforms input casing                                                                   |
+| `loadState`         | `"loading" \| "fail" \| "success"` | —                  | Async load state — only applies in `readOnly` mode                                             |
+| `onMask`            | `() => void`                       | —                  | Called when the field becomes masked                                                           |
+| `onUnmask`          | `() => void`                       | —                  | Called when the field becomes unmasked                                                         |
+| `onTryAgain`        | `() => void`                       | —                  | Called when the "Try again" button is clicked in `loadState="fail"` mode (requires `readOnly`) |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Choose one masking strategy per instance: `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer`.
+-   Use `maskRange` for fixed-position sensitive segments (e.g. `[1, 4]` for NRIC middle characters).
+-   Use `maskRegex` when the characters to mask follow a pattern rather than a fixed range.
+-   Use `transformInput="uppercase"` for identifiers that are conventionally uppercase (e.g. NRIC, passport).
+-   Use `loadState` only when `readOnly` is also `true` — for fields that are fetched asynchronously.
+-   Provide `onTryAgain` when `loadState="fail"` so users can retry the fetch.
+-   `loadState` only takes effect when `readOnly` is also `true`.
+-   Provide only one of `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer` per instance.
+
+## Anti-patterns
+
+-   Do not use for non-sensitive fields — masking adds friction and should be reserved for data that genuinely requires it.
+-   Do not set `loadState` without `readOnly` — it has no effect in editable mode.
+-   Do not combine multiple masking strategies (`maskRange` + `maskRegex`) on the same instance.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-multi-select.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-multi-select.md
new file mode 100644
index 0000000000..d8cfb1d42f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-multi-select.md
@@ -0,0 +1,112 @@
+# Form.MultiSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users can select more than one option from a predefined list. For single selections use `Form.Select`. For hierarchical options use `Form.NestedMultiSelect`.
+
+## Variants
+
+| `variant`   | When to use                                              |
+| ----------- | -------------------------------------------------------- |
+| `"default"` | Standard form context                                    |
+| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+const options = [
+    { value: "doc", label: "Document" },
+    { value: "img", label: "Image" },
+    { value: "pdf", label: "PDF" },
+];
+
+<Form.MultiSelect
+    label="File types"
+    options={options}
+    selectedOptions={selected}
+    valueExtractor={(opt) => opt.value}
+    listExtractor={(opt) => opt.label}
+    displayValueExtractor={(opt) => opt.label}
+    onSelectOptions={(opts) => {}}
+/>;
+```
+
+## Props
+
+### MultiSelect specific props
+
+| Prop                    | Type                                     | Default         | Description                                                              |
+| ----------------------- | ---------------------------------------- | --------------- | ------------------------------------------------------------------------ |
+| `options`               | `T[]`                                    | —               | **Required.** List of option objects                                     |
+| `selectedOptions`       | `T[]`                                    | —               | Controlled array of selected options                                     |
+| `valueExtractor`        | `(option: T) => V`                       | —               | Derives the value from an option                                         |
+| `listExtractor`         | `(option: T) => string`                  | —               | Derives the display text for dropdown list items                         |
+| `displayValueExtractor` | `(option: T) => string`                  | —               | Derives the display text shown in the selector when options are selected |
+| `name`                  | `string`                                 | —               | Name attribute of the component                                          |
+| `placeholder`           | `string`                                 | `"Select"`      | Placeholder text                                                         |
+| `disabled`              | `boolean`                                | —               | Disables selection                                                       |
+| `error`                 | `boolean`                                | —               | Show error styling — not needed if `errorMessage` is set                 |
+| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"` | `"success"`     | Visual state for async option loading                                    |
+| `optionTruncationType`  | `"end"` \| `"middle"`                    | `"end"`         | Truncation style for long option text                                    |
+| `enableSearch`          | `boolean`                                | `false`         | Enable text-based search in the dropdown                                 |
+| `searchFunction`        | `(searchValue: string) => T[]`           | —               | Custom search function                                                   |
+| `maxSelectable`         | `number`                                 | —               | Maximum number of options that can be selected                           |
+| `onSelectOptions`       | `(options: T[]) => void`                 | —               | Called when selection changes, or Select all / Unselect all is clicked   |
+| `onShowOptions`         | `() => void`                             | —               | Called when the dropdown opens                                           |
+| `onHideOptions`         | `() => void`                             | —               | Called when the dropdown closes                                          |
+| `onRetry`               | `() => void`                             | —               | Called when retry is clicked after a failed load                         |
+| `onSearch`              | `() => void`                             | —               | Called when a search is executed                                         |
+| `hideNoResultsDisplay`  | `boolean`                                | —               | Suppress the default no-results UI                                       |
+| `customLabels`          | `DropdownCustomLabelProps`               | —               | Override default dropdown label strings                                  |
+| `variant`               | `"default"` \| `"small"`                 | `"default"`     | Size variant                                                             |
+| `alignment`             | `"left"` \| `"right"`                    | `"left"`        | Dropdown alignment relative to the trigger                               |
+| `dropdownZIndex`        | `number`                                 | `50`            | Custom z-index for the dropdown                                          |
+| `dropdownWidth`         | `string`                                 | —               | Fixed width for the dropdown                                             |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                 | `document.body` | Root element that hosts the dropdown                                     |
+| `data-testid`           | `string`                                 | —               | Test identifier for the component                                        |
+
+### DropdownCustomLabelProps
+
+| Prop                   | Type                    | Description                                                        |
+| ---------------------- | ----------------------- | ------------------------------------------------------------------ |
+| `searchPlaceholder`    | `string`                | Placeholder for the search field                                   |
+| `noResultsLabel`       | `string`                | Replaces the default no-results label                              |
+| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label                      |
+| `selectAllButtonLabel` | `string`                | Label for the Select all button                                    |
+| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                                     |
+| `allSelectedLabel`     | `string`                | Label shown when all options are selected                          |
+| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected (e.g. "X selected") |
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
+
+## Rules
+
+-   Always provide `options` — the component has no meaning without it.
+-   Provide `valueExtractor` and `listExtractor` for typed option arrays — treat as required.
+-   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing raw values instead of labels in the closed selector.
+-   Use `maxSelectable` when there is a business rule limiting how many options can be chosen; the component enforces it automatically.
+-   Use `enableSearch` when the list exceeds ~10 items.
+-   Provide `customLabels` to localise or contextualise "Select all", "Clear all", and count labels.
+-   Use `optionsLoadState` to communicate async loading states.
+-   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
+-   `onSelectOptions` receives the complete updated selection array — not a delta.
+-   Unlike `Form.Select`, there is no `readOnly` prop — use `disabled` for non-editable states.
+
+## Anti-patterns
+
+-   Do not use `Form.MultiSelect` when only one option can be selected — use `Form.Select`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
+-   Do not set both `error` and `errorMessage`.
+-   Do not manage selection capping manually in `onSelectOptions` — use `maxSelectable` instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-nested-multi-select.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-nested-multi-select.md
new file mode 100644
index 0000000000..7c83b83154
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-nested-multi-select.md
@@ -0,0 +1,173 @@
+# Form.NestedMultiSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users can select multiple options from a hierarchically organised list of up to 3 levels. For hierarchical single-select use `Form.NestedSelect`. For flat multi-select use `Form.MultiSelect`.
+
+## Variants
+
+| `variant`   | When to use           |
+| ----------- | --------------------- |
+| `"default"` | Standard form context |
+| `"small"`   | Compact layouts       |
+
+| `mode`       | When to use                                                                              |
+| ------------ | ---------------------------------------------------------------------------------------- |
+| `"default"`  | System decides initial expand state                                                      |
+| `"expand"`   | Expand all categories on open — for short, browsable lists                               |
+| `"collapse"` | Collapse all categories on open — for long lists where search is the primary interaction |
+
+## Usage
+
+### Multi-select with parallel keyPaths / values arrays
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
+
+interface SkillValue {
+    id: string;
+    name: string;
+}
+
+const options: L1OptionProps<SkillValue, SkillValue, SkillValue>[] = [
+    {
+        key: "design",
+        label: "Design",
+        subItems: [
+            {
+                key: "design-ux",
+                label: "UX Design",
+                value: { id: "ux", name: "UX Design" },
+            },
+            {
+                key: "design-ui",
+                label: "UI Design",
+                value: { id: "ui", name: "UI Design" },
+            },
+        ],
+    },
+    {
+        key: "engineering",
+        label: "Engineering",
+        subItems: [
+            {
+                key: "eng-fe",
+                label: "Frontend",
+                value: { id: "fe", name: "Frontend" },
+            },
+            {
+                key: "eng-be",
+                label: "Backend",
+                value: { id: "be", name: "Backend" },
+            },
+        ],
+    },
+];
+
+const NestedMultiSelectExample = () => {
+    // keyPaths[i] and values[i] always refer to the same selection — keep them in sync
+    const [keyPaths, setKeyPaths] = useState<string[][]>([
+        ["design", "design-ux"], // pre-selected: UX Design
+    ]);
+    const [values, setValues] = useState<SkillValue[]>([
+        { id: "ux", name: "UX Design" },
+    ]);
+
+    return (
+        <Form.NestedMultiSelect<SkillValue, SkillValue, SkillValue>
+            label="Skills"
+            options={options}
+            selectedKeyPaths={keyPaths}
+            // onSelectOptions provides the NEXT full selection state — replace, don't merge
+            onSelectOptions={(nextKeyPaths, nextValues) => {
+                setKeyPaths(nextKeyPaths);
+                setValues(nextValues as SkillValue[]);
+            }}
+            valueToStringFunction={(val) => val.name}
+            enableSearch
+        />
+    );
+};
+```
+
+**The parallel-array contract:** index `i` in `keyPaths` and index `i` in `values` always describe the same selected item. `onSelectOptions` delivers the complete next state — replace both arrays together, never splice one independently. Initialise both arrays with matching entries when pre-populating selections.
+
+## Props
+
+### NestedMultiSelect specific props
+
+| Prop                    | Type                                                            | Default         | Description                                                                                                            |
+| ----------------------- | --------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `options`               | `L1OptionProps<V1, V2, V3>[]`                                   | —               | **Required.** Nested option array (up to 3 levels)                                                                     |
+| `selectedKeyPaths`      | `string[][]`                                                    | —               | Array of key paths for all selected options                                                                            |
+| `placeholder`           | `string`                                                        | `"Select"`      | Placeholder text                                                                                                       |
+| `disabled`              | `boolean`                                                       | —               | Disables selection                                                                                                     |
+| `readOnly`              | `boolean`                                                       | —               | Read-only state — selection not allowed                                                                                |
+| `error`                 | `boolean`                                                       | —               | Show error styling — not needed if `errorMessage` is set                                                               |
+| `mode`                  | `"default"` \| `"expand"` \| `"collapse"`                       | `"default"`     | Initial expand/collapse state of categories when the dropdown opens                                                    |
+| `valueToStringFunction` | `(value: V1 \| V2 \| V3) => string`                             | —               | Converts values to display strings. Single function used for all levels — assumes values are homogeneous across levels |
+| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"`                        | `"success"`     | Visual state for async option loading                                                                                  |
+| `optionTruncationType`  | `"end"` \| `"middle"`                                           | `"end"`         | Truncation style for long option text                                                                                  |
+| `enableSearch`          | `boolean`                                                       | `false`         | Enable text-based search in the dropdown                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                       | `false`         | Suppress the default no-results UI                                                                                     |
+| `customLabels`          | `DropdownCustomLabelProps`                                      | —               | Override default dropdown label strings                                                                                |
+| `onSelectOptions`       | `(keyPaths: string[][], values: Array<V1 \| V2 \| V3>) => void` | —               | Called when selections change                                                                                          |
+| `onShowOptions`         | `() => void`                                                    | —               | Called when the dropdown opens                                                                                         |
+| `onHideOptions`         | `() => void`                                                    | —               | Called when the dropdown closes                                                                                        |
+| `onRetry`               | `() => void`                                                    | —               | Called when retry is clicked after a failed load                                                                       |
+| `onSearch`              | `() => void`                                                    | —               | Called when a search is executed                                                                                       |
+| `onBlur`                | `() => void`                                                    | —               | Called when the field loses focus                                                                                      |
+| `variant`               | `"default"` \| `"small"`                                        | `"default"`     | Size variant                                                                                                           |
+| `alignment`             | `"left"` \| `"right"`                                           | `"left"`        | Dropdown alignment relative to the trigger                                                                             |
+| `dropdownZIndex`        | `number`                                                        | `50`            | Custom z-index for the dropdown                                                                                        |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                        | `document.body` | Root element that hosts the dropdown                                                                                   |
+| `dropdownWidth`         | `string`                                                        | —               | Fixed width for the dropdown                                                                                           |
+| `className`             | `string`                                                        | —               | Class selector for the component                                                                                       |
+| `data-testid`           | `string`                                                        | —               | Test identifier for the component                                                                                      |
+
+### DropdownCustomLabelProps
+
+| Prop                   | Type                    | Description                                    |
+| ---------------------- | ----------------------- | ---------------------------------------------- |
+| `searchPlaceholder`    | `string`                | Placeholder for the search field               |
+| `noResultsLabel`       | `string`                | Replaces the default no-results label          |
+| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label  |
+| `selectAllButtonLabel` | `string`                | Label for the Select all button                |
+| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                 |
+| `allSelectedLabel`     | `string`                | Label shown when all options are selected      |
+| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected |
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
+
+## Rules
+
+-   Every option node must have a unique `key` string — key paths are used for controlled state.
+-   Provide `valueToStringFunction` when values are not plain strings. The same function is applied to values at all nesting levels — ensure values are homogeneous across levels, or that the function handles all types.
+-   Use `enableSearch` when the total option count across all levels is large.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Provide `customLabels` to localise "Select all", "Clear all", and count labels.
+-   `options` is the only mandatory component-specific prop.
+-   Options follow the same nested structure as `Form.NestedSelect`: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
+-   `selectedKeyPaths` is an array of key-path arrays — one per selected item.
+-   `onSelectOptions` receives the complete updated `keyPaths` and `values` arrays on every change.
+-   `valueToStringFunction` uses a single callback for all nesting levels — values across levels must be the same type or handled uniformly.
+
+## Anti-patterns
+
+-   Do not use `Form.NestedMultiSelect` for flat option lists — use `Form.MultiSelect`.
+-   Do not use when only one option can be selected — use `Form.NestedSelect`.
+-   Do not use duplicate `key` values across options — selection state will break.
+-   Do not set both `error` and `errorMessage`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-nested-select.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-nested-select.md
new file mode 100644
index 0000000000..e36a12a655
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-nested-select.md
@@ -0,0 +1,165 @@
+# Form.NestedSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when options are organised in a hierarchy of up to 3 levels — e.g. industry → sector → role, or country → state → city. For flat single-select use `Form.Select`. For hierarchical multi-select use `Form.NestedMultiSelect`.
+
+## Variants
+
+| `variant`   | When to use           |
+| ----------- | --------------------- |
+| `"default"` | Standard form context |
+| `"small"`   | Compact layouts       |
+
+| `mode`       | When to use                                                                            |
+| ------------ | -------------------------------------------------------------------------------------- |
+| `"default"`  | System decides initial expand state based on selected path                             |
+| `"expand"`   | Expand all categories on open — useful when the list is short and browsing is expected |
+| `"collapse"` | Collapse all categories on open — useful for long lists where search is primary        |
+
+## Usage
+
+### Three-level hierarchy with controlled keyPath
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
+
+interface RoleValue {
+    id: string;
+    label: string;
+}
+
+const options: L1OptionProps<RoleValue, RoleValue, RoleValue>[] = [
+    {
+        key: "engineering",
+        label: "Engineering",
+        subItems: [
+            {
+                key: "engineering-frontend",
+                label: "Frontend",
+                subItems: [
+                    {
+                        key: "engineering-frontend-react",
+                        label: "React Developer",
+                        value: { id: "fe-react", label: "React Developer" },
+                    },
+                    {
+                        key: "engineering-frontend-vue",
+                        label: "Vue Developer",
+                        value: { id: "fe-vue", label: "Vue Developer" },
+                    },
+                ],
+            },
+            {
+                key: "engineering-backend",
+                label: "Backend",
+                value: { id: "be", label: "Backend Developer" },
+            },
+        ],
+    },
+];
+
+const NestedSelectExample = () => {
+    // keyPath is the path of keys from root to selected node
+    const [keyPath, setKeyPath] = useState<string[]>([]);
+    const [value, setValue] = useState<RoleValue | undefined>();
+
+    return (
+        <Form.NestedSelect<RoleValue, RoleValue, RoleValue>
+            label="Job role"
+            options={options}
+            selectedKeyPath={keyPath}
+            // onChange receives the full key path and the node's value
+            onChange={(path, val) => {
+                setKeyPath(path);
+                setValue(val);
+            }}
+            valueToStringFunction={(val) => val.label}
+            selectableCategory // intermediate nodes (e.g. "Backend") are also selectable
+            enableSearch
+        />
+    );
+};
+```
+
+**keyPath explains the selection:** `["engineering", "engineering-frontend", "engineering-frontend-react"]` means the user drilled through Engineering → Frontend → React Developer. An empty array means nothing is selected.
+
+## Props
+
+### NestedSelect specific props
+
+| Prop                    | Type                                                 | Default         | Description                                                         |
+| ----------------------- | ---------------------------------------------------- | --------------- | ------------------------------------------------------------------- |
+| `options`               | `L1OptionProps<V1, V2, V3>[]`                        | —               | **Required.** Nested option array (up to 3 levels)                  |
+| `selectedKeyPath`       | `string[]`                                           | —               | Key path of the selected option (e.g. `["1", "1-2"]`)               |
+| `placeholder`           | `string`                                             | `"Select"`      | Placeholder text                                                    |
+| `disabled`              | `boolean`                                            | —               | Disables selection                                                  |
+| `readOnly`              | `boolean`                                            | —               | Read-only state — selection not allowed                             |
+| `error`                 | `boolean`                                            | —               | Show error styling — not needed if `errorMessage` is set            |
+| `mode`                  | `"default"` \| `"expand"` \| `"collapse"`            | `"default"`     | Initial expand/collapse state of categories when the dropdown opens |
+| `valueToStringFunction` | `(value: V1 \| V2 \| V3) => string`                  | —               | Converts the selected value to a display string                     |
+| `selectableCategory`    | `boolean`                                            | —               | Allow selecting a parent category node directly                     |
+| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"`             | `"success"`     | Visual state for async option loading                               |
+| `optionTruncationType`  | `"end"` \| `"middle"`                                | `"end"`         | Truncation style for long option text                               |
+| `enableSearch`          | `boolean`                                            | —               | Enable text-based search in the dropdown                            |
+| `customLabels`          | `DropdownCustomLabelProps`                           | —               | Override default dropdown label strings                             |
+| `hideNoResultsDisplay`  | `boolean`                                            | —               | Suppress the default no-results UI                                  |
+| `onSelectOption`        | `(keyPath: string[], value: V1 \| V2 \| V3) => void` | —               | Called when an option is selected                                   |
+| `onShowOptions`         | `() => void`                                         | —               | Called when the dropdown opens                                      |
+| `onHideOptions`         | `() => void`                                         | —               | Called when the dropdown closes                                     |
+| `onRetry`               | `() => void`                                         | —               | Called when retry is clicked after a failed load                    |
+| `onSearch`              | `() => void`                                         | —               | Called when a search is executed                                    |
+| `onBlur`                | `() => void`                                         | —               | Called when the field loses focus                                   |
+| `variant`               | `"default"` \| `"small"`                             | `"default"`     | Size variant                                                        |
+| `alignment`             | `"left"` \| `"right"`                                | `"left"`        | Dropdown alignment relative to the trigger                          |
+| `dropdownZIndex`        | `number`                                             | `50`            | Custom z-index for the dropdown                                     |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                             | `document.body` | Root element that hosts the dropdown                                |
+| `dropdownWidth`         | `string`                                             | —               | Fixed width for the dropdown                                        |
+| `className`             | `string`                                             | —               | Class selector for the component                                    |
+| `data-testid`           | `string`                                             | —               | Test identifier for the component                                   |
+
+### DropdownCustomLabelProps
+
+| Prop                   | Type                    | Description                                    |
+| ---------------------- | ----------------------- | ---------------------------------------------- |
+| `searchPlaceholder`    | `string`                | Placeholder for the search field               |
+| `noResultsLabel`       | `string`                | Replaces the default no-results label          |
+| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label  |
+| `selectAllButtonLabel` | `string`                | Label for the Select all button                |
+| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                 |
+| `allSelectedLabel`     | `string`                | Label shown when all options are selected      |
+| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected |
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
+
+## Rules
+
+-   Every option node must have a unique `key` string — the key path is used for controlled state.
+-   Provide `valueToStringFunction` when values are not plain strings and the selected display needs to be derived from the value.
+-   Enable `selectableCategory` only when selecting a parent category is a valid business outcome — otherwise category nodes serve as navigational groupings only.
+-   Use `enableSearch` when the total option count across all levels is large.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
+-   `options` is the only mandatory component-specific prop.
+-   Options follow a nested structure: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
+-   `selectedKeyPath` is an array of keys tracing the path to the selected leaf (e.g. `["parent-key", "child-key"]`).
+-   `selectableCategory` enables selection of non-leaf (parent category) nodes.
+
+## Anti-patterns
+
+-   Do not use `Form.NestedSelect` for flat option lists — use `Form.Select`.
+-   Do not use when multiple selections are needed — use `Form.NestedMultiSelect`.
+-   Do not use duplicate `key` values across options — selection state will break.
+-   Do not set both `error` and `errorMessage`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-otp-verification.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-otp-verification.md
new file mode 100644
index 0000000000..6fd2e5f9c5
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-otp-verification.md
@@ -0,0 +1,164 @@
+# Form.OtpVerification
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Flows that require identity verification via a one-time password sent to a phone number or email address.
+-   The component manages the full multi-step UI: input contact → send OTP → enter OTP → verify.
+
+## Usage
+
+### Email variant
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
+
+const EmailOtpExample = () => {
+    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
+    const [email, setEmail] = useState("");
+
+    return (
+        <Form.OtpVerification
+            label="Verify your email"
+            type="email"
+            emailValue={email}
+            onEmailChange={setEmail}
+            otpState={otpState}
+            onOtpStateChange={setOtpState}
+            onSendOtp={async () => {
+                // Throw to surface the error inline — do NOT return an error string
+                const res = await api.sendEmailOtp(email);
+                if (!res.ok) throw new Error("Invalid email address");
+            }}
+            onVerifyOtp={async (otpInput) => {
+                const res = await api.verifyOtp(otpInput);
+                if (!res.ok)
+                    throw new Error("Incorrect OTP. Please try again.");
+            }}
+            onResendOtp={async () => {
+                const res = await api.sendEmailOtp(email);
+                if (!res.ok) throw new Error("Could not resend OTP");
+            }}
+            verifyOtpCountdownTimer={300}
+        />
+    );
+};
+```
+
+### Phone variant (`fixedCountry` required)
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
+import { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input";
+
+const PhoneOtpExample = () => {
+    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
+    const [phone, setPhone] = useState<PhoneNumberInputValue>({ number: "" });
+
+    return (
+        <Form.OtpVerification
+            label="Verify your mobile number"
+            type="phone-number"
+            phoneNumberValue={phone}
+            onPhoneNumberChange={setPhone}
+            fixedCountry // required when type="phone-number"; hides country selector
+            otpState={otpState}
+            onOtpStateChange={setOtpState}
+            onSendOtp={async () => {
+                const res = await api.sendSmsOtp(phone.number);
+                if (!res.ok) throw new Error("Invalid phone number");
+            }}
+            onVerifyOtp={async (otpInput) => {
+                const res = await api.verifyOtp(otpInput);
+                if (!res.ok)
+                    throw new Error("Incorrect OTP. Please try again.");
+            }}
+            onResendOtp={async () => {
+                const res = await api.sendSmsOtp(phone.number);
+                if (!res.ok) throw new Error("Could not resend OTP");
+            }}
+            verifyOtpCountdownTimer={180}
+        />
+    );
+};
+```
+
+**Key gotcha — callbacks must throw, not return error strings.**
+The component catches the thrown error and displays `error.message` inline.
+Returning a value (or nothing) always signals success and advances the state machine.
+
+## Props
+
+| Prop                      | Type                                                      | Default | Description                                                    |
+| ------------------------- | --------------------------------------------------------- | ------- | -------------------------------------------------------------- |
+| `type`                    | `"phone-number" \| "email"`                               | —       | Verification channel                                           |
+| `otpState`                | `"default" \| "sent" \| "verified"`                       | —       | Controlled state of the OTP flow                               |
+| `onOtpStateChange`        | `(otpState: OtpVerificationState) => void`                | —       | Called when the flow state changes                             |
+| `onSendOtp`               | `() => Promise<void>`                                     | —       | Called when the user requests an OTP; throw to show error      |
+| `onVerifyOtp`             | `(otp: string) => Promise<void>`                          | —       | Called when the user submits the OTP; throw to show error      |
+| `onResendOtp`             | `() => Promise<void>`                                     | —       | Called when the user requests a resend; throw to show error    |
+| `sendOtpError`            | `string`                                                  | —       | Error message shown if OTP send fails                          |
+| `sendOtpPlaceholder`      | `string`                                                  | —       | Placeholder for the contact input field                        |
+| `verifyOtpError`          | `string`                                                  | —       | Error message shown if OTP verification fails                  |
+| `verifyOtpTitle`          | `string`                                                  | —       | Title for the verify OTP section                               |
+| `verifyOtpMessage`        | `string`                                                  | —       | Description for the verify OTP section                         |
+| `verifyOtpCountdownTimer` | `number`                                                  | `60`    | Seconds before the resend button is re-enabled                 |
+| `otpReminderInterval`     | `number`                                                  | `120`   | Seconds between accessibility reminder announcements           |
+| `otpValue`                | `{ prefix?: string; separator?: string; value?: string }` | —       | Current OTP input value with optional display prefix/separator |
+| `onOtpChange`             | `(value: string) => void`                                 | —       | Called when the OTP input value changes                        |
+| `showVerifyOtpThumbnail`  | `boolean`                                                 | `false` | Shows a thumbnail in the verify OTP section                    |
+| `verifyOtpIcon`           | `React.ReactNode`                                         | —       | Custom icon for the verify OTP section                         |
+| `id`                      | `string`                                                  | —       | Unique identifier of the component                             |
+| `className`               | `string`                                                  | —       | Class selector of the component                                |
+| `data-testid`             | `string`                                                  | —       | Test identifier of the component                               |
+
+## Phone-number-specific props
+
+| Prop                  | Type                                     | Description                                            |
+| --------------------- | ---------------------------------------- | ------------------------------------------------------ |
+| `phoneNumberValue`    | `PhoneNumberInputValue`                  | Controlled phone number value                          |
+| `onPhoneNumberChange` | `(value: PhoneNumberInputValue) => void` | Called when phone input changes                        |
+| `fixedCountry`        | `true`                                   | Locks the country code; required for phone-number type |
+
+## Email-specific props
+
+| Prop            | Type                      | Description                     |
+| --------------- | ------------------------- | ------------------------------- |
+| `emailValue`    | `string`                  | Controlled email value          |
+| `onEmailChange` | `(value: string) => void` | Called when email input changes |
+
+## PhoneNumberInputValue
+
+| Prop          | Type     | Description                 |
+| ------------- | -------- | --------------------------- |
+| `number`      | `string` | Phone number                |
+| `countryCode` | `string` | Country code (e.g. `"+65"`) |
+
+## Form-specific props
+
+| Prop    | Type                       | Description |
+| ------- | -------------------------- | ----------- |
+| `label` | `string \| FormLabelProps` | Field label |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Control `otpState` externally and update it via `onOtpStateChange` — the component does not manage its own state.
+-   `onSendOtp`, `onVerifyOtp`, and `onResendOtp` must be async functions; throw an error inside them to trigger the corresponding error display (`sendOtpError`, `verifyOtpError`).
+-   Always pass `fixedCountry` when `type="phone-number"` — the prop is required to lock the country selector.
+-   Set `verifyOtpCountdownTimer` to match the actual OTP expiry window from your backend.
+-   Pass `sendOtpError` and `verifyOtpError` from server responses so users receive actionable feedback.
+-   `otpState` is externally controlled — the component does not manage its own flow state.
+-   `fixedCountry` is required when `type="phone-number"`.
+
+## Anti-patterns
+
+-   Do not try to manage the step sequence manually — use `otpState` and let `onOtpStateChange` drive transitions.
+-   Do not use for non-identity-verification scenarios — for simple code inputs, use a plain `Form.Input`.
+-   Do not omit `fixedCountry` for `type="phone-number"` — the country selector will be shown unexpectedly.
+-   Do not use synchronous functions for `onSendOtp`, `onVerifyOtp`, or `onResendOtp` — they must return Promises.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-phone-number-input.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-phone-number-input.md
new file mode 100644
index 0000000000..5e86725a46
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-phone-number-input.md
@@ -0,0 +1,80 @@
+# Form.PhoneNumberInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+Type import: `import type { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input"`
+
+## When to use
+
+-   Collecting a phone number that requires a country code prefix.
+-   International forms where users may have numbers from different countries.
+-   Use `fixedCountry` when the service only accepts numbers from one country (e.g. Singapore-only services).
+
+## Usage
+
+```tsx
+const StyledPhoneNumberInput = styled(Form.PhoneNumberInput)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
+
+## Props
+
+| Prop                      | Type                                     | Default    | Description                                                             |
+| ------------------------- | ---------------------------------------- | ---------- | ----------------------------------------------------------------------- |
+| `value`                   | `PhoneNumberInputValue`                  | —          | Controlled value containing country code and number                     |
+| `allowClear`              | `boolean`                                | —          | Shows a clear icon button inside the input                              |
+| `noBorder`                | `boolean`                                | `false`    | Removes the border wrapper                                              |
+| `disabled`                | `boolean`                                | —          | Disables the component; selection not allowed                           |
+| `readOnly`                | `boolean`                                | —          | Read-only state; input not allowed                                      |
+| `error`                   | `boolean`                                | —          | Sets error display (not needed if `errorMessage` is set)                |
+| `enableSearch`            | `boolean`                                | `false`    | Enables text search within the country code dropdown                    |
+| `fixedCountry`            | `boolean`                                | `false`    | Locks the country code; hides the dropdown selector                     |
+| `id`                      | `string`                                 | —          | Unique identifier of the component                                      |
+| `name`                    | `string`                                 | —          | Name attribute of the component                                         |
+| `className`               | `string`                                 | —          | Class selector of the component                                         |
+| `data-testid`             | `string`                                 | —          | Test identifier of the component                                        |
+| `optionPlaceholder`       | `string`                                 | —          | Placeholder for the country code dropdown                               |
+| `optionSearchPlaceholder` | `string`                                 | —          | Placeholder for the country code search field (requires `enableSearch`) |
+| `pattern`                 | `string`                                 | —          | Regex the input value should match                                      |
+| `placeholder`             | `string`                                 | `"Select"` | Placeholder for the number input                                        |
+| `autoComplete`            | `string`                                 | —          | `autocomplete` attribute for the input field                            |
+| `onChange`                | `(value: PhoneNumberInputValue) => void` | —          | Called on number input change or country code selection                 |
+| `onClear`                 | `() => void`                             | —          | Called when the clear icon is clicked                                   |
+| `onBlur`                  | `() => void`                             | —          | Called on defocus                                                       |
+| `onShowOptions`           | `() => void`                             | —          | Called when the country code dropdown expands                           |
+| `onHideOptions`           | `() => void`                             | —          | Called when the country code dropdown collapses                         |
+
+## PhoneNumberInputValue
+
+| Prop          | Type     | Description                                                                                                             |
+| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `number`      | `string` | The phone number                                                                                                        |
+| `countryCode` | `string` | The country code (e.g. `"+65"`). The `+` prefix is optional on input but always included in the `onChange` return value |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` returns `{ countryCode, number }`.
+-   Use `enableSearch` when the country list is long and users need to find their country quickly.
+-   Use `fixedCountry` together with a pre-set `value.countryCode` so the locked code is visible.
+-   Use `allowClear` when the field can be optionally cleared by the user.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+
+## Anti-patterns
+
+-   Do not use a plain text input for international phone numbers — formatting and country code handling must be consistent.
+-   Do not use without `fixedCountry` when only one country is supported — it creates unnecessary friction.
+-   Do not omit `value.countryCode` when `fixedCountry` is true — the locked code won't render without it.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-predictive-text-input.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-predictive-text-input.md
new file mode 100644
index 0000000000..2be04e574f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-predictive-text-input.md
@@ -0,0 +1,102 @@
+# Form.PredictiveTextInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   The option set is too large for a static dropdown and must be fetched dynamically (e.g. address lookup, postal code search, product search, large dataset autocomplete).
+-   Users need to type to narrow down results before selecting.
+
+## Usage
+
+### Location search — three extractors working together
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+interface Location {
+    id: string;
+    name: string;
+    address: string;
+}
+
+const LocationSearchExample = () => {
+    const [selected, setSelected] = useState<Location | undefined>();
+
+    const fetchOptions = async (input: string): Promise<Location[]> => {
+        const res = await api.searchLocations(input);
+        return res.results;
+    };
+
+    return (
+        <Form.PredictiveTextInput<Location, string>
+            label="Search location"
+            minimumCharacters={3} // fetch only after 3 chars typed
+            fetchOptions={fetchOptions}
+            // Populates the text field when an option is selected
+            valueExtractor={(item) => item.name}
+            // Populates each row in the dropdown list
+            listExtractor={(item) => `${item.name} — ${item.address}`}
+            // Displays the chosen value as a chip / confirmation label
+            displayValueExtractor={(item) => item.name}
+            selectedOption={selected}
+            onSelectOption={(item) => setSelected(item ?? undefined)}
+        />
+    );
+};
+```
+
+**How the three extractors divide responsibility:**
+
+| Extractor               | When it runs               | What it renders                  |
+| ----------------------- | -------------------------- | -------------------------------- |
+| `listExtractor`         | While the dropdown is open | Each option row in the list      |
+| `valueExtractor`        | After selection            | The text field value             |
+| `displayValueExtractor` | After selection            | The chip / confirmed-value label |
+
+Debounce `fetchOptions` internally (e.g. with `setTimeout` or a library) — the component calls it on every character change.
+
+## Props
+
+| Prop                    | Type                                          | Default           | Description                                                      |
+| ----------------------- | --------------------------------------------- | ----------------- | ---------------------------------------------------------------- |
+| `fetchOptions`          | `(input: string) => Promise<T[]>`             | —                 | **Required.** Async function called to populate dropdown options |
+| `selectedOption`        | `T`                                           | —                 | Controlled selected option object                                |
+| `valueExtractor`        | `(option: T) => V`                            | —                 | Extracts the stored value from an option                         |
+| `listExtractor`         | `(option: T) => string`                       | —                 | Extracts the display text shown in the dropdown list             |
+| `displayValueExtractor` | `(option: T) => string`                       | —                 | Extracts the display text shown in the input after selection     |
+| `onSelectOption`        | `(option: T, extractedValue: T \| V) => void` | —                 | Called when the user selects an option                           |
+| `minimumCharacters`     | `number`                                      | `3`               | Minimum characters typed before options are fetched              |
+| `placeholder`           | `string`                                      | `"Enter here..."` | Placeholder text of the input                                    |
+| `disabled`              | `boolean`                                     | —                 | Disables the component; selection not allowed                    |
+| `readOnly`              | `boolean`                                     | —                 | Read-only state; selection not allowed                           |
+| `error`                 | `boolean`                                     | —                 | Sets error display (not needed if `errorMessage` is set)         |
+| `className`             | `string`                                      | —                 | Class selector of the component                                  |
+| `data-testid`           | `string`                                      | —                 | Test identifier of the component                                 |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   `fetchOptions` is required — it must be async and return an array of option objects.
+-   Debounce inside `fetchOptions` to avoid flooding the API on every keystroke.
+-   Set `minimumCharacters` to a value that produces useful results — `3` is the default, but adjust for your data source.
+-   Always provide `valueExtractor`, `listExtractor`, and `displayValueExtractor` — omitting any of these produces inconsistent display behaviour.
+-   Use `selectedOption` and `onSelectOption` for controlled selection.
+-   Set `errorMessage` when the selected option fails validation.
+-   `fetchOptions` is called on every keystroke after `minimumCharacters` is reached — debounce inside the function if needed.
+-   Generic type `T` is the option object shape; `V` is the extracted value type.
+
+## Anti-patterns
+
+-   Do not use when the full option list is small and known upfront — use `Form.Select` or `Form.MultiSelect` instead.
+-   Do not use `fetchOptions` without debouncing — each keystroke fires a new call.
+-   Do not omit extractor functions — the component cannot determine what to display without them.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-select.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-select.md
new file mode 100644
index 0000000000..961b15c28a
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-select.md
@@ -0,0 +1,122 @@
+# Form.Select
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users must select exactly one option from a predefined list. For multiple selections use `Form.MultiSelect`. For hierarchical options use `Form.NestedSelect`.
+
+## Variants
+
+| `variant`   | When to use                                              |
+| ----------- | -------------------------------------------------------- |
+| `"default"` | Standard form context                                    |
+| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+const options = [
+    { value: "sg", label: "Singapore" },
+    { value: "my", label: "Malaysia" },
+];
+
+<Form.Select
+    label="Country"
+    options={options}
+    selectedOption={selected}
+    valueExtractor={(opt) => opt.value}
+    listExtractor={(opt) => opt.label}
+    displayValueExtractor={(opt) => opt.label}
+    onSelectOption={(opt) => {}}
+/>;
+```
+
+## Props
+
+### Select specific props
+
+| Prop                         | Type                                                     | Default         | Description                                                               |
+| ---------------------------- | -------------------------------------------------------- | --------------- | ------------------------------------------------------------------------- |
+| `options`                    | `T[]`                                                    | —               | **Required.** List of option objects                                      |
+| `selectedOption`             | `T`                                                      | —               | Controlled selected option                                                |
+| `valueExtractor`             | `(option: T) => V`                                       | —               | Derives the value from an option                                          |
+| `listExtractor`              | `(option: T) => string`                                  | —               | Derives the display text for dropdown list items                          |
+| `displayValueExtractor`      | `(option: T) => string`                                  | —               | Derives the display text shown in the selector when an option is selected |
+| `valueToStringFunction`      | `(value: V) => string`                                   | —               | Converts a value to a string                                              |
+| `name`                       | `string`                                                 | —               | Name attribute of the component                                           |
+| `placeholder`                | `string`                                                 | `"Select"`      | Placeholder text                                                          |
+| `disabled`                   | `boolean`                                                | —               | Disables selection                                                        |
+| `readOnly`                   | `boolean`                                                | —               | Read-only state — selection not allowed                                   |
+| `error`                      | `boolean`                                                | —               | Show error styling — not needed if `errorMessage` is set                  |
+| `optionsLoadState`           | `"success"` \| `"loading"` \| `"failed"`                 | `"success"`     | Visual state for async option loading                                     |
+| `optionTruncationType`       | `"end"` \| `"middle"`                                    | `"end"`         | Truncation style for long option text                                     |
+| `enableSearch`               | `boolean`                                                | `false`         | Enable text-based search in the dropdown                                  |
+| `searchFunction`             | `(searchValue: string) => T[]`                           | —               | Custom search function                                                    |
+| `renderListItem`             | `(item: T, args: ListItemRenderArgs) => JSX.Element`     | —               | Custom list item renderer                                                 |
+| `renderCustomSelectedOption` | `(option: T) => JSX.Element`                             | —               | Custom renderer for the selected option display in the selector           |
+| `onSelectOption`             | `(option: T, extractedValue: T \| V) => void`            | —               | Called when an option is selected                                         |
+| `onShowOptions`              | `() => void`                                             | —               | Called when the dropdown opens                                            |
+| `onHideOptions`              | `() => void`                                             | —               | Called when the dropdown closes                                           |
+| `onRetry`                    | `() => void`                                             | —               | Called when retry is clicked after a failed load                          |
+| `onSearch`                   | `() => void`                                             | —               | Called when a search is executed                                          |
+| `hideNoResultsDisplay`       | `boolean`                                                | —               | Suppress the default no-results UI                                        |
+| `customLabels`               | `DropdownCustomLabelProps`                               | —               | Override default dropdown label strings                                   |
+| `renderCustomCallToAction`   | `(hideOptions: () => void, options: T[]) => JSX.Element` | —               | Render a custom CTA at the bottom of the dropdown                         |
+| `variant`                    | `"default"` \| `"small"`                                 | `"default"`     | Size variant                                                              |
+| `alignment`                  | `"left"` \| `"right"`                                    | `"left"`        | Dropdown alignment relative to the trigger                                |
+| `dropdownZIndex`             | `number`                                                 | `50`            | Custom z-index for the dropdown                                           |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                 | `document.body` | Root element that hosts the dropdown                                      |
+| `dropdownWidth`              | `string`                                                 | —               | Fixed width for the dropdown (overrides matching the trigger width)       |
+| `data-testid`                | `string`                                                 | —               | Test identifier for the component                                         |
+
+### ListItemRenderArgs
+
+| Prop       | Type      | Description                                 |
+| ---------- | --------- | ------------------------------------------- |
+| `selected` | `boolean` | Whether the list item is currently selected |
+
+### DropdownCustomLabelProps
+
+| Prop                   | Type                    | Description                                                        |
+| ---------------------- | ----------------------- | ------------------------------------------------------------------ |
+| `searchPlaceholder`    | `string`                | Placeholder for the search field                                   |
+| `noResultsLabel`       | `string`                | Replaces the default no-results label                              |
+| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label                      |
+| `selectAllButtonLabel` | `string`                | Label for the Select all button                                    |
+| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                                     |
+| `allSelectedLabel`     | `string`                | Label shown when all options are selected                          |
+| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected (e.g. "X selected") |
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
+
+## Rules
+
+-   Always provide `options` — the component has no meaning without it.
+-   Provide `valueExtractor` and `listExtractor` when the option objects are not plain strings — these are effectively required for typed option arrays.
+-   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing the raw value (e.g. "sg") in the closed selector instead of the label (e.g. "Singapore").
+-   Use `optionsLoadState` to communicate async loading states — set to `"loading"` while fetching, `"failed"` on error (triggers retry UI).
+-   Use `enableSearch` when the list exceeds ~10 items.
+-   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
+-   Use `dropdownWidth` when the dropdown must be wider than the trigger (e.g. long option text).
+-   `options` is the only mandatory component-specific prop.
+-   Only specify `dropdownRootNode` when the default `body` rendering causes scroll or z-index conflicts.
+
+## Anti-patterns
+
+-   Do not use `Form.Select` when users can choose more than one option — use `Form.MultiSelect`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
+-   Do not set both `error` and `errorMessage`.
+-   Do not use `disabled` on review screens — use `readOnly`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-slider.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-slider.md
new file mode 100644
index 0000000000..e8349b26d7
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-slider.md
@@ -0,0 +1,115 @@
+# Form.Slider
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Selecting a single numeric value within a bounded range (e.g. budget, age, percentage, rating).
+-   When the relative position of a value matters more than typing an exact number.
+
+## Usage
+
+### Basic slider with display-only `onChange` and API-safe `onChangeEnd`
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const BudgetSlider = () => {
+    const [displayValue, setDisplayValue] = useState(500);
+
+    const handleChange = (value: number) => {
+        // Safe: fires continuously during drag — update display only
+        setDisplayValue(value);
+    };
+
+    const handleChangeEnd = (value: number) => {
+        // Safe: fires once on mouse/touch release — trigger API calls here
+        fetchResults({ maxBudget: value });
+    };
+
+    return (
+        <Form.Slider
+            label={`Budget: $${displayValue}`}
+            min={0}
+            max={2000}
+            step={100}
+            value={displayValue}
+            onChange={handleChange}
+            onChangeEnd={handleChangeEnd}
+            showSliderLabels
+            sliderLabelPrefix="$"
+            showIndicatorLabel
+            indicatorLabelPrefix="$"
+        />
+    );
+};
+```
+
+**Never put API calls or expensive state updates in `onChange`** — it fires on every pixel of drag movement. Use `onChangeEnd` instead.
+
+### Custom track colours
+
+`colors` takes a two-element array: `[leftTrackColor, rightTrackColor]`.
+
+```tsx
+<Form.Slider
+    label="Risk level"
+    min={0}
+    max={10}
+    colors={["#4caf50", "#e0e0e0"]}
+    showSliderLabels
+    sliderLabelSuffix=" / 10"
+/>
+```
+
+## Props
+
+| Prop                   | Type                                                              | Default | Description                                                   |
+| ---------------------- | ----------------------------------------------------------------- | ------- | ------------------------------------------------------------- |
+| `value`                | `number`                                                          | —       | Controlled value                                              |
+| `min`                  | `number`                                                          | `0`     | Start of the range                                            |
+| `max`                  | `number`                                                          | `100`   | End of the range                                              |
+| `step`                 | `number`                                                          | `1`     | Interval between values                                       |
+| `disabled`             | `boolean`                                                         | —       | Disables the slider; selection not allowed                    |
+| `readOnly`             | `boolean`                                                         | —       | Read-only state                                               |
+| `id`                   | `string`                                                          | —       | Unique identifier of the component                            |
+| `className`            | `string`                                                          | —       | Class selector of the component                               |
+| `data-testid`          | `string`                                                          | —       | Test identifier of the component                              |
+| `colors`               | `(string \| ((props: ThemeStyleProps) => string \| undefined))[]` | —       | Custom colors for track segments `[leftTrack, rightTrack]`    |
+| `showSliderLabels`     | `boolean`                                                         | —       | Shows min and max labels                                      |
+| `sliderLabelPrefix`    | `string`                                                          | —       | Text prepended to min/max labels                              |
+| `sliderLabelSuffix`    | `string`                                                          | —       | Text appended to min/max labels                               |
+| `renderSliderLabel`    | `(value: number) => React.ReactNode`                              | —       | Custom renderer for min/max labels                            |
+| `showIndicatorLabel`   | `boolean`                                                         | —       | Shows the current value as an indicator label above the thumb |
+| `indicatorLabelPrefix` | `string`                                                          | —       | Text prepended to the indicator label                         |
+| `indicatorLabelSuffix` | `string`                                                          | —       | Text appended to the indicator label                          |
+| `ariaLabel`            | `string`                                                          | —       | Accessible label for screen readers                           |
+| `onChange`             | `(value: number) => void`                                         | —       | Called on every value change (fires continuously during drag) |
+| `onChangeEnd`          | `(value: number) => void`                                         | —       | Called when the thumb is released after a change              |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Always set `min` and `max` to meaningful bounds for the use case.
+-   Use `step` to restrict values to meaningful increments (e.g. `step={500}` for a budget slider).
+-   Use `onChangeEnd` for expensive operations (API calls, heavy computations) — `onChange` fires on every pixel of movement.
+-   Enable `showSliderLabels` so users know the range bounds.
+-   Enable `showIndicatorLabel` so users can see the current value while dragging.
+-   Provide `ariaLabel` when the label alone does not fully describe the slider's purpose to screen readers.
+-   `onChange` fires continuously during drag; use `onChangeEnd` for expensive operations such as API calls.
+-   `colors` array format is `[leftTrack, rightTrack]`.
+
+## Anti-patterns
+
+-   Do not use `onChange` to trigger API calls — use `onChangeEnd` to avoid flooding the network.
+-   Do not use when the user needs to enter a precise value — prefer a number input in that case.
+-   Do not omit `min` and `max` — the defaults (0–100) may not be appropriate for the domain.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-textarea.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-textarea.md
new file mode 100644
index 0000000000..de67735bf1
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-textarea.md
@@ -0,0 +1,122 @@
+# Form.Textarea
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use for freeform long-text entry — descriptions, comments, reasons, or any field where users need more than one line. Use `Form.Input` for single-line text.
+
+## Usage
+
+### 1. Basic controlled textarea
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const [value, setValue] = useState("");
+
+<Form.Textarea
+    label="Description"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    placeholder="Enter a description..."
+    rows={4}
+/>;
+```
+
+### 2. With `maxLength` — auto-renders a character counter
+
+```tsx
+<Form.Textarea
+    label="Comments"
+    maxLength={200}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+/>;
+{
+    /* A counter "0 / 200" appears below automatically — no extra code needed */
+}
+```
+
+### 3. With `renderCustomCounter`
+
+The prop signature is `(maxLength: number, currentValueLength: number) => JSX.Element`. Note the argument order: `maxLength` first, then `currentValueLength`.
+
+```tsx
+<Form.Textarea
+    label="Comments"
+    maxLength={200}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    renderCustomCounter={(maxLength, currentValueLength) => (
+        <span
+            style={{
+                color: currentValueLength > maxLength * 0.9 ? "red" : "inherit",
+            }}
+        >
+            {currentValueLength} of {maxLength} characters used
+        </span>
+    )}
+/>
+```
+
+### 4. With `transformValue`
+
+`transformValue` runs on every input event and replaces the raw value before it is applied. Do not duplicate this logic in `onChange`.
+
+```tsx
+<Form.Textarea
+    label="Reference code"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    transformValue={(raw) => raw.toUpperCase()}
+    maxLength={50}
+/>;
+{
+    /* User types "abc" → stored value becomes "ABC" */
+}
+```
+
+## Props
+
+### Textarea specific props
+
+| Prop                  | Type                                                             | Default | Description                                              |
+| --------------------- | ---------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `error`               | `boolean`                                                        | —       | Show error styling — not needed if `errorMessage` is set |
+| `renderCustomCounter` | `(maxLength: number, currentValueLength: number) => JSX.Element` | —       | Render a custom character counter label                  |
+| `transformValue`      | `(value: string) => string`                                      | —       | Transform the value on change before it is applied       |
+| `prefix`              | `string`                                                         | —       | Prefix string displayed inside the textarea              |
+| `data-testid`         | `string`                                                         | —       | Test identifier for the component                        |
+
+Also inherits all props from `HTMLTextareaElement` — including `rows`, `maxLength`, `placeholder`, `disabled`, `readOnly`, `value`, `onChange`, `resize`.
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
+
+## Rules
+
+-   Set `rows` to match the expected content length — a short reason field needs fewer rows than a free-text description.
+-   Set `resize="none"` when the textarea height is fixed by design to prevent layout disruption.
+-   Provide `maxLength` when a character limit must be enforced — the built-in counter appears automatically.
+-   Use `renderCustomCounter` only when the default counter format does not meet content requirements.
+-   Use `transformValue` for on-the-fly normalisation (e.g. forced capitalisation) — do not replicate this in `onChange`.
+-   Provide `errorMessage` rather than `error` alone.
+-   Setting native `maxLength` renders a character counter below the textarea automatically.
+-   `renderCustomCounter` overrides the default counter UI when `maxLength` is set.
+-   `error` is redundant when `errorMessage` is provided.
+-   `transformValue` runs on every input event — use for normalisation (e.g. uppercase conversion).
+
+## Anti-patterns
+
+-   Do not use `Form.Textarea` for single-line inputs — use `Form.Input`.
+-   Do not implement a manual character counter in consumer code when `maxLength` is set — the built-in counter handles it.
+-   Do not set both `error` and `errorMessage`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-time-range-picker.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-time-range-picker.md
new file mode 100644
index 0000000000..7ea46b7522
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-time-range-picker.md
@@ -0,0 +1,84 @@
+# Form.TimeRangePicker
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a start and end time from the user (e.g. operating hours, meeting slot, booking window).
+-   Use `variant="combobox"` with `interval` when users should pick from fixed time slots (e.g. every 30 minutes).
+-   Use `variant="dial"` (default) for freeform time selection.
+
+## Usage
+
+```tsx
+const StyledTimeRangePicker = styled(Form.TimeRangePicker)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
+
+## Props
+
+| Prop               | Type                                    | Default         | Description                                              |
+| ------------------ | --------------------------------------- | --------------- | -------------------------------------------------------- |
+| `value`            | `TimeRangePickerValue`                  | —               | Selected time range                                      |
+| `format`           | `"12hr" \| "24hr"`                      | `"24hr"`        | Time input format                                        |
+| `variant`          | `"dial" \| "combobox"`                  | `"dial"`        | Picker UI variant                                        |
+| `disabled`         | `boolean`                               | —               | Disables the component; entry not allowed                |
+| `readOnly`         | `boolean`                               | —               | Read-only state; selection not allowed                   |
+| `error`            | `boolean`                               | —               | Sets error display (not needed if `errorMessage` is set) |
+| `id`               | `string`                                | —               | Unique identifier of the component                       |
+| `className`        | `string`                                | —               | Class selector of the component                          |
+| `style`            | `React.CSSProperties`                   | —               | Inline styles for the component                          |
+| `data-testid`      | `string`                                | —               | Test identifier of the component                         |
+| `alignment`        | `"left" \| "right"`                     | `"left"`        | Dropdown alignment relative to the field                 |
+| `dropdownZIndex`   | `number`                                | `50`            | z-index of the dropdown                                  |
+| `dropdownRootNode` | `React.RefObject<HTMLElement>`          | `document.body` | Root element containing the dropdown                     |
+| `onChange`         | `(value: TimeRangePickerValue) => void` | —               | Called when user confirms the time range                 |
+| `onBlur`           | `() => void`                            | —               | Called on defocus                                        |
+| `onFocus`          | `() => void`                            | —               | Called when field is focused                             |
+
+## Combobox-variant-specific props
+
+| Prop                     | Type     | Default | Description                                                  |
+| ------------------------ | -------- | ------- | ------------------------------------------------------------ |
+| `interval`               | `number` | `15`    | Minutes between each dropdown option                         |
+| `startLimit`             | `string` | —       | Earliest time shown in the dropdown                          |
+| `endLimit`               | `string` | —       | Latest time shown in the dropdown                            |
+| `initialScrollStartTime` | `string` | —       | Time the start dropdown scrolls to when start field is empty |
+| `initialScrollEndTime`   | `string` | —       | Time the end dropdown scrolls to when end field is empty     |
+
+## TimeRangePickerValue
+
+| Prop    | Type     | Description                                                                                                 |
+| ------- | -------- | ----------------------------------------------------------------------------------------------------------- |
+| `start` | `string` | Start time. Dial 24hr: `"HH:mm"`, dial 12hr: `"hh:mmA"`. Combobox 24hr: `"HH:mm"`, combobox 12hr: `"h:mma"` |
+| `end`   | `string` | End time, same format as `start`                                                                            |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `TimeRangePickerValue`.
+-   Match `format` to the expected string format in `TimeRangePickerValue`.
+-   Use `startLimit`/`endLimit` with `combobox` variant to restrict available options to valid business hours.
+-   Set `errorMessage` rather than `error` alone.
+-   Use `dropdownRootNode` when inside a modal or scrollable container.
+-   Time string format differs between `dial` and `combobox` variants — see `TimeRangePickerValue` above.
+-   `interval`, `startLimit`, `endLimit`, and `initialScroll*` props only apply when `variant="combobox"`.
+
+## Anti-patterns
+
+-   Do not use for single time selection — use `Form.TimePicker` instead.
+-   Do not mix dial and combobox time string formats — the format differs between variants.
+-   Do not set combobox-specific props (`interval`, `startLimit`, `endLimit`, `initialScroll*`) when `variant="dial"`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-timepicker.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-timepicker.md
new file mode 100644
index 0000000000..ea9ade5e5b
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-timepicker.md
@@ -0,0 +1,68 @@
+# Form.Timepicker
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+> **Casing:** the export is `Form.Timepicker` (lowercase `p`), not `Form.TimePicker`.
+
+## When to use
+
+-   Collecting a single time value from the user (e.g. appointment time, start time, notification time).
+-   Use `format="12hr"` for consumer-facing forms where AM/PM is more intuitive.
+-   Use `format="24hr"` (default) for operational or technical contexts.
+
+## Usage
+
+```tsx
+const StyledTimepicker = styled(Form.Timepicker)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
+
+## Props
+
+| Prop               | Type                           | Default         | Description                                                                          |
+| ------------------ | ------------------------------ | --------------- | ------------------------------------------------------------------------------------ |
+| `value`            | `string`                       | —               | Selected time. 24hr: `"HH:mm"` (e.g. `"13:00"`); 12hr: `"hh:mmA"` (e.g. `"01:00PM"`) |
+| `format`           | `"12hr" \| "24hr"`             | `"24hr"`        | Time input format                                                                    |
+| `placeholder`      | `string`                       | —               | Placeholder text in the field                                                        |
+| `alignment`        | `"left" \| "right"`            | `"left"`        | Alignment of the dropdown relative to the field                                      |
+| `disabled`         | `boolean`                      | —               | Disables the component; entry not allowed                                            |
+| `error`            | `boolean`                      | —               | Sets error display (not needed if `errorMessage` is set)                             |
+| `id`               | `string`                       | —               | Unique identifier of the component                                                   |
+| `className`        | `string`                       | —               | Class selector of the component                                                      |
+| `style`            | `React.CSSProperties`          | —               | Inline styles for the component                                                      |
+| `data-testid`      | `string`                       | —               | Test identifier of the component                                                     |
+| `dropdownZIndex`   | `number`                       | —               | z-index of the dropdown popover                                                      |
+| `dropdownRootNode` | `React.RefObject<HTMLElement>` | `document.body` | Root element containing the dropdown popover                                         |
+| `onChange`         | `(value: string) => void`      | —               | Called when user confirms a time selection                                           |
+| `onBlur`           | `() => void`                   | —               | Called on defocus; pending changes are not applied                                   |
+| `onFocus`          | `() => void`                   | —               | Called when field is focused                                                         |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage.
+-   Match `format` to the expected string format: `"HH:mm"` for 24hr, `"hh:mmA"` for 12hr.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `dropdownRootNode` when the picker is inside a modal or fixed container to avoid z-index issues.
+-   Use `alignment="right"` when the picker is near the right edge of the viewport.
+-   `onChange` fires only after the user clicks the Confirm button, not on every dial interaction.
+-   `onBlur` does not apply any in-progress selection — use `onChange` for committed values.
+
+## Anti-patterns
+
+-   Do not use for time-range selection — use `Form.TimeRangePicker` instead.
+-   Do not mix 12hr format strings with `format="24hr"` or vice versa.
+-   Do not rely on `onBlur` to capture the selected value — it does not commit the selection.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-unit-number-input.md b/docs/skills/cc-flagship-ds/resources/v3/components/form-unit-number-input.md
new file mode 100644
index 0000000000..863ae3eb97
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/form-unit-number-input.md
@@ -0,0 +1,132 @@
+# Form.UnitNumberInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a Singapore unit number in `#floor-unit` format (e.g. `#01-234`).
+-   Any address form that includes a unit number field for Singapore addresses.
+
+## Usage
+
+### Basic controlled usage with validation guard
+
+`onChange` returns a `floor-unit` string (e.g. `"03-12"`) or the sentinel string `"Invalid unit number"` for malformed input. Always check before persisting.
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const UnitField = () => {
+    const [value, setValue] = useState("");
+    const [error, setError] = useState("");
+
+    const handleChange = (val: string) => {
+        if (val === "Invalid unit number") {
+            setError("Please enter a valid unit number.");
+            // Do not persist — keep previous valid value in state
+        } else {
+            setError("");
+            setValue(val); // e.g. "03-12"
+        }
+    };
+
+    return (
+        <Form.UnitNumberInput
+            label="Unit number"
+            value={value}
+            onChange={handleChange}
+            errorMessage={error}
+        />
+    );
+};
+```
+
+### `onBlur` zero-pads automatically
+
+After the user tabs away, `onBlur` fires with the formatted value. The displayed value may change without any user input — update state accordingly.
+
+```tsx
+<Form.UnitNumberInput
+    label="Unit number"
+    value={value}
+    onChange={handleChange}
+    onBlur={(formatted) => {
+        // e.g. user typed "3-2" → formatted is "03-02"
+        setValue(formatted);
+    }}
+/>
+```
+
+### `onChangeRaw` — separate floor and unit
+
+Use `onChangeRaw` when downstream code needs floor and unit as distinct values, regardless of validity.
+
+```tsx
+<Form.UnitNumberInput
+    label="Unit number"
+    onChangeRaw={(parts: string[]) => {
+        const [floor, unit] = parts; // e.g. ["03", "12"]
+        setFloor(floor);
+        setUnit(unit);
+    }}
+/>
+```
+
+Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper:
+
+```tsx
+const StyledUnitNumberInput = styled(Form.UnitNumberInput)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+## Props
+
+| Prop           | Type                        | Default     | Description                                                                                              |
+| -------------- | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
+| `value`        | `string`                    | —           | Controlled value in `floor-unit` format (e.g. `"00-8888"`)                                               |
+| `name`         | `string`                    | —           | Name attribute of the component                                                                          |
+| `error`        | `boolean`                   | —           | Sets error display (not needed if `errorMessage` is set)                                                 |
+| `id`           | `string`                    | —           | Unique identifier of the component                                                                       |
+| `className`    | `string`                    | —           | Class selector of the component                                                                          |
+| `style`        | `React.CSSProperties`       | —           | Inline styles for the component                                                                          |
+| `role`         | `React.AriaRole`            | —           | ARIA role of the component                                                                               |
+| `data-testid`  | `string`                    | —           | Test identifier of the component                                                                         |
+| `placeholder`  | `string`                    | `"00-8888"` | Placeholder text; recommended to use `<floor>-<unit>` format                                             |
+| `disabled`     | `boolean`                   | —           | Disables the component; entry not allowed                                                                |
+| `readOnly`     | `boolean`                   | —           | Read-only state; entry not allowed                                                                       |
+| `tabIndex`     | `number`                    | —           | Tab order of the component                                                                               |
+| `autoComplete` | `string`                    | —           | `autocomplete` attribute for the input field                                                             |
+| `onChange`     | `(value: string) => void`   | —           | Called on value change; returns `floor-unit` string. Returns `"Invalid unit number"` if value is invalid |
+| `onChangeRaw`  | `(value: string[]) => void` | —           | Called on value change; returns `[floor, unit]` array regardless of validity                             |
+| `onBlur`       | `(value: string) => void`   | —           | Called on defocus; returns formatted `floor-unit` string (e.g. `"11-2"` → `"11-02"`)                     |
+| `onBlurRaw`    | `(value: string[]) => void` | —           | Called on defocus; returns `[floor, unit]` array                                                         |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage.
+-   Check the return value of `onChange` for `"Invalid unit number"` and handle it before persisting the value.
+-   Use `onChangeRaw` if you need floor and unit as separate values for downstream processing.
+-   Use `onBlur` to get the zero-padded, formatted value after the user finishes typing.
+-   Set `errorMessage` to explain validation failures.
+-   `onChange` returns `"Invalid unit number"` for malformed input — check for this string before saving.
+-   `onBlur` zero-pads the unit part (e.g. `"11-2"` → `"11-02"`).
+-   Use `onChangeRaw` / `onBlurRaw` when you need floor and unit as separate values.
+
+## Anti-patterns
+
+-   Do not use a plain text input for unit numbers — the component enforces the correct format automatically.
+-   Do not persist the value returned from `onChange` without first checking it is not `"Invalid unit number"`.
+-   Do not use for non-Singapore address formats — the component enforces the `floor-unit` structure.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/fullscreen-image-carousel.md b/docs/skills/cc-flagship-ds/resources/v3/components/fullscreen-image-carousel.md
new file mode 100644
index 0000000000..bc10fceddb
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/fullscreen-image-carousel.md
@@ -0,0 +1,123 @@
+# FullscreenImageCarousel
+
+Import: `import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel"`
+
+## When to use
+
+Use to display a fullscreen overlay carousel of images or custom content (e.g. PDFs, videos) with thumbnail navigation, zoom, and optional delete controls.
+
+## Sub-components
+
+-   `FullscreenImageCarouselItemProps` — union of `FullscreenImageCarouselImageItemProps` and `FullscreenImageCarouselCustomItemProps`
+
+## Usage
+
+### Mixed image and custom items
+
+Items use a discriminated union on `type`. Image items may omit `type` (defaults to image); custom items **must** set `type: "custom"` and provide `renderContent`.
+
+```tsx
+import { useState } from "react";
+import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel";
+
+const DocViewer = () => {
+    const [show, setShow] = useState(false);
+
+    const items = [
+        // Image item — type may be omitted
+        {
+            src: "https://example.com/photo.jpg",
+            alt: "Site photo",
+            fileName: "photo.jpg",
+            fileSize: "1.2 MB",
+        },
+        // Custom item — type is required
+        {
+            type: "custom" as const,
+            itemLabel: "PDF",
+            thumbnailSrc: "https://example.com/pdf-thumb.svg",
+            renderContent: () => (
+                <iframe
+                    src="https://example.com/document.pdf"
+                    title="PDF preview"
+                    style={{ width: "100%", height: "100%", border: "none" }}
+                />
+            ),
+        },
+    ];
+
+    const handleDelete = (item, index) => {
+        // Remove the item from your state; the delete button only appears
+        // because onDelete is provided.
+        removeItem(index);
+    };
+
+    return (
+        <>
+            <button onClick={() => setShow(true)}>View files</button>
+            <FullscreenImageCarousel
+                show={show}
+                items={items}
+                onClose={() => setShow(false)}
+                onDelete={handleDelete} // omit to hide delete button
+                showFirstAndLastNav
+            />
+        </>
+    );
+};
+```
+
+## Props
+
+| Prop                     | Type                                                               | Default    | Description                                                                               |
+| ------------------------ | ------------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------- |
+| `show` \*                | `boolean`                                                          | `false`    | Toggles the visibility of the Modal                                                       |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                               | —          | List of carousel items                                                                    |
+| `animationFrom`          | `"top" \| "bottom" \| "left" \| "right"`                           | `"bottom"` | The animation direction the Modal will appear from                                        |
+| `zIndex`                 | `number`                                                           | —          | Custom z-index for modal stacking                                                         |
+| `initialActiveItemIndex` | `number`                                                           | `0`        | The initial image that will be displayed                                                  |
+| `hideThumbnail`          | `boolean`                                                          | —          | Specifies if the bottom thumbnail row is visible                                          |
+| `hideNavigation`         | `boolean`                                                          | —          | Specifies if the left and right navigation buttons are visible                            |
+| `hideCounter`            | `boolean`                                                          | —          | Specifies if the pagination counter pill is visible                                       |
+| `hideMagnifier`          | `boolean`                                                          | —          | Specifies if the magnifier/zoom button is visible                                         |
+| `onDelete`               | `(item: FullscreenImageCarouselItemProps, index: number) => void`  | —          | Called when the delete button is clicked; showing the button requires providing this prop |
+| `onClose`                | `() => void`                                                       | —          | Called when the overlay is dismissed via close button or Esc key                          |
+| `insets`                 | `{ top?: number; bottom?: number; left?: number; right?: number }` | —          | Safe-area insets from viewport edges                                                      |
+
+`*` = required
+
+## FullscreenImageCarouselItemProps (shared)
+
+| Prop       | Type     | Default | Description                                      |
+| ---------- | -------- | ------- | ------------------------------------------------ |
+| `fileName` | `string` | —       | File name displayed in the info bar at the top   |
+| `fileSize` | `string` | —       | Pre-formatted file size string (e.g. `"2.4 MB"`) |
+
+## FullscreenImageCarouselImageItemProps
+
+| Prop           | Type      | Default | Description                                   |
+| -------------- | --------- | ------- | --------------------------------------------- |
+| `type`         | `"image"` | —       | Discriminant; may be omitted for image items  |
+| `src` \*       | `string`  | —       | The image src                                 |
+| `alt`          | `string`  | —       | Descriptive text for screen readers           |
+| `thumbnailSrc` | `string`  | —       | Thumbnail src; falls back to `src` if omitted |
+
+## FullscreenImageCarouselCustomItemProps
+
+| Prop               | Type                    | Default | Description                                  |
+| ------------------ | ----------------------- | ------- | -------------------------------------------- |
+| `type` \*          | `"custom"`              | —       | Discriminant; must be `"custom"`             |
+| `renderContent` \* | `() => React.ReactNode` | —       | Custom render prop for the full slide area   |
+| `thumbnailSrc`     | `string`                | —       | Thumbnail src; shows placeholder if omitted  |
+| `itemLabel`        | `string`                | —       | Label describing content type (e.g. `"PDF"`) |
+
+## Rules
+
+-   Always provide `show` and `items` — both are required.
+-   Always wire `onClose` to set `show` to `false`; the component does not close itself.
+-   Do not reorder the `items` array while a delete is in flight.
+-   The delete button only appears when `onDelete` is provided — omit the prop to hide the button entirely.
+
+## Anti-patterns
+
+-   Do not use for inline image galleries — this component renders as a fullscreen modal overlay.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/histogram-slider.md b/docs/skills/cc-flagship-ds/resources/v3/components/histogram-slider.md
new file mode 100644
index 0000000000..f05018847b
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/histogram-slider.md
@@ -0,0 +1,40 @@
+# HistogramSlider
+
+Import: `import { HistogramSlider } from "@lifesg/react-design-system/histogram-slider"`
+
+A range slider with a histogram distribution chart above it — used in filter panels where showing the value distribution helps users pick a range (e.g. price range, age range).
+
+## Props
+
+| Prop               | Type                                | Default | Description                                                  |
+| ------------------ | ----------------------------------- | ------- | ------------------------------------------------------------ |
+| `bins`             | `HistogramBinProps[]`               | `[]`    | Histogram data — array of `{ count, minValue }` objects      |
+| `interval`         | `number`                            | —       | **Required.** Width of each bin (e.g. `10` for 0–10, 10–20…) |
+| `value`            | `[number, number]`                  | —       | Selected range as `[start, end]`                             |
+| `onChange`         | `(value: [number, number]) => void` | —       | Fires on every drag movement                                 |
+| `onChangeEnd`      | `(value: [number, number]) => void` | —       | Fires when thumb is released — use for API calls             |
+| `disabled`         | `boolean`                           | `false` | Disables interaction                                         |
+| `readOnly`         | `boolean`                           | `false` | Display only — no interaction                                |
+| `showRangeLabels`  | `boolean`                           | —       | Show min/max value labels below the slider                   |
+| `rangeLabelPrefix` | `string`                            | —       | Prefix for range labels (e.g. `"$"`)                         |
+| `rangeLabelSuffix` | `string`                            | —       | Suffix for range labels (e.g. `" km"`)                       |
+| `renderRangeLabel` | `(value: number) => ReactNode`      | —       | Custom range label renderer — overrides prefix/suffix        |
+| `renderEmptyView`  | `() => ReactNode`                   | —       | Renders when `bins` is empty                                 |
+| `ariaLabels`       | `[string, string]`                  | —       | Accessible labels for `[minThumb, maxThumb]`                 |
+| `aria-labelledby`  | `string`                            | —       | ID of an external label element                              |
+| `aria-describedby` | `string`                            | —       | ID of an external description element                        |
+| `data-testid`      | `string`                            | —       | Test identifier                                              |
+
+## HistogramBinProps
+
+| Prop       | Type     | Description                                         |
+| ---------- | -------- | --------------------------------------------------- |
+| `count`    | `number` | Number of items in this bin — determines bar height |
+| `minValue` | `number` | Starting value of this bin                          |
+
+## Rules
+
+-   `onChange` fires continuously during drag — do not put API calls here; use `onChangeEnd`.
+-   `interval` must match the gap between `minValue` of consecutive bins.
+-   Always provide `ariaLabels` or `aria-labelledby` for accessibility.
+-   Pair with `Filter` in a filter sidebar — `HistogramSlider` is not a `Form.*` component and does not use `label`/`errorMessage`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/icon-button.md b/docs/skills/cc-flagship-ds/resources/v3/components/icon-button.md
new file mode 100644
index 0000000000..290d9a80a0
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/icon-button.md
@@ -0,0 +1,25 @@
+# IconButton
+
+> **Not available in v4.** If you are building for v4, do not use this component.
+
+Import: `import { IconButton } from "@lifesg/react-design-system/icon-button"`
+
+## Props
+
+| Prop                    | Type                                      | Default     | Description                          |
+| ----------------------- | ----------------------------------------- | ----------- | ------------------------------------ |
+| `data-testid`           | `string`                                  | —           | Test identifier of the component     |
+| `styleType`             | `"primary"` \| `"secondary"` \| `"light"` | `"primary"` | Visual style of the button           |
+| `sizeType`              | `"large"` \| `"default"` \| `"small"`     | `"default"` | Size of the button                   |
+| `focusableWhenDisabled` | `boolean`                                 | `false`     | Keeps button focusable when disabled |
+
+Also inherits all props from `HTMLButtonElement` (e.g. `disabled`, `onClick`, `aria-label`, `children`).
+
+## Rules
+
+-   `aria-label` is required on every `IconButton` — icon-only buttons have no visible text for screen readers.
+-   Pass the icon component as `children`.
+
+## Anti-patterns
+
+-   Omitting `aria-label` — icon-only buttons are inaccessible without it.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/icon.md b/docs/skills/cc-flagship-ds/resources/v3/components/icon.md
new file mode 100644
index 0000000000..7fa6d022fe
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/icon.md
@@ -0,0 +1,175 @@
+# Icons
+
+Icons come from `@lifesg/react-icons` — a separate package. Each icon is its own named export.
+
+## Import pattern
+
+Icon names follow `{name}` → component name is `{PascalCase}Icon`:
+
+```tsx
+import { ArrowRightIcon } from "@lifesg/react-icons/arrow-right";
+import { TickCircleFillIcon } from "@lifesg/react-icons/tick-circle-fill";
+import { PersonIcon } from "@lifesg/react-icons/person";
+```
+
+Pattern: `kebab-case` name → import path `@lifesg/react-icons/{name}` → component `{PascalCase}Icon`
+
+## Props
+
+| Prop        | Type     | Default  | Description                      |
+| ----------- | -------- | -------- | -------------------------------- |
+| `size`      | `number` | `24`     | Icon size in px                  |
+| `color`     | `string` | inherits | CSS colour value or token string |
+| `className` | `string` | —        | CSS class                        |
+
+## Available icons
+
+Icons come in two variants: outline (default) and filled (`-fill` suffix).
+
+### Arrows & Navigation
+
+`arrow-up` `arrow-down` `arrow-left` `arrow-right`
+`arrow-up-circle` `arrow-up-circle-fill` `arrow-down-circle` `arrow-down-circle-fill`
+`arrow-left-circle` `arrow-left-circle-fill` `arrow-right-circle` `arrow-right-circle-fill`
+`arrow-left-up` `arrow-left-down` `arrow-right-up` `arrow-right-down`
+`chevron-up` `chevron-down` `chevron-left` `chevron-right`
+`chevron-2-left` `chevron-2-right`
+`chevron-line-left` `chevron-line-right`
+`caret-up` `caret-down` `caret-left` `caret-right`
+`multi-chevron-up-down` `multi-chevron-down-up`
+`navigation` `navigation-fill`
+`external` `return`
+
+### Actions
+
+`plus` `plus-circle` `plus-circle-fill`
+`minus` `minus-circle` `minus-circle-fill` `minus-square` `minus-square-fill`
+`cross` `cross-circle` `cross-circle-fill`
+`tick` `tick-circle` `tick-circle-fill`
+`pencil` `pencil-fill` `pencil-stroke` `pencil-stroke-fill`
+`bin` `bin-fill`
+`copy` `copy-fill`
+`download` `upload`
+`share` `link`
+`login` `logout`
+`refresh` `replay` `retry`
+`drag-handle`
+`filter`
+`sort-ascending` `sort-descending`
+`fullscreen-open` `fullscreen-close`
+`read-more`
+`eraser`
+
+### Status & Feedback
+
+`tick-circle` `tick-circle-fill`
+`cross-circle` `cross-circle-fill`
+`exclamation-circle` `exclamation-circle-fill`
+`exclamation-triangle` `exclamation-triangle-fill`
+`i-circle` `i-circle-fill`
+`questionmark-circle` `questionmark-circle-fill`
+`thumb-up` `thumb-up-fill`
+`star` `star-fill` `star-half`
+
+### People & Identity
+
+`person` `person-fill`
+`person-2` `person-2-fill`
+`person-group` `person-group-fill`
+`person-plus` `person-plus-fill`
+`person-minus` `person-minus-fill`
+`person-2-plus` `person-2-plus-fill`
+`person-2-minus` `person-2-minus-fill`
+`person-gear` `person-gear-fill`
+`person-off` `person-off-fill`
+`id-card` `id-card-fill`
+
+### Communication
+
+`envelope` `envelope-fill`
+`envelope-open` `envelope-open-fill`
+`bell` `bell-fill`
+`phone` `phone-fill`
+`inbox` `inbox-fill`
+`speaker` `speaker-fill`
+
+### Files & Documents
+
+`doc` `doc-fill`
+`doc-pencil` `doc-pencil-fill`
+`album` `album-fill`
+`box` `box-fill`
+`index`
+`text` `text-fill`
+
+### Calendar & Time
+
+`calendar` `calendar-fill`
+`calendar-event` `calendar-event-fill`
+`calendar-plus` `calendar-plus-fill`
+`calendar-cross` `calendar-cross-fill`
+`calendar-dot` `calendar-dot-fill`
+`calendar-pencil` `calendar-pencil-fill`
+`calendar-tick` `calendar-tick-fill`
+`clock` `clock-fill`
+`recurring` `non-recurring`
+
+### Location & Maps
+
+`map` `map-fill`
+`pin` `pin-fill`
+`point`
+`navigation` `navigation-fill`
+`globe`
+`house` `house-fill`
+`building`
+`floor-plan` `floor-plan-fill`
+
+### Devices & Media
+
+`camera` `camera-fill`
+`tablet` `tablet-fill`
+`phone` `phone-fill`
+`cloud` `cloud-fill`
+`cloud-arrow-up` `cloud-arrow-up-fill`
+`cloud-arrow-down` `cloud-arrow-down-fill`
+`cloud-tick` `cloud-tick-fill`
+`qr`
+
+### UI & Layout
+
+`menu`
+`ellipsis-horizontal` `ellipsis-vertical`
+`gear` `gear-fill`
+`lock` `lock-fill`
+`eye` `eye-fill`
+`eye-slash` `eye-slash-fill`
+`list`
+`square` `square-fill`
+`square-2x2` `square-2x2-fill`
+`square-tick` `square-tick-fill`
+`circle` `circle-dot`
+`toggle-on` `toggle-on-fill`
+`toggle-off` `toggle-off-fill`
+`magnifier` `magnifier-plus` `magnifier-minus`
+
+### Misc
+
+`bookmark` `bookmark-fill`
+`chart` `chart-fill`
+`car`
+`dollar`
+`printer` `printer-fill`
+`lightbulb` `lightbulb-fill`
+`language`
+`ticket` `ticket-fill`
+`triangle-forward` `triangle-forward-fill`
+`align-left` `align-center` `align-right` `align-justify`
+`placeholder` `placeholder-image`
+
+## Rules
+
+-   Never guess an icon name — verify it exists in the list above before importing.
+-   `-fill` variants are the solid/filled version; the base name is outline.
+-   Fallback: if no suitable icon exists in `@lifesg/react-icons`, use `@mui/icons-material` as a secondary source.
+-   For `IconButton`, always set `aria-label` — the icon alone is not accessible.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/image-button.md b/docs/skills/cc-flagship-ds/resources/v3/components/image-button.md
new file mode 100644
index 0000000000..9258796aad
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/image-button.md
@@ -0,0 +1,14 @@
+# ImageButton
+
+Import: `import { ImageButton } from "@lifesg/react-design-system/image-button"`
+
+## Props
+
+Inherits all props from `HTMLButtonElement`.
+
+| Prop                    | Type      | Default | Description                              |
+| ----------------------- | --------- | ------- | ---------------------------------------- |
+| `imgSrc`                | `string`  | —       | Image source to be rendered              |
+| `selected`              | `boolean` | —       | Shows the selected state                 |
+| `error`                 | `boolean` | —       | Shows the error state                    |
+| `focusableWhenDisabled` | `boolean` | `false` | Keeps the button focusable when disabled |
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/input.md b/docs/skills/cc-flagship-ds/resources/v3/components/input.md
new file mode 100644
index 0000000000..4810f1eb19
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/input.md
@@ -0,0 +1,45 @@
+# Input
+
+Import: `import { Input } from "@lifesg/react-design-system/input"`
+
+## When to use
+
+Use `Input` for standalone inputs that do not need a label or error message — search bars, inline editing, filter fields, or composition contexts where the form layout is provided externally. For all labelled form fields with validation messages, use `Form.Input` instead.
+
+## Variants
+
+| `styleType`            | When to use                                                                                                      |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `"bordered"` (default) | Standard standalone input — provides clear affordance                                                            |
+| `"no-border"`          | Inline editing or search bars embedded in headers/toolbars where a border would conflict with the surrounding UI |
+
+## Props
+
+| Prop          | Type                          | Default      | Description                                                         |
+| ------------- | ----------------------------- | ------------ | ------------------------------------------------------------------- |
+| `spacing`     | `number`                      | —            | Number of characters before a space is inserted — `type="tel"` only |
+| `error`       | `boolean`                     | —            | Show error state styling                                            |
+| `allowClear`  | `boolean`                     | `false`      | Show clear icon button inside the field                             |
+| `onClear`     | `() => void`                  | —            | Called when clear icon is clicked                                   |
+| `styleType`   | `"no-border"` \| `"bordered"` | `"bordered"` | Border style variant                                                |
+| `data-testid` | `string`                      | —            | Test identifier for the component                                   |
+
+Also inherits all props from `HTMLInputElement` — including `type`, `value`, `onChange`, `placeholder`, `disabled`, `readOnly`, `maxLength`, etc.
+
+## Rules
+
+-   Use `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
+-   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
+-   Use `allowClear` for search inputs and optional fields; pair with `onClear` to reset the controlled value.
+-   Set `error={true}` to communicate an invalid state visually — provide a separate error message element in the surrounding layout.
+-   Use `styleType="no-border"` only when the surrounding container or background provides sufficient visual separation.
+-   `Input` is the bare input field with no label or error message wrapper. Use `Form.Input` when a label or validation message is needed.
+-   `spacing` only has effect when `type="tel"`.
+-   `styleType="no-border"` removes the visible border — use only when the surrounding context provides sufficient visual distinction.
+-   `error` drives error-state styling only; there is no built-in error message — pair with external error text if needed.
+
+## Anti-patterns
+
+-   Do not use `Input` inside a form that needs labels or validation messages — use `Form.Input`.
+-   Do not use `spacing` with input types other than `"tel"`.
+-   Do not rely on `Input` alone to surface error messages — it has no built-in error text slot.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/language-switcher.md b/docs/skills/cc-flagship-ds/resources/v3/components/language-switcher.md
new file mode 100644
index 0000000000..bf6b2852ca
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/language-switcher.md
@@ -0,0 +1,17 @@
+# LanguageSwitcher
+
+Import: `import { LanguageSwitcher } from "@lifesg/react-design-system/language-switcher"`
+
+## Props
+
+| Prop               | Type                                       | Default      | Description                                       |
+| ------------------ | ------------------------------------------ | ------------ | ------------------------------------------------- |
+| `variant`          | `"dropdown" \| "link-container"`           | `"dropdown"` | The display variant of the language switcher      |
+| `className`        | `string`                                   | —            | The className of the component for custom styling |
+| `data-testid`      | `string`                                   | —            | The test identifier of the component              |
+| `selectedLanguage` | `"en" \| "zh" \| "ms" \| "ta"`             | `"en"`       | The currently selected language code              |
+| `onSelectLanguage` | `(language: LanguageSwitcherCode) => void` | —            | Called when a language is selected                |
+
+## Rules
+
+-   `LanguageSwitcherCode` is the union of supported language codes: `"en" | "zh" | "ms" | "ta"`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/layout.md b/docs/skills/cc-flagship-ds/resources/v3/components/layout.md
new file mode 100644
index 0000000000..40cccdca8b
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/layout.md
@@ -0,0 +1,138 @@
+# Layout
+
+Import: `import { Layout } from "@lifesg/react-design-system/layout"`
+
+## Composition
+
+```
+Layout.Container type="grid"        ← responsive 12-col grid (desktop) / 8-col (mobile)
+├── Layout.ColDiv xsCols lgCols     ← column span — always set xsCols
+├── Layout.ColDiv xsCols lgCols
+└── Layout.ColDiv xsCols lgCols
+
+Layout.Container type="flex"        ← horizontal flexbox row
+└── {children}
+
+Layout.Container type="flex-column" ← vertical flexbox column
+└── {children}
+```
+
+`Layout.Section` and `Layout.Content` share the same props as `Layout.Container` and can be used in place of it for semantic HTML structure. Never nest `Layout.Container` inside another `Layout.Container`. Always set `xsCols` on every `Layout.ColDiv` — never set only `lgCols`.
+
+-   `Layout.ColDiv` — responsive grid column div
+
+## Usage
+
+```tsx
+import { Layout } from "@lifesg/react-design-system/layout";
+
+<Layout.Container type="grid">
+    <Layout.ColDiv xsCols={8} lgCols={6}>
+        Content
+    </Layout.ColDiv>
+</Layout.Container>;
+```
+
+| `type`          | Use case                         |
+| --------------- | -------------------------------- |
+| `"grid"`        | Responsive column grid (default) |
+| `"flex"`        | Horizontal flexbox layout        |
+| `"flex-column"` | Vertical flexbox layout          |
+
+## Breakpoints
+
+| Breakpoint | Min width | Columns | Gutter | Device                |
+| ---------- | --------- | ------- | ------ | --------------------- |
+| `xxs`      | 0px       | 8       | 16px   | Smallest mobile       |
+| `xs`       | 321px     | 8       | 16px   | Small mobile          |
+| `sm`       | 376px     | 8       | 16px   | Mobile                |
+| `md`       | 481px     | 8       | 16px   | Large mobile / tablet |
+| `lg`       | 769px     | 12      | 32px   | Desktop               |
+| `xl`       | 1201px    | 12      | 32px   | Large desktop         |
+| `xxl`      | 1441px    | 12      | 32px   | Extra-large           |
+
+### Common column widths
+
+| Use case                             | `xsCols` | `lgCols` | `xlCols` |
+| ------------------------------------ | -------- | -------- | -------- |
+| Full width                           | 8        | 12       | —        |
+| Full width (form progress indicator) | 12       | 12       | —        |
+| Narrow content (forms)               | 12       | 9        | 8        |
+| Half-width (2-up cards)              | 8        | 6        | —        |
+| Third-width (3-up cards)             | 8        | 4        | —        |
+| Quarter-width (4-up metrics)         | 8        | 6        | 3        |
+| Sidebar                              | 8        | 3        | —        |
+| Main + sidebar main                  | 8        | 9        | —        |
+
+## Responsive styles
+
+Use `MediaQuery` for media queries in styled-components — not `Breakpoint`. `Breakpoint` contains raw numbers only; `MediaQuery` produces the actual `@media` string.
+
+```tsx
+import { MediaQuery, Spacing } from "@lifesg/react-design-system/theme";
+import styled from "styled-components";
+
+const ResponsiveDiv = styled.div`
+    padding: ${Spacing["spacing-16"]};
+
+    @media ${MediaQuery.MinWidth.lg} {
+        padding: ${Spacing["spacing-32"]};
+    }
+`;
+```
+
+| Token                    | Query type          | When it applies                  |
+| ------------------------ | ------------------- | -------------------------------- |
+| `MediaQuery.MinWidth.md` | `min-width: 481px`  | md and up (tablet+)              |
+| `MediaQuery.MinWidth.lg` | `min-width: 769px`  | lg and up (desktop+)             |
+| `MediaQuery.MaxWidth.md` | `max-width: 768px`  | md and below (mobile only)       |
+| `MediaQuery.MaxWidth.lg` | `max-width: 1200px` | lg and below (non-large-desktop) |
+
+Design mobile-first — define base styles for mobile, then override with `MinWidth` for larger screens.
+
+## Props
+
+### Layout.Container / Layout.Section / Layout.Content
+
+All three extend `React.HTMLAttributes<HTMLDivElement>`.
+
+| Prop          | Type                                | Default  | Description                                                                                                         |
+| ------------- | ----------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
+| `children`    | `React.ReactNode`                   | —        | Child content                                                                                                       |
+| `type`        | `"flex" \| "flex-column" \| "grid"` | `"flex"` | Display style; use `"flex-column"` for standard vertical page content, `"grid"` for the responsive 12-column layout |
+| `stretch`     | `boolean`                           | —        | Stretch to full viewport height                                                                                     |
+| `data-testid` | `string`                            | —        | Test identifier                                                                                                     |
+
+`Layout.Section` and `Layout.Content` share the same interface as `Layout.Container`.
+
+### Layout.ColDiv
+
+Extends `React.HTMLAttributes<HTMLDivElement>`.
+
+| Prop          | Type                         | Default | Description                         |
+| ------------- | ---------------------------- | ------- | ----------------------------------- |
+| `xxsCols`     | `number \| [number, number]` | —       | Columns at xxs breakpoint (≥0px)    |
+| `xsCols`      | `number \| [number, number]` | —       | Columns at xs breakpoint (≥321px)   |
+| `smCols`      | `number \| [number, number]` | —       | Columns at sm breakpoint (≥376px)   |
+| `mdCols`      | `number \| [number, number]` | —       | Columns at md breakpoint (≥481px)   |
+| `lgCols`      | `number \| [number, number]` | —       | Columns at lg breakpoint (≥769px)   |
+| `xlCols`      | `number \| [number, number]` | —       | Columns at xl breakpoint (≥1201px)  |
+| `xxlCols`     | `number \| [number, number]` | —       | Columns at xxl breakpoint (≥1441px) |
+| `data-testid` | `string`                     | —       | Test identifier                     |
+
+Array form `[startCol, endCol]` specifies explicit grid line positions.
+
+## Rules
+
+-   Do not use CSS modules or plain CSS/SCSS — styled-components only.
+-   Use `MediaQuery.MinWidth.*` for responsive styles — never `Breakpoint.*` or hardcoded pixel breakpoints.
+-   Use Spacing tokens for padding and margins — never hardcode pixel values.
+-   Prefix transient styled-component props with `$` to prevent DOM forwarding (e.g. `$variant`).
+
+Grid rules:
+
+-   Always use `type="grid"` on Container for responsive column layouts.
+-   Always specify `xsCols` on ColDiv — mobile-first; never only `lgCols`.
+-   Max `xsCols` is 8 (mobile/tablet), max `lgCols` is 12 (desktop).
+-   Never nest `Layout.Container` inside another `Layout.Container`.
+-   A column span applies to all larger viewports until overridden.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/link-list.md b/docs/skills/cc-flagship-ds/resources/v3/components/link-list.md
new file mode 100644
index 0000000000..d93ef99f80
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/link-list.md
@@ -0,0 +1,89 @@
+# LinkList
+
+Import: `import { LinkList } from "@lifesg/react-design-system/link-list"`
+
+## When to use
+
+Use to present a set of related links — related articles, resources, or quick-access shortcuts. Use `style="small"` for compact contexts such as sidebars or footnotes.
+
+## Sub-components
+
+### LinkListItemProps
+
+| Prop                   | Type                                                   | Default | Description                                        |
+| ---------------------- | ------------------------------------------------------ | ------- | -------------------------------------------------- |
+| `title`                | `string`                                               | —       | Link label — required                              |
+| `description`          | `string`                                               | —       | First-level supporting text below the title        |
+| `secondaryDescription` | `string`                                               | —       | Second-level supporting text below the description |
+| `options`              | `T`                                                    | —       | Custom properties to pass to the item              |
+| `onClick`              | `(event: React.MouseEvent<HTMLAnchorElement>) => void` | —       | Per-item click handler — overrides `onItemClick`   |
+| `data-testid`          | `string`                                               | —       | Test identifier for the item                       |
+
+Inherits `HTMLAnchorElement` attributes (e.g. `href`, `target`).
+
+### Custom labels
+
+| Prop       | Type     | Default       | Description                    |
+| ---------- | -------- | ------------- | ------------------------------ |
+| `viewMore` | `string` | `"View more"` | Label for the show-more button |
+| `viewLess` | `string` | `"View less"` | Label for the show-less button |
+
+## Variants
+
+| `style`     | Usage                                                  |
+| ----------- | ------------------------------------------------------ |
+| `"default"` | Standard size — use in main content areas              |
+| `"small"`   | Compact — use in sidebars, footnotes, or dense layouts |
+
+| `loadMode` | Usage                                                         |
+| ---------- | ------------------------------------------------------------- |
+| `"eager"`  | All items loaded upfront; use `maxShown` to collapse the list |
+| `"lazy"`   | Items fetched on demand; requires `loadMore` and `onLoadMore` |
+
+## Usage
+
+```tsx
+import { LinkList } from "@lifesg/react-design-system/link-list";
+
+<LinkList
+    items={[
+        {
+            title: "Apply for a grant",
+            description: "Find out if you qualify.",
+            href: "/grants/apply",
+        },
+        { title: "Check application status", href: "/grants/status" },
+        { title: "Download forms", href: "/grants/forms" },
+    ]}
+    maxShown={2}
+/>;
+```
+
+## Props
+
+| Prop           | Type                                                                               | Default     | Description                                       |
+| -------------- | ---------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |
+| `items`        | `LinkListItemProps<T>[]`                                                           | —           | Array of link items — required                    |
+| `style`        | `"default"` \| `"small"`                                                           | `"default"` | Text size style                                   |
+| `loadMode`     | `"eager"` \| `"lazy"`                                                              | `"eager"`   | Loading mode for items                            |
+| `maxShown`     | `number`                                                                           | —           | Max items shown before collapse (eager mode only) |
+| `loadMore`     | `boolean`                                                                          | —           | Whether more items can be lazy-loaded (lazy mode) |
+| `onLoadMore`   | `() => void \| Promise<void>`                                                      | —           | Callback when "View more" is clicked (lazy mode)  |
+| `onItemClick`  | `(item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement>) => void` | —           | Component-level click handler for all items       |
+| `customLabels` | `object`                                                                           | —           | Override "View more" / "View less" button labels  |
+| `className`    | `string`                                                                           | —           | Class selector                                    |
+| `data-testid`  | `string`                                                                           | —           | Test identifier                                   |
+
+## Rules
+
+-   Use `maxShown` when the list has many items to avoid overwhelming the user on first load (eager mode).
+-   In `"lazy"` mode, both `loadMore` and `onLoadMore` are required.
+-   `onItemClick` applies to all items; per-item `onClick` in `LinkListItemProps` overrides it for that item.
+-   Use per-item `onClick` when individual items need different handling; use `onItemClick` for a uniform handler across all items.
+-   Use `description` to give users enough context to choose the right link without clicking.
+
+## Anti-patterns
+
+-   Using lazy mode without providing `onLoadMore` — the "View more" button will be non-functional.
+-   Omitting `description` when link titles are ambiguous.
+-   Using LinkList for non-link content — use a list or table instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/local-nav.md b/docs/skills/cc-flagship-ds/resources/v3/components/local-nav.md
new file mode 100644
index 0000000000..fb02440e76
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/local-nav.md
@@ -0,0 +1,95 @@
+# LocalNav
+
+Import: `import { LocalNavMenu, LocalNavDropdown } from "@lifesg/react-design-system/local-nav"`
+
+## When to use
+
+Use to let users navigate between sections on the same page (in-page navigation). Two components exist for different breakpoints — use both together for full responsive coverage.
+
+## Sub-components
+
+`LocalNavMenu`, `LocalNavDropdown`
+
+## Variants
+
+| Component          | Viewport          | Behaviour                                                              |
+| ------------------ | ----------------- | ---------------------------------------------------------------------- |
+| `LocalNavMenu`     | Desktop           | Vertical link list fixed to the left of page content, sticky on scroll |
+| `LocalNavDropdown` | Tablet and mobile | Renders inline, then sticks to top of viewport after scroll            |
+
+## Usage
+
+```tsx
+import {
+    LocalNavMenu,
+    LocalNavDropdown,
+} from "@lifesg/react-design-system/local-nav";
+
+const navItems = [
+    { title: "Overview", id: "overview" },
+    { title: "Eligibility", id: "eligibility" },
+    { title: "How to apply", id: "how-to-apply" },
+];
+
+{
+    /* Desktop */
+}
+<LocalNavMenu
+    items={navItems}
+    selectedItemIndex={activeIndex}
+    onNavItemSelect={(e, item, index) => {}}
+/>;
+
+{
+    /* Mobile / tablet */
+}
+<LocalNavDropdown
+    items={navItems}
+    selectedItemIndex={activeIndex}
+    defaultLabel="Jump to section"
+    onNavItemSelect={(e, item, index) => {}}
+/>;
+```
+
+## Props
+
+### Shared props (both components)
+
+| Prop                | Type                                                                                                  | Default | Description                          |
+| ------------------- | ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------ |
+| `items`             | `LocalNavItemProps[]`                                                                                 | —       | Nav items                            |
+| `selectedItemIndex` | `number`                                                                                              | —       | Index of the currently active item   |
+| `onNavItemSelect`   | `(e: React.MouseEvent \| React.KeyboardEvent, item: LocalNavItemProps, index: number) => void`        | —       | Called when an item is selected      |
+| `renderItem`        | `(item: LocalNavItemProps, renderProps: { selected: boolean, stickied: boolean }) => React.ReactNode` | —       | Custom render function for nav items |
+| `id`                | `string`                                                                                              | —       | Unique identifier                    |
+| `className`         | `string`                                                                                              | —       | Class selector                       |
+| `data-testid`       | `string`                                                                                              | —       | Test identifier                      |
+
+### LocalNavDropdown (additional props)
+
+| Prop           | Type     | Default | Description                                             |
+| -------------- | -------- | ------- | ------------------------------------------------------- |
+| `defaultLabel` | `string` | —       | Label shown before any item is selected — **required**  |
+| `stickyOffset` | `number` | —       | Top offset in pixels when the dropdown sticks on scroll |
+
+### LocalNavItemProps
+
+| Prop    | Type                        | Description                        |
+| ------- | --------------------------- | ---------------------------------- |
+| `title` | `string \| React.ReactNode` | Display label — **required**       |
+| `id`    | `string`                    | Unique identifier for the nav item |
+
+## Rules
+
+-   Use `LocalNavMenu` on desktop and `LocalNavDropdown` on tablet/mobile — render both and show/hide with CSS breakpoints.
+-   Always implement scroll-spy: update `selectedItemIndex` as the user scrolls to keep the active item in sync with the visible section. This is not automatic.
+-   Place `LocalNavMenu` on the left side of the page content area — not above it.
+-   Set `stickyOffset` on `LocalNavDropdown` equal to the height of the fixed Navbar so the dropdown does not overlap it when sticky.
+-   Keep item labels short — long labels cause overflow.
+-   `defaultLabel` is required on `LocalNavDropdown` — it is the placeholder shown before any item is selected.
+
+## Anti-patterns
+
+-   Do not use `LocalNavMenu` on tablet or mobile — use `LocalNavDropdown` instead.
+-   Do not omit scroll-spy logic — without it, `selectedItemIndex` will not reflect the current section.
+-   Do not place `LocalNavMenu` above the content — it must be a left sidebar.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/masthead.md b/docs/skills/cc-flagship-ds/resources/v3/components/masthead.md
new file mode 100644
index 0000000000..46b67fdf42
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/masthead.md
@@ -0,0 +1,14 @@
+# Masthead
+
+Import: `import { Masthead } from "@lifesg/react-design-system/masthead"`
+
+## Props
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | `false` | Stretch to the maximum width of the screen, with fixed padding |
+
+## Rules
+
+-   No mandatory props.
+-   `Masthead` is typically included via the `Navbar` `masthead` prop — use this standalone component only when rendering the masthead outside a Navbar context.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/menu.md b/docs/skills/cc-flagship-ds/resources/v3/components/menu.md
new file mode 100644
index 0000000000..51bd049f72
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/menu.md
@@ -0,0 +1,115 @@
+# Menu
+
+Import: `import { Menu } from "@lifesg/react-design-system/menu"`
+
+## When to use
+
+Use when a trigger element (button, avatar, nav link) should open a floating dropdown with a list of actions or links.
+
+Common use cases:
+
+-   Avatar / user account menu in authenticated dashboards
+-   Navbar link dropdown for sub-navigation
+
+## Sub-components
+
+`Menu`, `Menu.Content`, `Menu.Section`, `Menu.Item`, `Menu.Link`
+
+## Variants
+
+| Use case          | Structure                                                                                                                   |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| User account menu | First section: name + email as `Menu.Item`. Subsequent sections: `Menu.Link` for profile/settings, `Menu.Item` for sign out |
+| Nav link dropdown | Single `Menu.Section` with `Menu.Link` items                                                                                |
+| Action menu       | `Menu.Section` with `Menu.Item` elements and optional `label`                                                               |
+
+## Usage
+
+```tsx
+import { Menu } from "@lifesg/react-design-system/menu";
+import { Button } from "@lifesg/react-design-system/button";
+
+<Menu
+    menuContent={
+        <Menu.Content>
+            <Menu.Section showDivider={false}>
+                <Menu.Link href="/profile">Profile</Menu.Link>
+                <Menu.Link href="/settings">Settings</Menu.Link>
+            </Menu.Section>
+            <Menu.Section>
+                <Menu.Item label="Sign out" onClick={() => {}} />
+            </Menu.Section>
+        </Menu.Content>
+    }
+>
+    <Button.Default styleType="secondary">Account</Button.Default>
+</Menu>;
+```
+
+## Props
+
+### Menu
+
+Inherits `PopoverV2TriggerProps` (except `popoverContent`), plus:
+
+| Prop          | Type                                                                                                                                                                 | Default          | Description                                         |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | --------------------------------------------------- |
+| `menuContent` | `Menu.Content`                                                                                                                                                       | —                | The popover panel — **required**                    |
+| `position`    | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | `"bottom-start"` | Visual position of the menu relative to its trigger |
+| `data-testid` | `string`                                                                                                                                                             | `"menu"`         | Test identifier                                     |
+
+### Menu.Content
+
+Inherits `HTMLAttributes<HTMLDivElement>`, plus:
+
+| Prop          | Type                                                    | Default          | Description                                                   |
+| ------------- | ------------------------------------------------------- | ---------------- | ------------------------------------------------------------- |
+| `children`    | `Menu.Section \| Menu.Section[]`                        | —                | One or more `Menu.Section` elements — **required**            |
+| `overflow`    | `"visible" \| "hidden" \| "clip" \| "scroll" \| "auto"` | —                | Controls content overflow                                     |
+| `maxHeight`   | `number`                                                | —                | Max height in pixels; overflow behavior applies when exceeded |
+| `data-testid` | `string`                                                | `"menu-content"` | Test identifier                                               |
+
+### Menu.Section
+
+Inherits `HTMLAttributes<HTMLDivElement>`, plus:
+
+| Prop          | Type                                                   | Default          | Description                        |
+| ------------- | ------------------------------------------------------ | ---------------- | ---------------------------------- |
+| `children`    | `Menu.Item \| Menu.Link \| (Menu.Item \| Menu.Link)[]` | —                | Menu items or links — **required** |
+| `label`       | `string`                                               | —                | Optional section heading           |
+| `showDivider` | `boolean`                                              | `true`           | Show a divider above the section   |
+| `data-testid` | `string`                                               | `"menu-section"` | Test identifier                    |
+
+### Menu.Item
+
+Inherits `HTMLAttributes<HTMLLIElement>`, plus:
+
+| Prop          | Type                                           | Default       | Description                                                                      |
+| ------------- | ---------------------------------------------- | ------------- | -------------------------------------------------------------------------------- |
+| `label`       | `string`                                       | —             | Primary text for the menu item                                                   |
+| `subLabel`    | `string`                                       | —             | Secondary text shown below the label                                             |
+| `data-testid` | `string`                                       | `"menu-item"` | Test identifier                                                                  |
+| `onClick`     | `(e: React.MouseEvent<HTMLLIElement>) => void` | —             | Called when the item is clicked — inherited from `HTMLAttributes<HTMLLIElement>` |
+
+### Menu.Link
+
+Inherits `HTMLAttributes<HTMLAnchorElement>`, plus:
+
+| Prop          | Type     | Default       | Description     |
+| ------------- | -------- | ------------- | --------------- |
+| `data-testid` | `string` | `"menu-link"` | Test identifier |
+
+## Rules
+
+-   `Menu` wraps a trigger element as its child — the trigger can be any element (e.g. `Avatar`, `Button`, `NavbarLink`).
+-   Pass `Menu.Content` as the `menuContent` prop — not as a child of `Menu`.
+-   Use `Menu.Link` for navigation (href-based); use `Menu.Item` for in-page actions (onClick-based).
+-   Use `Menu.Section` with `showDivider` to visually separate unrelated groups of actions.
+-   For user account menus, always show the user's name and email as the first section.
+-   Use `position` to control which side of the trigger the menu appears on; default `"bottom-start"` suits most cases.
+
+## Anti-patterns
+
+-   Do not pass `Menu.Content` as a child of `Menu` — it must be passed as `menuContent`.
+-   Do not mix navigation links and action items in the same `Menu.Section` without a divider.
+-   Do not use `Menu.Item` for links that navigate to a new page — use `Menu.Link` instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/modal.md b/docs/skills/cc-flagship-ds/resources/v3/components/modal.md
new file mode 100644
index 0000000000..4b79a54efd
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/modal.md
@@ -0,0 +1,114 @@
+# Modal
+
+Import: `import { Modal } from "@lifesg/react-design-system/modal"`
+
+## When to use
+
+Use for focused interactions that interrupt the user's flow — confirmations, detail views, or short multi-field forms that do not warrant a new page.
+
+## Sub-components
+
+`Modal`, `Modal.Box`
+
+## Variants
+
+| Use case            | Notes                                                         |
+| ------------------- | ------------------------------------------------------------- |
+| Confirmation dialog | Title, description, and primary/secondary action buttons      |
+| Detail view         | Informational content with a close button                     |
+| Short form          | Minimal fields only; complex forms belong on a dedicated page |
+
+## Usage
+
+### Confirmation dialog
+
+```tsx
+import { useState } from "react";
+import { Modal } from "@lifesg/react-design-system/modal";
+import { Button } from "@lifesg/react-design-system/button";
+import { Text } from "@lifesg/react-design-system/text";
+
+const ConfirmDeleteModal = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+
+    const handleConfirm = () => {
+        // perform action
+        setShow(false);
+    };
+
+    return (
+        <>
+            <Button.Default onClick={() => setShow(true)}>
+                Delete item
+            </Button.Default>
+
+            <Modal show={show} enableOverlayClick onOverlayClick={handleClose}>
+                <Modal.Box showCloseButton onClose={handleClose}>
+                    <div style={{ padding: "2rem" }}>
+                        <Text.H3 style={{ marginBottom: "0.5rem" }}>
+                            Delete this item?
+                        </Text.H3>
+                        <Text.Body style={{ marginBottom: "1.5rem" }}>
+                            This action cannot be undone.
+                        </Text.Body>
+                        <div style={{ display: "flex", gap: "1rem" }}>
+                            <Button.Default
+                                styleType="secondary"
+                                onClick={handleClose}
+                            >
+                                Cancel
+                            </Button.Default>
+                            <Button.Default onClick={handleConfirm}>
+                                Confirm
+                            </Button.Default>
+                        </div>
+                    </div>
+                </Modal.Box>
+            </Modal>
+        </>
+    );
+};
+```
+
+## Props
+
+### Modal
+
+| Prop                    | Type                                     | Default    | Description                                                                                                              |
+| ----------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `show`                  | `boolean`                                | —          | Controls visibility — **required**                                                                                       |
+| `children`              | `JSX.Element`                            | —          | Modal content; parent element must be a valid HTML element or component that forwards a ref. Fragments are not supported |
+| `animationFrom`         | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Slide-in direction                                                                                                       |
+| `enableOverlayClick`    | `boolean`                                | —          | Allow clicking the overlay to dismiss                                                                                    |
+| `onOverlayClick`        | `() => void`                             | —          | Called when the overlay is clicked; requires `enableOverlayClick: true`                                                  |
+| `zIndex`                | `number`                                 | —          | Custom z-index (useful for stacked modals)                                                                               |
+| `rootComponentId`       | `string`                                 | —          | ID of the element to portal the modal into; defaults to `<body>`                                                         |
+| `dismissKeyboardOnShow` | `boolean`                                | `true`     | Dismiss mobile keyboard when modal opens                                                                                 |
+
+### Modal.Box
+
+| Prop              | Type         | Default | Description                                       |
+| ----------------- | ------------ | ------- | ------------------------------------------------- |
+| `showCloseButton` | `boolean`    | `true`  | Show the close button (×) in the top-right corner |
+| `onClose`         | `() => void` | —       | Called when the close button is clicked           |
+
+## Rules
+
+-   Always include `showCloseButton` on `Modal.Box` — the close button is the minimum required exit mechanism.
+-   `Modal` handles the overlay and animation. Always nest `Modal.Box` (or a custom content container) inside `Modal`.
+-   Fragments are not supported as direct children of `Modal`.
+-   Content inside `Modal.Box` scrolls automatically when it exceeds the screen height.
+-   Use `animationFrom="bottom"` for mobile-friendly sheet-style modals.
+-   Optionally also allow overlay dismissal via `enableOverlayClick` + `onOverlayClick`.
+-   Use Typography components for all text inside the modal — not raw HTML elements.
+-   Keep modal content focused — one task or decision per modal.
+-   Use illustrations (image above the title) for complex messages to reduce cognitive load; skip them for simple confirmations.
+
+## Anti-patterns
+
+-   Do not use a Fragment as a direct child of `Modal` — use a valid HTML element or a component that forwards a ref.
+-   Do not use modals for complex multi-step forms — navigate to a dedicated page instead.
+-   Do not stack modals unless using `zIndex` to manage layering explicitly.
+-   Do not omit `showCloseButton` — users must always have a way to exit the modal.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/navbar.md b/docs/skills/cc-flagship-ds/resources/v3/components/navbar.md
new file mode 100644
index 0000000000..d469355d22
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/navbar.md
@@ -0,0 +1,203 @@
+# Navbar
+
+Import: `import { Navbar } from "@lifesg/react-design-system/navbar"`
+
+## When to use
+
+Place at the top of every page. Required on all pages. Automatically collapses navigation items into a hamburger drawer on mobile.
+
+## Variants
+
+| `layout`    | When to use                                     |
+| ----------- | ----------------------------------------------- |
+| `"default"` | Centered content container — standard pages     |
+| `"stretch"` | Full-width content — must match Footer `layout` |
+
+## Usage
+
+### Complete Navbar with link items, a submenu, and an action button
+
+`NavItemProps` is a discriminated union on `itemType`. The default (no `itemType`) is a link item. Use `itemType: "component"` for custom elements like an avatar with a dropdown.
+
+```tsx
+import { useState } from "react";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+
+const AppNavbar = () => {
+    const [selectedId, setSelectedId] = useState("home");
+
+    return (
+        <Navbar
+            masthead
+            selectedId={selectedId}
+            onItemClick={(item) => item.id && setSelectedId(item.id)}
+            items={{
+                desktop: [
+                    // itemType defaults to "link"
+                    {
+                        id: "home",
+                        children: "Home",
+                        href: "/",
+                    },
+                    {
+                        id: "guides",
+                        children: "Guides",
+                        href: "/guides",
+                        // subMenu items share the same shape as top-level link items
+                        subMenu: [
+                            {
+                                id: "guides-start",
+                                children: "Getting started",
+                                href: "/guides/start",
+                            },
+                            {
+                                id: "guides-api",
+                                children: "API reference",
+                                href: "/guides/api",
+                            },
+                        ],
+                    },
+                    {
+                        // itemType: "component" — renders arbitrary JSX; no href or id needed
+                        itemType: "component",
+                        children: <UserAvatar />,
+                    },
+                ],
+            }}
+            actionButtons={{
+                desktop: [
+                    {
+                        type: "button",
+                        args: { children: "Log in", styleType: "secondary" },
+                    },
+                ],
+            }}
+            resources={{
+                primary: { brandName: "MyService", logoSrc: "/logo.svg" },
+            }}
+        />
+    );
+};
+```
+
+Key points:
+
+-   Omit `itemType` (or set `itemType: "link"`) for standard anchor items.
+-   `subMenu` accepts the same `NavItemCommonProps` shape as top-level items.
+-   `itemType: "component"` items take `children: JSX.Element`; they do not accept `id`, `href`, or `subMenu`.
+-   `selectedId` matches against the `id` field of link items to highlight the active page.
+
+## Props
+
+### Navbar
+
+| Prop                        | Type                                        | Default                    | Description                                       |
+| --------------------------- | ------------------------------------------- | -------------------------- | ------------------------------------------------- |
+| `items`                     | `NavItemsProps<T>`                          | —                          | Navigation link items — **required**              |
+| `resources`                 | `NavbarResourcesProps`                      | —                          | Brand logos (primary and optional secondary)      |
+| `actionButtons`             | `NavbarActionButtonsProps`                  | —                          | Action buttons for desktop and optional mobile    |
+| `selectedId`                | `string`                                    | —                          | ID of the currently active navigation item        |
+| `compress`                  | `boolean`                                   | `false`                    | Display navbar in compressed height               |
+| `fixed`                     | `boolean`                                   | `true`                     | Fix navbar position to the top of the viewport    |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                   | `[]`                       | Methods that should not dismiss the mobile drawer |
+| `hideNavBranding`           | `boolean`                                   | `false`                    | Hide brand logos                                  |
+| `hideNavElements`           | `boolean`                                   | `false`                    | Hide links and action buttons                     |
+| `hideLinkIndicator`         | `boolean`                                   | `false`                    | Hide the selected link indicator                  |
+| `masthead`                  | `boolean`                                   | `true`                     | Render the government masthead above the navbar   |
+| `layout`                    | `"default" \| "stretch"`                    | `"default"`                | Layout type for navbar content                    |
+| `headerLabel`               | `string`                                    | `"Main navigation menu"`   | Accessible label for the navigation header        |
+| `drawerLabel`               | `string`                                    | `"Mobile navigation menu"` | Accessible label for the mobile drawer            |
+| `onBrandClick`              | `(type: BrandType) => void`                 | —                          | Called when a brand icon is clicked               |
+| `onItemClick`               | `(item: NavItemProps<T>) => void`           | —                          | Called when a navigation item is clicked          |
+| `onActionButtonClick`       | `(actionButton: NavbarButtonProps) => void` | —                          | Called when an action button is clicked           |
+| `id`                        | `string`                                    | —                          | Unique identifier                                 |
+| `data-testid`               | `string`                                    | —                          | Test identifier                                   |
+
+### NavItemsProps
+
+| Prop      | Type                | Default | Description                                              |
+| --------- | ------------------- | ------- | -------------------------------------------------------- |
+| `desktop` | `NavItemProps<T>[]` | —       | Nav items for desktop — **required**                     |
+| `mobile`  | `NavItemProps<T>[]` | —       | Nav items for mobile; falls back to `desktop` if omitted |
+
+### NavItemProps
+
+Union of `NavItemLinkProps<T>` and `NavItemComponentProps`.
+
+**NavItemLinkProps**
+
+| Prop       | Type                      | Description        |
+| ---------- | ------------------------- | ------------------ |
+| `itemType` | `"link"`                  | Link-type nav item |
+| `subMenu`  | `NavItemCommonProps<T>[]` | Sub-menu items     |
+
+**NavItemComponentProps**
+
+| Prop       | Type          | Description                              |
+| ---------- | ------------- | ---------------------------------------- |
+| `itemType` | `"component"` | Custom component nav item — **required** |
+| `children` | `JSX.Element` | Custom component to render               |
+
+### NavItemCommonProps
+
+Inherits `TypographyLinkProps`, plus:
+
+| Prop          | Type     | Description                             |
+| ------------- | -------- | --------------------------------------- |
+| `id`          | `string` | Unique identifier; used by `selectedId` |
+| `options`     | `T`      | Additional props passed to the nav item |
+| `data-testid` | `string` | Test identifier                         |
+
+### NavbarActionButtonsProps
+
+| Prop      | Type                  | Default | Description                                                   |
+| --------- | --------------------- | ------- | ------------------------------------------------------------- |
+| `desktop` | `NavbarButtonProps[]` | —       | Action buttons for desktop — **required**                     |
+| `mobile`  | `NavbarButtonProps[]` | —       | Action buttons for mobile; falls back to `desktop` if omitted |
+
+### NavbarButtonProps
+
+| Prop            | Type                                        | Default | Description                                                  |
+| --------------- | ------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `type`          | `"download" \| "button" \| "component"`     | —       | Button type — **required**                                   |
+| `args`          | `ButtonProps \| NavbarButtonComponentProps` | —       | Props for the button                                         |
+| `uncollapsible` | `boolean`                                   | —       | Keep visible on mobile instead of collapsing into the drawer |
+
+### NavbarResourcesProps
+
+| Prop        | Type                  | Default       | Description                                                       |
+| ----------- | --------------------- | ------------- | ----------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | theme default | Primary branding — omit entirely to use the theme's built-in logo |
+| `secondary` | `NavbarBrandingProps` | —             | Secondary branding                                                |
+
+### NavbarBrandingProps
+
+| Prop        | Type     | Description                    |
+| ----------- | -------- | ------------------------------ |
+| `brandName` | `string` | Brand name of the website      |
+| `logoSrc`   | `string` | Image source of the brand logo |
+
+## Rules
+
+-   Always set `masthead` — all government services must display the masthead.
+-   Always provide a meaningful `id` on each `NavItemCommonProps` item — used by `selectedId` to highlight the active page.
+-   `items.desktop` is required; the component crashes without it.
+-   `items.mobile` is optional — falls back to `desktop` if omitted.
+-   `layout` must match the `Footer` `layout` prop; do not mix `"default"` and `"stretch"`.
+-   Limit action buttons to 2–3 maximum.
+-   Use SVG format for brand logos.
+-   When using `fixed`, add corresponding top padding to page content to prevent overlap.
+-   Set `uncollapsible: true` on action buttons that must remain visible on mobile (e.g. avatar).
+-   Use `itemType: "component"` for custom nav elements such as an avatar with a `Menu` dropdown.
+-   Pass `type: "component"` with `args: { render: <Element /> }` for custom action button elements.
+-   `BrandType` is `"primary" | "secondary"` — passed to `onBrandClick`.
+-   The `"download"` button type is pre-programmed for LifeSG purposes.
+-   `NavbarButtonComponentProps` accepts a `render: JSX.Element` field for custom components.
+
+## Anti-patterns
+
+-   Do not omit `masthead` — it is required for government compliance.
+-   Do not supply a custom `resources.primary.logoSrc` unless the service has its own brand logo — omit `resources` to let the theme render its built-in logo.
+-   Do not use `hideNavElements` as a default state — it is for special page states only (e.g. maintenance).
+-   Do not use `fixed: false` unless the layout explicitly requires a non-fixed header.
+-   Do not add more than 3 action buttons — the navbar becomes visually cluttered.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/notification-banner.md b/docs/skills/cc-flagship-ds/resources/v3/components/notification-banner.md
new file mode 100644
index 0000000000..3352c44733
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/notification-banner.md
@@ -0,0 +1,67 @@
+# NotificationBanner
+
+Import: `import { NotificationBanner } from "@lifesg/react-design-system/notification-banner"`
+
+## When to use
+
+Use for notices that must always be visible to the user — maintenance windows, policy changes, mandatory announcements. Unlike Toast, it does not auto-dismiss. Unlike Alert, it applies to the entire page, not a specific section.
+
+## Sub-components
+
+-   `NotificationBanner.Link` — Inherits `TypographyLinkProps`. Use for links within banner content.
+
+## HOC
+
+```ts
+withNotificationBanner(data: NotificationContentAttributes[])
+```
+
+### NotificationContentAttributes
+
+| Prop              | Type                                       | Default | Description                                      |
+| ----------------- | ------------------------------------------ | ------- | ------------------------------------------------ |
+| `type`            | `"text"` \| `"link"`                       | —       | Type of content — required                       |
+| `content`         | `string`                                   | —       | Text content — required                          |
+| `otherAttributes` | `TypographyLinkProps` \| `TypographyProps` | —       | Additional props passed to the content component |
+
+## Usage
+
+```tsx
+import { NotificationBanner } from "@lifesg/react-design-system/notification-banner";
+
+<NotificationBanner dismissible sticky onDismiss={() => {}}>
+    Scheduled maintenance on 1 Feb 2026, 2–4 AM.{" "}
+    <NotificationBanner.Link href="/status">
+        View status
+    </NotificationBanner.Link>
+</NotificationBanner>;
+```
+
+## Props
+
+| Prop                 | Type                                                | Default | Description                                  |
+| -------------------- | --------------------------------------------------- | ------- | -------------------------------------------- |
+| `children`           | `string` \| `JSX.Element` \| `JSX.Element[]`        | —       | Banner content                               |
+| `dismissible`        | `boolean`                                           | —       | Show dismiss button                          |
+| `visible`            | `boolean`                                           | —       | Control visibility externally                |
+| `icon`               | `JSX.Element`                                       | —       | Icon displayed in the banner                 |
+| `sticky`             | `boolean`                                           | —       | Fix banner to top on scroll                  |
+| `onDismiss`          | `() => void`                                        | —       | Called when banner is dismissed              |
+| `onClick`            | `(event: React.MouseEvent<HTMLDivElement>) => void` | —       | Called when banner is clicked                |
+| `maxCollapsedHeight` | `number`                                            | —       | Maximum visible height of content in px      |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>`     | —       | Action button at the bottom of the component |
+
+## Rules
+
+-   Place directly below the Navbar — above all page content.
+-   Use for page-wide or system-wide notices only — not for section-specific messages.
+-   Use `dismissible={false}` for mandatory notices users must not be able to dismiss.
+-   Use `NotificationBanner.Link` for all links within the banner — renders with the external link indicator automatically.
+-   Use `maxCollapsedHeight` for long notices to avoid overwhelming the layout.
+-   Use the `withNotificationBanner` HOC for banner content driven from a backend or external data source.
+
+## Anti-patterns
+
+-   Using NotificationBanner for section-specific messages — use Alert instead.
+-   Using raw anchor tags inside banner content — use `NotificationBanner.Link`.
+-   Placing the banner below page content — it must sit directly below the Navbar.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/pagination.md b/docs/skills/cc-flagship-ds/resources/v3/components/pagination.md
new file mode 100644
index 0000000000..d244b6dbd3
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/pagination.md
@@ -0,0 +1,104 @@
+# Pagination
+
+Import: `import { Pagination } from "@lifesg/react-design-system/pagination"`
+
+## When to use
+
+Use below lists or tables when content is split across multiple pages.
+
+## Usage
+
+### Basic pagination (1-based indexing)
+
+```tsx
+import { useState } from "react";
+import { Pagination } from "@lifesg/react-design-system/pagination";
+
+const ResultsList = () => {
+    const totalItems = 243;
+    const pageSize = 10;
+    // activePage is 1-based: page 1 is the first page, not page 0
+    const [activePage, setActivePage] = useState(1);
+
+    return (
+        <>
+            <MyResultsTable
+                items={results.slice(
+                    (activePage - 1) * pageSize,
+                    activePage * pageSize
+                )}
+            />
+            <Pagination
+                totalItems={totalItems}
+                pageSize={pageSize}
+                activePage={activePage}
+                onPageChange={(page) => setActivePage(page)} // page is 1-based
+                showFirstAndLastNav
+            />
+        </>
+    );
+};
+```
+
+### With page size changer
+
+`onPageSizeChange` receives `(page, pageSize)` — reset to page 1 when size changes.
+
+```tsx
+const [activePage, setActivePage] = useState(1);
+const [pageSize, setPageSize] = useState(10);
+
+<Pagination
+    totalItems={500}
+    pageSize={pageSize}
+    activePage={activePage}
+    onPageChange={(page) => setActivePage(page)}
+    onPageSizeChange={(page, size) => {
+        setPageSize(size);
+        setActivePage(page); // component resets to page 1 on size change
+    }}
+    showFirstAndLastNav
+    showPageSizeChanger
+/>;
+```
+
+## Props
+
+| Prop                  | Type                                       | Default        | Description                                                                            |
+| --------------------- | ------------------------------------------ | -------------- | -------------------------------------------------------------------------------------- |
+| `totalItems`          | `number`                                   | —              | Total number of items across all pages — **required**                                  |
+| `activePage`          | `number`                                   | —              | Currently active page (1-based) — **required**                                         |
+| `pageSize`            | `number`                                   | `10`           | Number of items per page                                                               |
+| `pageSizeOptions`     | `PageSizeItemProps<T>[]`                   | `[10, 20, 30]` | Options for the page size changer dropdown                                             |
+| `showFirstAndLastNav` | `boolean`                                  | `false`        | Show buttons to jump to the first and last pages                                       |
+| `showPageSizeChanger` | `boolean`                                  | `false`        | Show a page size changer dropdown (desktop only); selected option overrides `pageSize` |
+| `onPageChange`        | `(page: number) => void`                   | —              | Called when a page is selected                                                         |
+| `onPageSizeChange`    | `(page: number, pageSize: number) => void` | —              | Called when the page size changes                                                      |
+| `id`                  | `string`                                   | —              | Unique identifier                                                                      |
+| `className`           | `string`                                   | —              | Class selector                                                                         |
+| `data-testid`         | `string`                                   | —              | Test identifier                                                                        |
+
+## PageSizeItemProps
+
+| Prop    | Type     | Description                        |
+| ------- | -------- | ---------------------------------- |
+| `value` | `number` | Page size value                    |
+| `label` | `string` | Display label (e.g. `"10 / page"`) |
+
+## Rules
+
+-   `activePage` is 1-based — the first page is `1`, not `0`.
+-   Always provide `onPageChange` to update `activePage` when the user changes page.
+-   Provide `onPageSizeChange` when `showPageSizeChanger` is enabled.
+-   Always center-align pagination below the results list.
+-   Place pagination below the results — never above.
+-   When total pages exceed 7, the component automatically shows an ellipsis — no additional props needed.
+-   The page size changer is only visible in the desktop viewport.
+-   The selected option in the page size changer takes precedence over `pageSize`.
+
+## Anti-patterns
+
+-   Do not use `showFirstAndLastNav` and `showPageSizeChanger` together unless the dataset is large enough to warrant both — avoid cluttering the interface with excessive controls.
+-   Do not left- or right-align pagination.
+-   Do not place pagination above the results.
+-   Do not use `pageSize` and a `pageSizeOptions` selection simultaneously without handling `onPageSizeChange` — the changer selection overrides `pageSize`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/pill.md b/docs/skills/cc-flagship-ds/resources/v3/components/pill.md
new file mode 100644
index 0000000000..e29eab5f5b
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/pill.md
@@ -0,0 +1,58 @@
+# Pill
+
+Import: `import { Pill } from "@lifesg/react-design-system/pill"`
+
+## When to use
+
+Use to communicate a status — application state, approval outcome, or processing stage. For categories, filters, or tagging, use Tag instead.
+
+## Variants
+
+| `type`      | Usage                                                    |
+| ----------- | -------------------------------------------------------- |
+| `"outline"` | Subtle, secondary label — default for most uses          |
+| `"solid"`   | Higher emphasis — use when the status needs to stand out |
+
+| `colorType` | Semantic use                  |
+| ----------- | ----------------------------- |
+| `"green"`   | Success, active, approved     |
+| `"red"`     | Error, rejected, danger       |
+| `"yellow"`  | Warning, pending, in progress |
+| `"blue"`    | Informational                 |
+| `"grey"`    | Neutral, inactive, draft      |
+| `"primary"` | Theme primary color           |
+| `"black"`   | Default, no semantic meaning  |
+
+## Usage
+
+```tsx
+import { Pill } from "@lifesg/react-design-system/pill";
+
+<Pill type="outline" colorType="green">
+    Approved
+</Pill>;
+```
+
+## Props
+
+Inherits all `HTMLDivElement` attributes.
+
+| Prop        | Type                                                                                   | Default   | Description                             |
+| ----------- | -------------------------------------------------------------------------------------- | --------- | --------------------------------------- |
+| `type`      | `"solid"` \| `"outline"`                                                               | —         | Display style — required                |
+| `colorType` | `"black"` \| `"grey"` \| `"green"` \| `"yellow"` \| `"red"` \| `"blue"` \| `"primary"` | `"black"` | Color variant                           |
+| `icon`      | `JSX.Element`                                                                          | —         | Icon displayed to the left of the label |
+| `children`  | `string`                                                                               | —         | Label text                              |
+
+## Rules
+
+-   Use color semantically — do not use `"red"` for non-error states.
+-   Use `"solid"` sparingly — reserve for statuses that need emphasis.
+-   Keep label text to 1–2 words — text does not wrap inside a pill.
+-   Pill is a static, non-interactive label — it does not accept `onClick`. Use Tag with `interactive` for clickable labels.
+
+## Anti-patterns
+
+-   Using Pill for categories or filters — use Tag instead.
+-   Using `"red"` for non-error states.
+-   Labels longer than 2–3 words — text overflow is not handled.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/popover.md b/docs/skills/cc-flagship-ds/resources/v3/components/popover.md
new file mode 100644
index 0000000000..830c57144e
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/popover.md
@@ -0,0 +1,72 @@
+# Popover
+
+Import: `import { Popover, withPopover } from "@lifesg/react-design-system/popover"`
+
+## When to use
+
+Use to show supplementary information when a user interacts with (clicks or hovers over) an element. On mobile, the popover renders as a bottom modal sheet.
+
+## Variants
+
+Two usage patterns are available:
+
+-   **`withPopover` HOC** — wraps an existing element to add popover behaviour.
+-   **`Popover` component** — a standalone popover that you control manually.
+
+## Usage
+
+```tsx
+import { withPopover } from "@lifesg/react-design-system/popover";
+import { Button } from "@lifesg/react-design-system/button";
+
+{
+    /* Preferred: HOC wraps an existing element */
+}
+{
+    withPopover(
+        <Button.Default styleType="link">What is this?</Button.Default>,
+        { content: "This field requires your NRIC number.", trigger: "click" }
+    );
+}
+```
+
+## Props
+
+### withPopover
+
+```ts
+withPopover(component: JSX.Element, options: PopoverHOCOptionsProps): JSX.Element
+```
+
+**PopoverHOCOptionsProps**
+
+| Prop          | Type                    | Default   | Description                    |
+| ------------- | ----------------------- | --------- | ------------------------------ |
+| `content`     | `string \| JSX.Element` | —         | Popover content — **required** |
+| `trigger`     | `"click" \| "hover"`    | `"click"` | How the popover is triggered   |
+| `id`          | `string`                | —         | Unique identifier              |
+| `data-testid` | `string`                | —         | Test identifier                |
+
+**PopoverHOCProps (on the wrapped component)**
+
+| Prop               | Type         | Description                       |
+| ------------------ | ------------ | --------------------------------- |
+| `onPopoverAppear`  | `() => void` | Called when the popover appears   |
+| `onPopoverDismiss` | `() => void` | Called when the popover dismisses |
+
+### Popover
+
+| Prop            | Type                    | Default | Description                                                       |
+| --------------- | ----------------------- | ------- | ----------------------------------------------------------------- |
+| `children`      | `string \| JSX.Element` | —       | Popover content — **required**                                    |
+| `visible`       | `boolean`               | `false` | Controls visibility                                               |
+| `onMobileClose` | `() => void`            | —       | Called when the user dismisses the popover (modal form) on mobile |
+| `id`            | `string`                | —       | Unique identifier                                                 |
+| `className`     | `string`                | —       | Class selector                                                    |
+| `data-testid`   | `string`                | —       | Test identifier                                                   |
+
+## Rules
+
+-   Use `withPopover` for most cases — it handles trigger logic automatically.
+-   Use the `Popover` component directly when you need full manual control over visibility.
+-   On mobile viewports the Popover renders as a bottom modal sheet — provide `onMobileClose` to handle dismissal.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/progress-indicator.md b/docs/skills/cc-flagship-ds/resources/v3/components/progress-indicator.md
new file mode 100644
index 0000000000..810e663bfb
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/progress-indicator.md
@@ -0,0 +1,48 @@
+# ProgressIndicator
+
+Import: `import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator"`
+
+## When to use
+
+Use in multi-step forms or wizards to show the user's position within the flow.
+
+## Usage
+
+```tsx
+import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
+
+const steps = [
+    { label: "Personal details" },
+    { label: "Documents" },
+    { label: "Review" },
+];
+
+<ProgressIndicator
+    steps={steps}
+    currentIndex={1}
+    displayExtractor={(step) => step.label}
+/>;
+```
+
+## Props
+
+| Prop               | Type                  | Default | Description                                         |
+| ------------------ | --------------------- | ------- | --------------------------------------------------- |
+| `steps`            | `T[]`                 | —       | Array of step objects — **required**                |
+| `currentIndex`     | `number`              | `0`     | Zero-based index of the current step — **required** |
+| `displayExtractor` | `(item: T) => string` | —       | Derives the display label from each step object     |
+| `id`               | `string`              | —       | Unique identifier                                   |
+| `className`        | `string`              | —       | Class selector                                      |
+| `data-testid`      | `string`              | —       | Test identifier                                     |
+
+## Rules
+
+-   `currentIndex` is zero-based — the first step is `0`.
+-   Always provide `displayExtractor` when `steps` contains objects — without it, step labels will not render.
+-   Update `currentIndex` as the user moves between steps.
+-   Do not use `fadeColor` or `fadePosition` — these props are deprecated and have no effect in v3.
+
+## Anti-patterns
+
+-   Do not use ProgressIndicator on single-step pages.
+-   Do not use it as a general progress bar for loading states — use a loading spinner or skeleton instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/radio-button.md b/docs/skills/cc-flagship-ds/resources/v3/components/radio-button.md
new file mode 100644
index 0000000000..3bf863c5db
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/radio-button.md
@@ -0,0 +1,69 @@
+# RadioButton
+
+Import: `import { RadioButton } from "@lifesg/react-design-system/radio-button"`
+
+## When to use
+
+-   User must choose exactly one option from a small set (typically 2–5 options).
+-   Options are mutually exclusive.
+
+Prefer `Toggle` with `type="radio"` over bare `RadioButton` when building form inputs that need a visible card-style label container.
+
+## Variants
+
+| `displaySize` | When to use                    |
+| ------------- | ------------------------------ |
+| `"default"`   | Standard use                   |
+| `"small"`     | Dense layouts, inline controls |
+
+## Usage
+
+```tsx
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+<div role="radiogroup" aria-labelledby="group-label">
+    <label>
+        <RadioButton
+            name="plan"
+            value="basic"
+            checked={selected === "basic"}
+            onChange={(e) => {}}
+        />
+        Basic
+    </label>
+    <label>
+        <RadioButton
+            name="plan"
+            value="pro"
+            checked={selected === "pro"}
+            onChange={(e) => {}}
+        />
+        Pro
+    </label>
+</div>;
+```
+
+## Props
+
+Inherits all props from `React.InputHTMLAttributes<HTMLInputElement>` (e.g. `name`, `value`, `disabled`, `aria-*`).
+
+| Prop                    | Type                                               | Default     | Description                                                              |
+| ----------------------- | -------------------------------------------------- | ----------- | ------------------------------------------------------------------------ |
+| `displaySize`           | `"default"` \| `"small"`                           | `"default"` | Display size of the component                                            |
+| `checked`               | `boolean`                                          | —           | Controlled checked state                                                 |
+| `disabled`              | `boolean`                                          | —           | Disables the radio button — action is not executable                     |
+| `focusableWhenDisabled` | `boolean`                                          | —           | Keeps component focusable when disabled, preventing all user interaction |
+| `onChange`              | `(e: React.ChangeEvent<HTMLInputElement>) => void` | —           | Called when this radio button becomes selected                           |
+
+## Rules
+
+-   Always wrap a group in `role="radiogroup"` with a visible group label (`aria-labelledby`).
+-   Always set the same `name` on all buttons in a group for native radio behaviour.
+-   Always pair each button with a visible label — wrap in `<label>` or use `aria-label`.
+-   Never render a single `RadioButton` in isolation — radio inputs only make sense in groups.
+
+## Anti-patterns
+
+-   Do not use `RadioButton` for binary yes/no questions in forms — use `Toggle` with `type="yes"` / `type="no"`.
+-   Do not use `RadioButton` when multiple selections are allowed — use `Checkbox` instead.
+-   Do not omit the `name` prop — without it, browsers cannot enforce mutual exclusivity natively.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/schedule.md b/docs/skills/cc-flagship-ds/resources/v3/components/schedule.md
new file mode 100644
index 0000000000..54b98f0b2f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/schedule.md
@@ -0,0 +1,72 @@
+# Schedule
+
+Import: `import { Schedule } from "@lifesg/react-design-system/schedule"`
+
+## Sub-components
+
+-   `ScheduleEntityProps` — a service/resource row with its time slots
+-   `ScheduleSlotProps` — a single bookable timeslot cell
+-   `SchedulePopoverProps` — popover config for a slot
+
+## Props
+
+| Prop                    | Type                                                     | Default         | Description                                                                                |
+| ----------------------- | -------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------ |
+| `date` \*               | `string`                                                 | —               | Current displayed date (`YYYY-MM-DD`)                                                      |
+| `serviceData` \*        | `ScheduleEntityProps[]`                                  | —               | Data for each service row and its time slots                                               |
+| `onPreviousDayClick` \* | `(currentDate: string) => void`                          | —               | Called when the left arrow on the date navigator is clicked                                |
+| `onNextDayClick` \*     | `(currentDate: string) => void`                          | —               | Called when the right arrow on the date navigator is clicked                               |
+| `id`                    | `string`                                                 | —               | The identifier of the component                                                            |
+| `className`             | `string`                                                 | —               | The class selector of the component                                                        |
+| `data-testid`           | `string`                                                 | —               | The test identifier of the component                                                       |
+| `view`                  | `"day" \| "week"`                                        | `"day"`         | The view mode for the schedule component                                                   |
+| `emptyContentMessage`   | `string`                                                 | —               | Message shown when `serviceData` has no rows                                               |
+| `loading`               | `boolean`                                                | `false`         | Shows a loading animation when true                                                        |
+| `minTime`               | `string`                                                 | `"00:00"`       | Start time of the schedule (`HH:mm`)                                                       |
+| `maxTime`               | `string`                                                 | `"23:59"`       | End time of the schedule (`HH:mm`)                                                         |
+| `initialScrollTime`     | `string`                                                 | —               | Initial scroll position time (`HH:mm`); defaults to `minTime`                              |
+| `minDate`               | `string`                                                 | —               | Minimum navigable date (`YYYY-MM-DD`, inclusive)                                           |
+| `maxDate`               | `string`                                                 | —               | Maximum navigable date (`YYYY-MM-DD`, inclusive)                                           |
+| `blockedMessage`        | `string`                                                 | `"Unavailable"` | Custom text for blocked slots; truncated with ellipsis if slot is too narrow               |
+| `onCalendarDateSelect`  | `(currentDate: string) => void`                          | —               | Called when a date is picked from the dropdown calendar                                    |
+| `onTodayClick`          | `() => void`                                             | —               | Called when the Today button is clicked                                                    |
+| `onSlotClick`           | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | —               | Called when a timeslot cell is clicked                                                     |
+| `onClickHiddenSlots`    | `(hiddenServices: string[]) => void`                     | —               | Called in week view when the hidden-slots button is clicked; provides hidden service names |
+
+`*` = required
+
+## ScheduleEntityProps
+
+| Prop       | Type                  | Description                          |
+| ---------- | --------------------- | ------------------------------------ |
+| `name` \*  | `string`              | The name of the service or resource  |
+| `slots` \* | `ScheduleSlotProps[]` | Array of time slots for this service |
+| `id`       | `string`              | Identifier for the service entity    |
+
+## ScheduleSlotProps
+
+| Prop            | Type                                                     | Description                                                 |
+| --------------- | -------------------------------------------------------- | ----------------------------------------------------------- |
+| `startTime` \*  | `string`                                                 | Start time (`HH:mm`)                                        |
+| `endTime` \*    | `string`                                                 | End time (`HH:mm`)                                          |
+| `status` \*     | `"booked" \| "available" \| "blocked" \| "pending"`      | Determines slot visual style                                |
+| `date` \*       | `string`                                                 | Date for this timeslot (`YYYY-MM-DD`)                       |
+| `id`            | `string`                                                 | Identifier; passed to `onClick` and `onSlotClick` callbacks |
+| `capacity`      | `number`                                                 | Maximum capacity for this timeslot                          |
+| `booked`        | `number`                                                 | Number of current bookings                                  |
+| `customPopover` | `SchedulePopoverProps`                                   | Popover config for the slot                                 |
+| `onClick`       | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | Per-slot click callback                                     |
+
+## SchedulePopoverProps
+
+| Prop         | Type                                               | Default | Description                                        |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------- |
+| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover              |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered in the popover                    |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Hover delay in milliseconds (`hover` trigger only) |
+| `offset`     | `number`                                           | —       | Offset in px applied to the popover                |
+
+## Rules
+
+-   `date`, `serviceData`, `onPreviousDayClick`, and `onNextDayClick` are mandatory.
+-   Avoid combining a per-slot `onClick` with `customPopover` using `trigger: "click"` on the same slot — they conflict.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/sidenav.md b/docs/skills/cc-flagship-ds/resources/v3/components/sidenav.md
new file mode 100644
index 0000000000..e0027e0821
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/sidenav.md
@@ -0,0 +1,190 @@
+# Sidenav
+
+Import: `import { Sidenav } from "@lifesg/react-design-system/sidenav"`
+
+## When to use
+
+Use for section-level navigation in admin dashboards or portals. The Sidenav sits fixed to the left and fills the full viewport height below the Navbar, which is always present at the top.
+
+Do not use for:
+
+-   Consumer-facing pages (use Navbar nav items or LocalNav instead)
+-   Simple single-section apps
+
+## Sub-components
+
+```
+Sidenav                          ← fixed sidebar container
+├── Sidenav.Group                ← logical section (optional separator)
+│   ├── Sidenav.Item             ← top-level nav link (no children)
+│   ├── Sidenav.DrawerItem       ← expandable item with sub-links
+│   │   ├── Sidenav.DrawerSubitem
+│   │   └── Sidenav.DrawerSubitem
+│   └── Sidenav.Item
+└── Sidenav.Group
+    └── Sidenav.Item
+```
+
+`Sidenav.Group` is the only valid direct child of `Sidenav`. Use `Sidenav.Item` for leaf links, `Sidenav.DrawerItem` when a nav entry has sub-items. `Sidenav.DrawerSubitem` can only nest inside `Sidenav.DrawerItem`.
+
+## Variants
+
+| Depth    | Components used                              |
+| -------- | -------------------------------------------- |
+| 1 level  | `Sidenav` → `Sidenav.Group` → `Sidenav.Item` |
+| 2 levels | + `Sidenav.DrawerItem`                       |
+| 3 levels | + `Sidenav.DrawerSubitem`                    |
+
+## Usage
+
+### 2-group, 3-item nav with full nesting
+
+```tsx
+import { CalendarIcon } from "@lifesg/react-icons/calendar";
+import { DocIcon } from "@lifesg/react-icons/doc";
+import { Square2x2Icon } from "@lifesg/react-icons/square-2x2";
+import { useState } from "react";
+import { Sidenav } from "@lifesg/react-design-system/sidenav";
+
+const AdminSidenav = () => {
+    const [selectedId, setSelectedId] = useState("dashboard");
+
+    return (
+        <Sidenav>
+            {/* Group 1 — top-level items with no sub-items: onClick fires */}
+            <Sidenav.Group separator>
+                <Sidenav.Item
+                    id="dashboard"
+                    title="Dashboard"
+                    icon={<Square2x2Icon />}
+                    selected={selectedId === "dashboard"}
+                    onClick={(id) => setSelectedId(id)}
+                />
+            </Sidenav.Group>
+
+            {/* Group 2 — Reports has sub-items so onClick is omitted;
+                clicking it opens the drawer instead */}
+            <Sidenav.Group>
+                <Sidenav.Item
+                    id="reports"
+                    title="Reports"
+                    icon={<DocIcon />}
+                    selected={
+                        selectedId === "monthly-reports" ||
+                        selectedId === "annual-reports"
+                    }
+                >
+                    {/* DrawerItem with no children: onClick fires */}
+                    <Sidenav.DrawerItem
+                        id="monthly-reports"
+                        title="Monthly reports"
+                        onClick={(id) => setSelectedId(id)}
+                    />
+                    {/* DrawerItem with children: onClick is omitted */}
+                    <Sidenav.DrawerItem
+                        id="annual-reports"
+                        title="Annual reports"
+                        selected={selectedId === "annual-reports"}
+                    >
+                        <Sidenav.DrawerSubitem
+                            id="annual-summary"
+                            title="Summary"
+                            onClick={(id) => setSelectedId(id)}
+                        />
+                        <Sidenav.DrawerSubitem
+                            id="annual-detail"
+                            title="Detailed breakdown"
+                            onClick={(id) => setSelectedId(id)}
+                        />
+                    </Sidenav.DrawerItem>
+                </Sidenav.Item>
+                <Sidenav.Item
+                    id="bookings"
+                    title="Bookings"
+                    icon={<CalendarIcon />}
+                    selected={selectedId === "bookings"}
+                    onClick={(id) => setSelectedId(id)}
+                />
+            </Sidenav.Group>
+        </Sidenav>
+    );
+};
+```
+
+Key wiring notes:
+
+-   `onClick` on `Sidenav.Item` is only attached when the item has **no** `children` — if children are present, clicking opens the drawer instead and `onClick` is ignored.
+-   The same rule applies to `Sidenav.DrawerItem`: omit `onClick` when it wraps `DrawerSubitem` children.
+-   Track `selectedId` in parent state; pass `selected={selectedId === id}` down to whichever level is active.
+-   `separator` on `Sidenav.Group` draws a dividing line below that group.
+
+## Props
+
+### Sidenav
+
+| Prop          | Type              | Default     | Description                                         |
+| ------------- | ----------------- | ----------- | --------------------------------------------------- |
+| `children`    | `React.ReactNode` | —           | One or more `Sidenav.Group` elements — **required** |
+| `fixed`       | `boolean`         | `true`      | Fix the sidenav to the left of the viewport         |
+| `aria-label`  | `string`          | `"Sidebar"` | Accessible label for the sidenav                    |
+| `id`          | `string`          | —           | Unique identifier                                   |
+| `className`   | `string`          | —           | Class selector                                      |
+| `data-testid` | `string`          | —           | Test identifier                                     |
+
+### Sidenav.Group
+
+| Prop          | Type              | Default | Description                                        |
+| ------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`    | `React.ReactNode` | —       | One or more `Sidenav.Item` elements — **required** |
+| `separator`   | `boolean`         | —       | Show a bottom divider below the group              |
+| `aria-label`  | `string`          | —       | Accessible label describing the category of items  |
+| `id`          | `string`          | —       | Unique identifier                                  |
+| `className`   | `string`          | —       | Class selector                                     |
+| `data-testid` | `string`          | —       | Test identifier                                    |
+
+### Sidenav.Item
+
+| Prop          | Type                   | Default | Description                                                  |
+| ------------- | ---------------------- | ------- | ------------------------------------------------------------ |
+| `title`       | `string`               | —       | Display label — **required**                                 |
+| `icon`        | `React.ReactNode`      | —       | Icon displayed above the label — **required**                |
+| `children`    | `React.ReactNode`      | —       | One or more `Sidenav.DrawerItem` elements                    |
+| `selected`    | `boolean`              | —       | Mark this item as the active selection                       |
+| `onClick`     | `(id: string) => void` | —       | Called when clicked; only fires if the item has no sub-items |
+| `id`          | `string`               | —       | Unique identifier                                            |
+| `className`   | `string`               | —       | Class selector                                               |
+| `data-testid` | `string`               | —       | Test identifier                                              |
+
+### Sidenav.DrawerItem
+
+| Prop          | Type                   | Default | Description                                                  |
+| ------------- | ---------------------- | ------- | ------------------------------------------------------------ |
+| `title`       | `string`               | —       | Display label — **required**                                 |
+| `children`    | `React.ReactNode`      | —       | One or more `Sidenav.DrawerSubitem` elements                 |
+| `onClick`     | `(id: string) => void` | —       | Called when clicked; only fires if the item has no sub-items |
+| `id`          | `string`               | —       | Unique identifier                                            |
+| `className`   | `string`               | —       | Class selector                                               |
+| `data-testid` | `string`               | —       | Test identifier                                              |
+
+### Sidenav.DrawerSubitem
+
+| Prop          | Type                   | Default | Description                  |
+| ------------- | ---------------------- | ------- | ---------------------------- |
+| `title`       | `string`               | —       | Display label — **required** |
+| `onClick`     | `(id: string) => void` | —       | Called when item is clicked  |
+| `id`          | `string`               | —       | Unique identifier            |
+| `className`   | `string`               | —       | Class selector               |
+| `data-testid` | `string`               | —       | Test identifier              |
+
+## Rules
+
+-   Always provide `icon` on `Sidenav.Item` — it is required for the collapsed state.
+-   Maximum depth is 3 levels: `Item` → `DrawerItem` → `DrawerSubitem`.
+-   Use `Sidenav.Group` with `separator` to visually separate unrelated sections.
+-   `onClick` on `Sidenav.Item` and `Sidenav.DrawerItem` only fires when the item has no children — do not attach click handlers to items that have sub-items.
+
+## Anti-patterns
+
+-   Do not omit `icon` on `Sidenav.Item` — the component is designed around icon + label.
+-   Do not nest deeper than 3 levels.
+-   Do not use `Sidenav` on consumer-facing pages — it is suited to admin portals.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/singpass-button.md b/docs/skills/cc-flagship-ds/resources/v3/components/singpass-button.md
new file mode 100644
index 0000000000..cbe26bc11d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/singpass-button.md
@@ -0,0 +1,15 @@
+# SingpassButton
+
+Import: `import { SingpassButton } from "@lifesg/react-design-system/singpass-button"`
+
+## Props
+
+Inherits all props from `HTMLButtonElement`.
+
+| Prop        | Type                             | Default          | Description                |
+| ----------- | -------------------------------- | ---------------- | -------------------------- |
+| `styleType` | `"red-filled" \| "white-filled"` | `"white-filled"` | Visual style of the button |
+
+## Rules
+
+-   Do not custom style — Singpass branding guidelines require using the component as-is.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/smart-app-banner.md b/docs/skills/cc-flagship-ds/resources/v3/components/smart-app-banner.md
new file mode 100644
index 0000000000..ad4ca844d0
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/smart-app-banner.md
@@ -0,0 +1,29 @@
+# SmartAppBanner
+
+Import: `import { SmartAppBanner } from "@lifesg/react-design-system/smart-app-banner"`
+
+## Props
+
+| Prop           | Type                         | Default              | Description                                                                     |
+| -------------- | ---------------------------- | -------------------- | ------------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                    | Whether the SmartAppBanner is displayed                                         |
+| `href` \*      | `string`                     | —                    | Destination URL when the banner is clicked                                      |
+| `content` \*   | `SmartAppBannerContentProps` | —                    | Content of the banner                                                           |
+| `onDismiss` \* | `() => void`                 | —                    | Called when the banner is dismissed                                             |
+| `offset`       | `number`                     | `0`                  | Sets the `top` value in px                                                      |
+| `icon`         | `string`                     | Life SG app icon URL | URL for the app icon                                                            |
+| `animated`     | `boolean`                    | `false`              | Adds a slide-down animation on appearance                                       |
+| `ref`          | `React.Ref<HTMLDivElement>`  | —                    | Ref for the banner element                                                      |
+| `onClick`      | `() => void`                 | —                    | Additional behaviour on press (non-dismiss area); default opens link in new tab |
+
+`*` = required
+
+## SmartAppBannerContentProps
+
+| Prop                 | Type     | Default | Description                                                                    |
+| -------------------- | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*           | `string` | —       | Display title                                                                  |
+| `buttonLabel` \*     | `string` | —       | Button text                                                                    |
+| `buttonAriaLabel` \* | `string` | —       | Aria label for the button                                                      |
+| `numberOfStars` \*   | `number` | —       | Stars to display; decimals accepted; `NaN` or negative hides the stars display |
+| `message`            | `string` | —       | Description below the title                                                    |
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/tab.md b/docs/skills/cc-flagship-ds/resources/v3/components/tab.md
new file mode 100644
index 0000000000..83f0a08b7d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/tab.md
@@ -0,0 +1,85 @@
+# Tab
+
+Import: `import { Tab } from "@lifesg/react-design-system/tab"`
+
+## When to use
+
+Use to switch between related views within the same context — not for navigating between pages.
+
+## Sub-components
+
+```
+Tab                          ← tab strip container, manages active state
+├── Tab.Item                 ← individual tab (title + panel content)
+├── Tab.Item
+└── Tab.Item
+```
+
+All direct children of `Tab` must be `Tab.Item`. `Tab.Item` renders both the tab label and its associated panel content.
+
+## Variants
+
+| Mode                         | When to use                                |
+| ---------------------------- | ------------------------------------------ |
+| Uncontrolled (default)       | Tab manages its own active state           |
+| Controlled (`currentActive`) | Parent needs to control which tab is shown |
+
+## Props
+
+### Tab
+
+| Prop                     | Type                                     | Default | Description                                                   |
+| ------------------------ | ---------------------------------------- | ------- | ------------------------------------------------------------- |
+| `children`               | `JSX.Element \| JSX.Element[]`           | —       | `Tab.Item` elements — **required**                            |
+| `initialActive`          | `number`                                 | `0`     | Index of the initially active tab (uncontrolled)              |
+| `currentActive`          | `number`                                 | —       | Controlled active tab index; disables internal state when set |
+| `onTabClick`             | `(title: string, index: number) => void` | —       | Called when a tab selector is clicked                         |
+| `fullWidthIndicatorLine` | `boolean`                                | —       | Extend the bottom border to the full container width          |
+| `fadeColor`              | `string[] \| FadeColorSet`               | —       | Scroll fade color on mobile; set to match page background     |
+| `headingLevel`           | `number`                                 | `2`     | Heading level for tab labels                                  |
+| `id`                     | `string`                                 | —       | Unique identifier                                             |
+| `className`              | `string`                                 | —       | Class selector                                                |
+| `data-testid`            | `string`                                 | —       | Test identifier                                               |
+
+### Tab.Item
+
+| Prop          | Type                           | Default | Description                                  |
+| ------------- | ------------------------------ | ------- | -------------------------------------------- |
+| `title`       | `string`                       | —       | Tab selector label — **required**            |
+| `children`    | `JSX.Element \| JSX.Element[]` | —       | Tab panel content — **required**             |
+| `titleAddon`  | `TitleAddonProps`              | —       | Custom addon displayed next to the tab label |
+| `width`       | `string`                       | —       | Custom width of the tab selector             |
+| `id`          | `string`                       | —       | Unique identifier                            |
+| `className`   | `string`                       | —       | Class selector                               |
+| `data-testid` | `string`                       | —       | Test identifier                              |
+
+### TitleAddonProps
+
+| Prop       | Type                | Default   | Description                                 |
+| ---------- | ------------------- | --------- | ------------------------------------------- |
+| `content`  | `JSX.Element`       | —         | The addon element (e.g. a `Badge`)          |
+| `position` | `"left" \| "right"` | `"right"` | Position of the addon relative to the label |
+
+### FadeColorSet
+
+| Prop    | Type       | Description                 |
+| ------- | ---------- | --------------------------- |
+| `left`  | `string[]` | Color(s) for the left fade  |
+| `right` | `string[]` | Color(s) for the right fade |
+
+## Rules
+
+-   When `currentActive` is set, the component is in controlled mode — you must update it via `onTabClick`.
+-   Tab order is determined by the order of `Tab.Item` children.
+-   Keep tab labels short — labels truncate beyond 20 characters on tablet and mobile.
+-   Use controlled mode (`currentActive` + `onTabClick`) only when the parent needs to sync tab state with external logic (e.g. URL params, deep links).
+-   Use `titleAddon` with a `Badge` to show counts or status indicators on tab labels.
+-   Set `headingLevel` to match the component's position in the page heading hierarchy.
+-   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
+
+## Anti-patterns
+
+-   Do not use tabs for page-level navigation — use Navbar or LocalNav instead.
+-   Do not use more than 5–6 tabs — consider a different navigation pattern for many sections.
+-   Do not use long labels — they truncate on mobile and tablet.
+-   Do not set `currentActive` without also providing `onTabClick` — the tab state will be stuck.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/tag.md b/docs/skills/cc-flagship-ds/resources/v3/components/tag.md
new file mode 100644
index 0000000000..d7446e6e14
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/tag.md
@@ -0,0 +1,71 @@
+# Tag
+
+Import: `import { Tag } from "@lifesg/react-design-system/tag"`
+
+## When to use
+
+Use to label categories, apply filters, or tag items. Can be static or interactive — set `interactive` to render as a button for toggleable filters or selectable categories. For status labels, use Pill instead.
+
+## Variants
+
+| `type`      | Usage                                                 |
+| ----------- | ----------------------------------------------------- |
+| `"outline"` | Subtle, secondary label — default for most uses       |
+| `"solid"`   | Higher emphasis — use when the tag needs to stand out |
+
+| `colorType` | Semantic use                  |
+| ----------- | ----------------------------- |
+| `"green"`   | Success, active, approved     |
+| `"red"`     | Error, rejected, danger       |
+| `"yellow"`  | Warning, pending, in progress |
+| `"blue"`    | Informational                 |
+| `"grey"`    | Neutral, inactive, draft      |
+| `"primary"` | Theme primary color           |
+| `"black"`   | Default, no semantic meaning  |
+
+## Usage
+
+```tsx
+import { Tag } from "@lifesg/react-design-system/tag";
+
+{
+    /* Static category tag */
+}
+<Tag type="outline" colorType="blue">
+    Health
+</Tag>;
+
+{
+    /* Interactive filter tag */
+}
+<Tag type="solid" colorType="primary" interactive onClick={() => {}}>
+    Finance
+</Tag>;
+```
+
+## Props
+
+Inherits all `HTMLElement` attributes.
+
+| Prop           | Type                                                                                   | Default   | Description                                  |
+| -------------- | -------------------------------------------------------------------------------------- | --------- | -------------------------------------------- |
+| `type`         | `"solid"` \| `"outline"`                                                               | —         | Display style — required                     |
+| `colorType`    | `"black"` \| `"grey"` \| `"green"` \| `"yellow"` \| `"red"` \| `"blue"` \| `"primary"` | `"black"` | Color variant                                |
+| `icon`         | `JSX.Element`                                                                          | —         | Icon displayed alongside the label           |
+| `iconPosition` | `"left"` \| `"right"`                                                                  | `"left"`  | Position of the icon relative to the label   |
+| `interactive`  | `boolean`                                                                              | `false`   | Renders as a `<button>` — use with `onClick` |
+| `children`     | `string`                                                                               | —         | Label text                                   |
+
+## Rules
+
+-   When `interactive` is `true`, the component renders as a `<button>` with an extended touch target on mobile.
+-   Always pair `interactive` with `onClick` — interactive tags are larger on mobile to extend the touch target.
+-   Use color semantically — do not use `"red"` for non-error states.
+-   Keep label text short — text does not wrap inside a tag.
+-   Use Tag for categories, filters, and tagging — use Pill for statuses.
+
+## Anti-patterns
+
+-   Using Tag for status labels — use Pill instead.
+-   Setting `interactive` without providing an `onClick` handler.
+-   Using `"red"` for non-error states.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/text-list.md b/docs/skills/cc-flagship-ds/resources/v3/components/text-list.md
new file mode 100644
index 0000000000..e027238d46
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/text-list.md
@@ -0,0 +1,44 @@
+# TextList
+
+Import: `import { TextList } from "@lifesg/react-design-system/text-list"`
+
+## When to use
+
+Use for semantic list content. For navigation links, use `LinkList` instead.
+
+## Sub-components
+
+| Sub-component | Renders | When to use                                  |
+| ------------- | ------- | -------------------------------------------- |
+| `TextList.Ul` | `<ul>`  | Unordered list — items without a sequence    |
+| `TextList.Ol` | `<ol>`  | Ordered list — numbered or lettered sequence |
+
+## Props
+
+### TextList.Ul
+
+| Prop           | Type                                                    | Default  | Description                                                        |
+| -------------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------------ |
+| `children`     | `JSX.Element \| JSX.Element[]`                          | —        | `<li>` elements                                                    |
+| `bulletType`   | `"disc" \| "circle" \| "square" \| "none" \| ReactNode` | `"disc"` | Bullet style — pass a ReactNode (e.g. an icon) for a custom bullet |
+| `size`         | `TypographySizeType`                                    | —        | Typography size scale                                              |
+| `bottomMargin` | `number`                                                | —        | Bottom margin in px                                                |
+| `data-testid`  | `string`                                                | —        | Test identifier                                                    |
+
+### TextList.Ol
+
+| Prop               | Type                                          | Default     | Description                                       |
+| ------------------ | --------------------------------------------- | ----------- | ------------------------------------------------- |
+| `children`         | `JSX.Element \| JSX.Element[]`                | —           | `<li>` elements                                   |
+| `counterType`      | `"decimal" \| "lower-alpha" \| "lower-roman"` | `"decimal"` | Counter style                                     |
+| `counterSeparator` | `string`                                      | —           | Character after the counter (e.g. `"."` or `")"`) |
+| `reversed`         | `boolean`                                     | `false`     | Count downward                                    |
+| `start`            | `number`                                      | `1`         | Starting counter value                            |
+| `size`             | `TypographySizeType`                          | —           | Typography size scale                             |
+| `bottomMargin`     | `number`                                      | —           | Bottom margin in px                               |
+| `data-testid`      | `string`                                      | —           | Test identifier                                   |
+
+## Rules
+
+-   Children must be `<li>` elements.
+-   Use `bulletType` as a `ReactNode` to render a custom icon bullet — the icon is automatically marked `aria-hidden`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar-week.md b/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar-week.md
new file mode 100644
index 0000000000..868a56a006
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar-week.md
@@ -0,0 +1,67 @@
+# TimeSlotBarWeek
+
+Import: `import { TimeSlotBarWeek } from "@lifesg/react-design-system/time-slot-bar-week"`
+
+## Sub-components
+
+-   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
+-   `TimeSlot` — shape of each slot in the `slots` map
+-   `TimeSlotBarStyleAttributes` — visual styling for a slot
+
+## Props
+
+| Prop                   | Type                                         | Default      | Description                                                                                        |
+| ---------------------- | -------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------- |
+| `slots` \*             | `{ [date: string]: TimeSlot[] }`             | —            | Time slots keyed by date (`YYYY-MM-DD`); falls back to disabled pattern if not provided for a date |
+| `className`            | `string`                                     | —            | Class selector for the component                                                                   |
+| `data-testid`          | `string`                                     | —            | The test identifier for the component                                                              |
+| `id`                   | `string`                                     | —            | The unique identifier for the component                                                            |
+| `variant`              | `"flexible" \| "fixed"`                      | `"flexible"` | The variant of the rendered timeslot bars                                                          |
+| `interval`             | `number`                                     | `30`         | Duration each cell represents in minutes                                                           |
+| `startTime`            | `string`                                     | —            | Minimum time displayed (`HH:mm`; full hours only, e.g. `"08:00"`)                                  |
+| `endTime`              | `string`                                     | —            | Maximum time displayed (`HH:mm`; full hours only)                                                  |
+| `minDate`              | `string`                                     | —            | Minimum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
+| `maxDate`              | `string`                                     | —            | Maximum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
+| `disabledDates`        | `string[]`                                   | —            | Dates to disable (`YYYY-MM-DD`)                                                                    |
+| `value`                | `string`                                     | —            | Currently selected date (`YYYY-MM-DD`)                                                             |
+| `currentCalendarDate`  | `string`                                     | —            | Initial date visible in the week view (`YYYY-MM-DD`)                                               |
+| `maxVisibleCellHeight` | `number`                                     | —            | Maximum combined cell height before truncation                                                     |
+| `showNavigationHeader` | `boolean`                                    | `true`       | Shows month/year dropdown and navigation arrows                                                    |
+| `enableSelection`      | `boolean`                                    | `true`       | Specifies if a date can be selected                                                                |
+| `onChange`             | `(value: string) => void`                    | —            | Called when the user selects a day; returns `YYYY-MM-DD`                                           |
+| `onWeekDisplayChange`  | `(value: YearMonthWeekDisplay) => void`      | —            | Called when the visible week changes                                                               |
+| `onSlotClick`          | `(date: string, timeSlot: TimeSlot) => void` | —            | Called when a timeslot is clicked                                                                  |
+
+`*` = required
+
+## YearMonthWeekDisplay
+
+| Prop    | Type                                                | Description                                            |
+| ------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
+| `year`  | `number`                                            | Visible year                                           |
+| `month` | `number`                                            | Visible month (1–12)                                   |
+
+## TimeSlot
+
+| Prop              | Type                         | Description                        |
+| ----------------- | ---------------------------- | ---------------------------------- |
+| `id` \*           | `string`                     | Unique identifier of the slot      |
+| `startTime` \*    | `string`                     | Start time (`HH:mm`)               |
+| `endTime` \*      | `string`                     | End time (`HH:mm`)                 |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                     |
+| `label`           | `string`                     | Text content within the slot cell  |
+| `clickable`       | `boolean`                    | Whether the slot cell is clickable |
+
+## TimeSlotBarStyleAttributes
+
+| Prop                 | Type                     | Default     | Description                                       |
+| -------------------- | ------------------------ | ----------- | ------------------------------------------------- |
+| `backgroundColor` \* | `string`                 | —           | The color of the slot                             |
+| `styleType`          | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
+| `backgroundColor2`   | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
+
+## Rules
+
+-   `slots` is mandatory.
+-   `startTime`/`endTime` on the component must be full hours (e.g. `"08:00"`, `"13:00"`).
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar.md b/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar.md
new file mode 100644
index 0000000000..0474d1f581
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar.md
@@ -0,0 +1,42 @@
+# TimeSlotBar
+
+Import: `import { TimeSlotBar } from "@lifesg/react-design-system/time-slot-bar"`
+
+## Props
+
+| Prop                     | Type                           | Default     | Description                                                                 |
+| ------------------------ | ------------------------------ | ----------- | --------------------------------------------------------------------------- |
+| `slots` \*               | `TimeSlot[]`                   | —           | Time slots for the bar                                                      |
+| `startTime` \*           | `string`                       | —           | Start time of the bar in `HH:mm` (minutes in 15-min blocks: 00, 15, 30, 45) |
+| `endTime` \*             | `string`                       | —           | End time of the bar in `HH:mm` (minutes in 15-min blocks)                   |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —           | Called when a time slot is selected                                         |
+| `variant`                | `"default" \| "minified"`      | `"default"` | Display variant                                                             |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —           | Default style when no slot is specified for a time period                   |
+| `initialScrollTime`      | `string`                       | —           | Initial scroll offset time in `HH:mm`                                       |
+| `roundInitialScrollTime` | `boolean`                      | `true`      | Rounds `initialScrollTime` to the nearest 30-min interval                   |
+| `onClick`                | `() => void`                   | —           | Called when the bar is selected (useful when no slots specified)            |
+| `className`              | `string`                       | —           | Class selector of the component                                             |
+| `data-testid`            | `string`                       | —           | Test identifier of the component                                            |
+
+`*` = required
+
+## TimeSlot
+
+| Prop              | Type                         | Default | Description                                |
+| ----------------- | ---------------------------- | ------- | ------------------------------------------ |
+| `id` \*           | `string`                     | —       | Unique identifier of the slot              |
+| `startTime` \*    | `string`                     | —       | Slot start time in `HH:mm` (15-min blocks) |
+| `endTime` \*      | `string`                     | —       | Slot end time in `HH:mm` (15-min blocks)   |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | —       | Styling for this slot                      |
+| `label`           | `string`                     | —       | Text content within the slot cell          |
+| `clickable`       | `boolean`                    | —       | Whether the slot cell is clickable         |
+
+## TimeSlotBarStyleAttributes
+
+| Prop                    | Type                     | Default     | Description                                                            |
+| ----------------------- | ------------------------ | ----------- | ---------------------------------------------------------------------- |
+| `backgroundColor` \*    | `string`                 | —           | Slot color                                                             |
+| `styleType`             | `"default" \| "stripes"` | `"default"` | Style type of the slot                                                 |
+| `backgroundColor2`      | `string`                 | —           | Secondary color; used with `styleType="stripes"`                       |
+| `hoverBackgroundColor`  | `string`                 | —           | Background on hover; only when `clickable`                             |
+| `hoverBackgroundColor2` | `string`                 | —           | Secondary hover color for `styleType="stripes"`; only when `clickable` |
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-week-view.md b/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-week-view.md
new file mode 100644
index 0000000000..3bd1c452c0
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-week-view.md
@@ -0,0 +1,63 @@
+# TimeSlotWeekView
+
+Import: `import { TimeSlotWeekView } from "@lifesg/react-design-system/time-slot-week-view"`
+
+## Sub-components
+
+-   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
+-   `TimeSlot` — shape of each slot in the `slots` map
+-   `TimeSlotBarStyleAttributes` — visual styling for a slot
+
+## Props
+
+| Prop                   | Type                                         | Default | Description                                                                                        |
+| ---------------------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------- |
+| `slots` \*             | `{ [date: string]: TimeSlot[] }`             | —       | Time slots keyed by date (`YYYY-MM-DD`); falls back to disabled pattern if not provided for a date |
+| `className`            | `string`                                     | —       | Class selector for the component                                                                   |
+| `data-testid`          | `string`                                     | —       | The test identifier for the component                                                              |
+| `id`                   | `string`                                     | —       | The unique identifier for the component                                                            |
+| `minDate`              | `string`                                     | —       | Minimum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
+| `maxDate`              | `string`                                     | —       | Maximum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
+| `disabledDates`        | `string[]`                                   | —       | Dates to disable (`YYYY-MM-DD`)                                                                    |
+| `value`                | `string`                                     | —       | Currently selected date (`YYYY-MM-DD`)                                                             |
+| `currentCalendarDate`  | `string`                                     | —       | Initial date visible in the week view (`YYYY-MM-DD`)                                               |
+| `showNavigationHeader` | `boolean`                                    | `true`  | Shows month/year dropdown and navigation arrows                                                    |
+| `enableSelection`      | `boolean`                                    | `true`  | Specifies if a date can be selected                                                                |
+| `onChange`             | `(value: string) => void`                    | —       | Called when the user selects a day; returns `YYYY-MM-DD`                                           |
+| `onWeekDisplayChange`  | `(value: YearMonthWeekDisplay) => void`      | —       | Called when the visible week changes                                                               |
+| `onSlotClick`          | `(date: string, timeSlot: TimeSlot) => void` | —       | Called when a timeslot is clicked                                                                  |
+
+`*` = required
+
+## YearMonthWeekDisplay
+
+| Prop    | Type                                                | Description                                            |
+| ------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
+| `year`  | `number`                                            | Visible year                                           |
+| `month` | `number`                                            | Visible month (1–12)                                   |
+
+## TimeSlot
+
+| Prop              | Type                         | Description                                                       |
+| ----------------- | ---------------------------- | ----------------------------------------------------------------- |
+| `id` \*           | `string`                     | Unique identifier of the slot                                     |
+| `startTime` \*    | `string`                     | Start time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45) |
+| `endTime` \*      | `string`                     | End time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45)   |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                                                    |
+| `label`           | `string`                     | Text content within the slot cell                                 |
+| `clickable`       | `boolean`                    | Whether the slot cell is clickable                                |
+
+## TimeSlotBarStyleAttributes
+
+| Prop             | Type                     | Default     | Description                                       |
+| ---------------- | ------------------------ | ----------- | ------------------------------------------------- |
+| `color` \*       | `string`                 | —           | The color of the slot                             |
+| `styleType`      | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
+| `secondaryColor` | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
+
+## Rules
+
+-   `slots` is mandatory.
+-   `TimeSlot` minutes must be in 15-minute blocks (00, 15, 30, 45).
+-   `TimeSlotBarStyleAttributes` uses `color`/`secondaryColor` — not `backgroundColor`/`backgroundColor2` as in `TimeSlotBarWeek`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/timeline.md b/docs/skills/cc-flagship-ds/resources/v3/components/timeline.md
new file mode 100644
index 0000000000..14abfcb7d5
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/timeline.md
@@ -0,0 +1,59 @@
+# Timeline
+
+Import: `import { Timeline } from "@lifesg/react-design-system/timeline"`
+
+## When to use
+
+Use to communicate a process, application history, or sequence of steps. Use the `numeric` variant for numbered step-by-step instructions.
+
+## Sub-components
+
+### TimelineItemProps
+
+| Prop       | Type                                                                                                         | Default | Description                                            |
+| ---------- | ------------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------ |
+| `title`    | `string`                                                                                                     | —       | Item title — required                                  |
+| `content`  | `JSX.Element`                                                                                                | —       | Item content — required                                |
+| `variant`  | `"completed" \| "current" \| "upcoming-active" \| "upcoming-inactive" \| "numeric" \| "error" \| "disabled"` | —       | Visual state of the item indicator                     |
+| `statuses` | `PillProps[]`                                                                                                | —       | Status pills shown alongside the item (max 2 rendered) |
+
+## Variants
+
+| `variant`             | Usage                                |
+| --------------------- | ------------------------------------ |
+| `"completed"`         | Step or event is done                |
+| `"current"`           | Step currently in progress           |
+| `"upcoming-active"`   | Next actionable step                 |
+| `"upcoming-inactive"` | Future step, not yet actionable      |
+| `"error"`             | Step has an error                    |
+| `"disabled"`          | Step is not available                |
+| `"numeric"`           | Numbered step — use for instructions |
+
+## Props
+
+| Prop                         | Type                  | Default | Description                                              |
+| ---------------------------- | --------------------- | ------- | -------------------------------------------------------- |
+| `items`                      | `TimelineItemProps[]` | —       | Array of timeline items — required                       |
+| `title`                      | `string`              | —       | Section title shown above the timeline                   |
+| `className`                  | `string`              | —       | Class selector                                           |
+| `startCol`                   | `number`              | —       | CSS grid column start (when wrapped in a grid container) |
+| `colSpan`                    | `number`              | —       | CSS grid column span (when wrapped in a grid container)  |
+| `counterOffset`              | `number`              | `0`     | Starting offset for `numeric` variant indicators         |
+| `data-testid`                | `string`              | —       | Test identifier                                          |
+| `data-base-indicator-testid` | `string`              | —       | Test identifier for item indicators                      |
+
+## Rules
+
+-   The first item defaults to `variant="current"` and subsequent items default to `variant="upcoming-active"` when `variant` is not specified.
+-   Only a maximum of 2 `statuses` pills will render per item regardless of how many are provided.
+-   `counterOffset` shifts the numeric counter: if `offset=2`, the first item shows `3`.
+-   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
+-   Use `counterOffset` when showing a partial sequence (e.g. steps 3–5 of a larger flow).
+-   Use `statuses` with `PillProps` — follow Pill color semantics (see `pill.md`).
+-   Use `"numeric"` variant consistently across all items in an instruction list — do not mix with status variants.
+
+## Anti-patterns
+
+-   Mixing `"numeric"` and status variants in the same timeline — choose one paradigm per use case.
+-   Providing more than 2 status pills per item — only 2 will render.
+-   Using Timeline for non-sequential content — use a list or table instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/timetable.md b/docs/skills/cc-flagship-ds/resources/v3/components/timetable.md
new file mode 100644
index 0000000000..46ecf46701
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/timetable.md
@@ -0,0 +1,82 @@
+# Timetable
+
+Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
+
+## Props
+
+| Prop                      | Type                            | Default   | Description                                                               |
+| ------------------------- | ------------------------------- | --------- | ------------------------------------------------------------------------- |
+| `date` \*                 | `string`                        | —         | Current displayed date in `YYYY-MM-DD` format                             |
+| `rowData` \*              | `TimeTableRowData[]`            | —         | Data used to render each unique row                                       |
+| `loading` \*              | `boolean`                       | —         | Shows loading animation while true                                        |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void` | —         | Called when left arrow is clicked on the date navigator                   |
+| `onNextDayClick` \*       | `(currentDate: string) => void` | —         | Called when right arrow is clicked on the date navigator                  |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void` | —         | Called when a calendar date is picked in the dropdown                     |
+| `minTime`                 | `string`                        | `"00:00"` | Start time of the timetable in `HH:mm` format                             |
+| `maxTime`                 | `string`                        | `"23:00"` | End time of the timetable in `HH:mm` format                               |
+| `minDate`                 | `string`                        | —         | Minimum navigation date in `YYYY-MM-DD` format (inclusive)                |
+| `maxDate`                 | `string`                        | —         | Maximum navigation date in `YYYY-MM-DD` format (inclusive)                |
+| `initialScrollTime`       | `string`                        | —         | Initial scroll offset time in `HH:mm`                                     |
+| `roundInitialScrollTime`  | `boolean`                       | `true`    | Rounds `initialScrollTime` to the nearest 15-min grid interval            |
+| `totalRecords`            | `number`                        | —         | Total record count; if omitted, the total records section is not rendered |
+| `emptyContentMessage`     | `string`                        | —         | Message shown when `totalRecords=0` or `rowData=[]`                       |
+| `showCurrentDateAsToday`  | `boolean`                       | —         | Shows today's date as "Today"                                             |
+| `showDateAsShortForm`     | `boolean`                       | —         | Shows the date text in short form                                         |
+| `onRefresh`               | `() => void`                    | —         | Called when refresh button is clicked; if omitted, button is not rendered |
+| `onPage`                  | `() => void`                    | —         | Called when pagination occurs                                             |
+| `id`                      | `string`                        | —         | Identifier of the component                                               |
+| `className`               | `string`                        | —         | Class selector of the component                                           |
+| `data-testid`             | `string`                        | —         | Test identifier of the component                                          |
+
+`*` = required
+
+## TimeTableRowData
+
+| Prop                    | Type                                                       | Default   | Description                                               |
+| ----------------------- | ---------------------------------------------------------- | --------- | --------------------------------------------------------- |
+| `name` \*               | `string`                                                   | —         | Row header name                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                   | —         | Array of row cells; sorted by start time automatically    |
+| `id`                    | `string`                                                   | —         | Row identifier; passed to `onRowNameClick`                |
+| `subtitle`              | `string \| JSX.Element`                                    | —         | Row header subtitle                                       |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                    | —         | Custom popover for the row header                         |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                    | —         | Custom popover for auto-filled blocked cells              |
+| `rowMinTime`            | `string`                                                   | `minTime` | Row start time; blocked cells are auto-filled before this |
+| `rowMaxTime`            | `string`                                                   | `maxTime` | Row end time; blocked cells are auto-filled after this    |
+| `onRowNameClick`        | `(rowData: TimeTableRowData, e: React.MouseEvent) => void` | —         | Called when the row header name is clicked                |
+
+## TimeTableRowCellData
+
+| Prop                  | Type                                                            | Default | Description                                                        |
+| --------------------- | --------------------------------------------------------------- | ------- | ------------------------------------------------------------------ |
+| `startTime` \*        | `string`                                                        | —       | Cell start time in `HH:mm` (duration must be a multiple of 15 min) |
+| `endTime` \*          | `string`                                                        | —       | Cell end time in `HH:mm` (duration must be a multiple of 15 min)   |
+| `id`                  | `string`                                                        | —       | Cell identifier; passed to `onClick`                               |
+| `status`              | `"filled" \| "blocked" \| "default" \| "pending" \| "disabled"` | —       | Cell status, determines rendering style                            |
+| `title`               | `string`                                                        | —       | Title shown for this cell                                          |
+| `subtitle`            | `string`                                                        | —       | Subtitle shown for this cell                                       |
+| `customPopover`       | `TimeTablePopoverProps`                                         | —       | Custom popover for the cell                                        |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                  | —       | Custom style attributes; falls back to default row bar colors      |
+| `onClick`             | `(data: TimeTableRowCellData, e: React.MouseEvent) => void`     | —       | Called when the cell is clicked                                    |
+
+## TimeTablePopoverProps
+
+| Prop         | Type                                               | Default | Description                            |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------- |
+| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover  |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Popover content                        |
+| `delay`      | `{ open: number, close: number }`                  | —       | Hover delay in ms (hover trigger only) |
+| `offset`     | `number`                                           | —       | Offset in px for the popover           |
+
+## TimeTableCellStyleAttributes
+
+| Prop                      | Type                                           | Description                                                                      |
+| ------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------- |
+| `backgroundColor`         | `string \| (props: ThemeStyleProps) => string` | Main background color                                                            |
+| `altBackgroundColor`      | `string \| (props: ThemeStyleProps) => string` | Alternate background color for striped displays                                  |
+| `hoverBackgroundColor`    | `string \| (props: ThemeStyleProps) => string` | Background on hover                                                              |
+| `altHoverBackgroundColor` | `string \| (props: ThemeStyleProps) => string` | Alternate background on hover                                                    |
+| `styleType`               | `"default" \| "solid" \| "stripes"`            | Display style; defaults to cell type (blocked/pending = striped, others = solid) |
+
+## Rules
+
+-   Do not combine `onClick` on a cell with a `trigger="click"` popover on the same cell — they conflict.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/toast.md b/docs/skills/cc-flagship-ds/resources/v3/components/toast.md
new file mode 100644
index 0000000000..3ddb0924f1
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/toast.md
@@ -0,0 +1,67 @@
+# Toast
+
+Import: `import { Toast } from "@lifesg/react-design-system/toast"`
+
+## When to use
+
+Use for brief, non-blocking feedback on system or user actions — "Changes saved", "Upload complete", "Request failed". Does not replace persistent callouts — use Alert for section-specific notices.
+
+## Sub-components
+
+### ActionButtonProps
+
+| Prop      | Type         | Default | Description                                         |
+| --------- | ------------ | ------- | --------------------------------------------------- |
+| `label`   | `string`     | —       | Label of the action button — required               |
+| `onClick` | `() => void` | —       | Called when the action button is clicked — required |
+
+## Variants
+
+| `type`      | When to use                   |
+| ----------- | ----------------------------- |
+| `"success"` | Action completed successfully |
+| `"error"`   | Action failed or system error |
+| `"warning"` | Completed with caution        |
+| `"info"`    | Neutral status update         |
+
+## Usage
+
+```tsx
+import { Toast } from "@lifesg/react-design-system/toast";
+
+<Toast
+    type="success"
+    label="Changes saved successfully."
+    autoDismiss
+    onDismiss={() => {}}
+/>;
+```
+
+## Props
+
+Inherits all `HTMLDivElement` attributes.
+
+| Prop              | Type                                          | Default     | Description                                      |
+| ----------------- | --------------------------------------------- | ----------- | ------------------------------------------------ |
+| `type`            | `"success" \| "warning" \| "error" \| "info"` | `"success"` | Status type — required                           |
+| `label`           | `string \| JSX.Element`                       | —           | Toast content — required                         |
+| `title`           | `string \| JSX.Element`                       | —           | Optional heading above the label                 |
+| `autoDismiss`     | `boolean`                                     | `false`     | Auto-dismiss after `autoDismissTime`             |
+| `autoDismissTime` | `number`                                      | `4000`      | Duration in ms before auto-dismiss               |
+| `onDismiss`       | `() => void`                                  | —           | Called when Toast is dismissed (by user or auto) |
+| `fixed`           | `boolean`                                     | `true`      | Fix to top of viewport on scroll                 |
+| `actionButton`    | `ActionButtonProps`                           | —           | Optional action button rendered in the Toast     |
+
+## Rules
+
+-   `autoDismissTime` only takes effect when `autoDismiss` is `true`.
+-   Use `autoDismiss` for non-critical updates — keep visible for errors that require user action.
+-   Use `actionButton` for recoverable errors (retry, undo).
+-   Use `title` + `label` together when the toast message has a heading and a description.
+-   Do not use Toast for persistent notices — use Alert or NotificationBanner instead.
+
+## Anti-patterns
+
+-   Using Toast for errors that require user action without providing an `actionButton`.
+-   Setting `autoDismiss` on error toasts — errors should remain visible until the user dismisses them.
+-   Replacing Alert with Toast for section-specific inline messages.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/toggle.md b/docs/skills/cc-flagship-ds/resources/v3/components/toggle.md
new file mode 100644
index 0000000000..6136e67c45
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/toggle.md
@@ -0,0 +1,120 @@
+# Toggle
+
+Import: `import { Toggle } from "@lifesg/react-design-system/toggle"`
+
+## When to use
+
+-   Form inputs for boolean choices, single/multi-option selection, and yes/no questions.
+-   Preferred over bare `Checkbox` and `RadioButton` when building form inputs that need a card-style visible label container.
+
+## Variants
+
+| `type`       | When to use                                                  |
+| ------------ | ------------------------------------------------------------ |
+| `"checkbox"` | Multiple options can be selected or deselected independently |
+| `"radio"`    | Exactly one option must be selected — cannot be deselected   |
+| `"yes"`      | Binary yes answer — use with a paired `type="no"` Toggle     |
+| `"no"`       | Binary no answer — use with a paired `type="yes"` Toggle     |
+
+| `styleType`   | When to use                                                  |
+| ------------- | ------------------------------------------------------------ |
+| `"default"`   | Standard bordered card                                       |
+| `"no-border"` | Borderless — for contexts where the border is visually noisy |
+
+| `type`       | Behaviour                            |
+| ------------ | ------------------------------------ |
+| `"checkbox"` | Allows deselection — standard toggle |
+| `"radio"`    | No deselection — radio-style         |
+| `"yes"`      | No deselection — tick indicator      |
+| `"no"`       | No deselection — cross indicator     |
+
+## Usage
+
+```tsx
+import { Toggle } from "@lifesg/react-design-system/toggle";
+import { Form } from "@lifesg/react-design-system/form";
+
+{/* Checkbox group */}
+<Form.Label>Select your preferences</Form.Label>
+<Toggle type="checkbox" indicator checked={emailChecked} onChange={(e) => {}}>
+  Email notifications
+</Toggle>
+<Toggle type="checkbox" indicator checked={smsChecked} onChange={(e) => {}}>
+  SMS notifications
+</Toggle>
+```
+
+## Props
+
+| Prop                    | Type                                                   | Default      | Description                                                              |
+| ----------------------- | ------------------------------------------------------ | ------------ | ------------------------------------------------------------------------ |
+| `children`              | `string`                                               | —            | Main selector label — **required**                                       |
+| `type`                  | `"checkbox" \| "radio" \| "yes" \| "no"`               | `"checkbox"` | Selection behaviour and indicator icon                                   |
+| `styleType`             | `"default" \| "no-border"`                             | `"default"`  | Whether a border is displayed                                            |
+| `indicator`             | `boolean`                                              | —            | Show the type indicator icon (tick for `"yes"`, cross for `"no"`)        |
+| `checked`               | `boolean`                                              | —            | Controlled checked/selected state                                        |
+| `subLabel`              | `string \| JSX.Element \| () => JSX.Element`           | —            | Secondary text below the main label                                      |
+| `childrenMaxLines`      | `{desktop: number, mobile: number}`                    | —            | Max visible lines in the main label; additional lines are truncated      |
+| `disabled`              | `boolean`                                              | —            | Disables the element — non-interactable                                  |
+| `focusableWhenDisabled` | `boolean`                                              | —            | Keeps component focusable when disabled, preventing all user interaction |
+| `error`                 | `boolean`                                              | —            | Shows error state styling                                                |
+| `removable`             | `boolean`                                              | `false`      | Shows a remove button                                                    |
+| `onRemove`              | `() => void`                                           | —            | Called when the remove button is clicked                                 |
+| `compositeSection`      | `CompositeSectionProps`                                | —            | Collapsible subsection displayed below label and subLabel                |
+| `useContentWidth`       | `boolean`                                              | —            | Changes minimum container width to fit content                           |
+| `onChange`              | `(event: React.ChangeEvent<HTMLInputElement>) => void` | —            | Called when the Toggle is selected or deselected                         |
+| `name`                  | `string`                                               | —            | Name of the element                                                      |
+| `id`                    | `string`                                               | —            | Unique identifier of the element                                         |
+| `className`             | `string`                                               | —            | Class selector of the element                                            |
+| `data-testid`           | `string`                                               | —            | Test identifier of the element                                           |
+
+## CompositeSectionProps
+
+| Prop              | Type                      | Default | Description                                                      |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------- |
+| `children`        | `string \| JSX.Element`   | —       | Contents of the subsection — **required**                        |
+| `collapsible`     | `boolean`                 | `true`  | Whether the subsection is collapsible                            |
+| `initialExpanded` | `boolean`                 | —       | Initial expanded state — only applies when `collapsible` is true |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown when the subsection is collapsed                    |
+
+## Rules
+
+-   `children` (main label) is mandatory.
+-   `indicator` is recommended when using `type="yes"` or `type="no"` to show the tick/cross icon.
+-   Always pass `indicator` for `type="checkbox"`, `type="radio"`, `type="yes"`, and `type="no"` — it shows the relevant icon (tick, dot, tick, cross) inside the toggle.
+-   Use `type="radio"` when the option cannot be deselected (e.g. single-select from a list).
+-   Use `compositeSection` to reveal dependent fields when a Toggle is selected — do not conditionally render fields outside the Toggle.
+-   Use `subLabel` for secondary supporting text — do not embed long descriptions in `children`.
+-   Use `childrenMaxLines` to constrain label height in dense list layouts.
+-   Place a `Form.Label` above each toggle group to provide the question or field label.
+
+### Spacing
+
+| Layout                    | Gap                                  |
+| ------------------------- | ------------------------------------ |
+| Stacked (checkbox, radio) | `spacing-8` between each Toggle      |
+| Side by side (yes / no)   | `spacing-16` between the two Toggles |
+
+```tsx
+{/* Stacked — checkbox or radio */}
+<Form.Label>Declaration</Form.Label>
+<ToggleWrapper> {/* margin-bottom: spacing-32 — matches Form field built-in */}
+  <Toggle indicator checked={a} onChange={...}>Option A</Toggle>
+  <div style={{ marginBottom: Spacing["spacing-8"] }} />
+  <Toggle indicator checked={b} onChange={...}>Option B</Toggle>
+</ToggleWrapper>
+
+{/* Side by side — yes / no */}
+<Form.Label>Do you have a disability?</Form.Label>
+<YesNoGroup> {/* display: flex; gap: spacing-16 */}
+  <Toggle type="yes" indicator checked={val === "yes"} onChange={...}>Yes</Toggle>
+  <Toggle type="no"  indicator checked={val === "no"}  onChange={...}>No</Toggle>
+</YesNoGroup>
+```
+
+## Anti-patterns
+
+-   Do not use bare `Checkbox` or `RadioButton` in forms when a labelled card container is needed — use `Toggle` instead.
+-   Do not conditionally render dependent fields outside the Toggle — use `compositeSection`.
+-   Do not use `type="yes"` or `type="no"` without pairing both options together in the UI.
+-   Do not omit `indicator` for any Toggle type — it is required for all variants.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/tooltip.md b/docs/skills/cc-flagship-ds/resources/v3/components/tooltip.md
new file mode 100644
index 0000000000..654e8c41eb
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/tooltip.md
@@ -0,0 +1,62 @@
+# Tooltip
+
+> **Not available in v4.** If you are building for v4, use `Popover` with `trigger="hover"` instead.
+
+Import: `import { Tooltip, withTooltip } from "@lifesg/react-design-system/tooltip"`
+
+## When to use
+
+Use to show brief supplementary information when a user hovers over or focuses an element. For interactive contextual information, use Popover instead.
+
+## Variants
+
+Two usage patterns are available:
+
+-   **`withTooltip` HOC** — wraps an existing element to add tooltip behaviour automatically.
+-   **`Tooltip` component** — a standalone tooltip that you control manually.
+
+## Usage
+
+```tsx
+import { withTooltip } from "@lifesg/react-design-system/tooltip";
+import { Button } from "@lifesg/react-design-system/button";
+
+{
+    /* Preferred: HOC wraps an existing element */
+}
+{
+    withTooltip(<Button.Default styleType="default">Save</Button.Default>, {
+        content: "Save your changes",
+    });
+}
+```
+
+## Props
+
+### withTooltip
+
+```ts
+withTooltip(component: JSX.Element, options: TooltipHOCOptionsProps): JSX.Element
+```
+
+**TooltipHOCOptionsProps**
+
+| Prop      | Type                    | Description                    |
+| --------- | ----------------------- | ------------------------------ |
+| `content` | `JSX.Element \| string` | Tooltip content — **required** |
+
+### Tooltip
+
+| Prop          | Type                                     | Default | Description                      |
+| ------------- | ---------------------------------------- | ------- | -------------------------------- |
+| `children`    | `JSX.Element \| string`                  | —       | Tooltip content — **required**   |
+| `visible`     | `boolean`                                | `false` | Controls visibility              |
+| `position`    | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Position relative to the trigger |
+| `id`          | `string`                                 | —       | Unique identifier                |
+| `className`   | `string`                                 | —       | Class selector                   |
+| `data-testid` | `string`                                 | —       | Test identifier                  |
+
+## Rules
+
+-   Use `withTooltip` for most cases — it handles hover trigger logic automatically.
+-   Use the `Tooltip` component directly when you need full manual control over visibility.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/typography.md b/docs/skills/cc-flagship-ds/resources/v3/components/typography.md
new file mode 100644
index 0000000000..08881eca38
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/typography.md
@@ -0,0 +1,92 @@
+# Typography
+
+Import: `import { Typography } from "@lifesg/react-design-system/typography"`
+
+## When to use
+
+Use Typography components to render text content — headings, paragraphs, and links. Do not use for parent containers that have text children; use Font tokens instead (see `foundations/typography.md`).
+
+## Sub-components
+
+**Headings:** `Typography.HeadingXXL`, `Typography.HeadingXL`, `Typography.HeadingLG`, `Typography.HeadingMD`, `Typography.HeadingSM`, `Typography.HeadingXS`
+
+**Body:** `Typography.BodyBL`, `Typography.BodyMD`, `Typography.BodySM`, `Typography.BodyXS`
+
+**Links:** `Typography.LinkBL`, `Typography.LinkMD`, `Typography.LinkSM`, `Typography.LinkXS`
+
+## Variants
+
+| Component         | Default element | Usage                                  |
+| ----------------- | --------------- | -------------------------------------- |
+| `HeadingXXL`      | `h1`            | Hero/page-level title                  |
+| `HeadingXL`       | `h2`            | Page title or primary section heading  |
+| `HeadingLG`       | `h3`            | Section heading                        |
+| `HeadingMD`       | `h4`            | Subsection heading                     |
+| `HeadingSM`       | —               | Card heading, secondary heading        |
+| `HeadingXS`       | —               | Small heading                          |
+| `BodyBL`          | —               | Default paragraph text                 |
+| `BodyMD`          | —               | Medium body text                       |
+| `BodySM`          | —               | Helper text                            |
+| `BodyXS`          | —               | Metadata, timestamps                   |
+| `LinkBL/MD/SM/XS` | `<a>`           | Inline links, sized to match body text |
+
+## Usage
+
+```tsx
+import { Typography } from "@lifesg/react-design-system/typography";
+
+<>
+    <Typography.HeadingXL>Page title</Typography.HeadingXL>
+    <Typography.BodyBL paragraph>
+        Supporting body text for the section. Use{" "}
+        <Typography.LinkMD href="/learn-more">
+            link components
+        </Typography.LinkMD>{" "}
+        for inline anchors.
+    </Typography.BodyBL>
+</>;
+```
+
+## Props
+
+### Heading/Body props
+
+Inherits `HTMLElement` attributes.
+
+| Prop        | Type                                           | Default     | Description                                     |
+| ----------- | ---------------------------------------------- | ----------- | ----------------------------------------------- |
+| `as`        | `string`                                       | —           | Override rendered HTML element (e.g. `as="h1"`) |
+| `weight`    | `"regular" \| "semibold" \| "bold" \| "light"` | `"regular"` | Font weight                                     |
+| `inline`    | `boolean`                                      | —           | Display inline instead of block                 |
+| `paragraph` | `boolean`                                      | `false`     | Add bottom margin for text block separation     |
+| `maxLines`  | `number`                                       | —           | Truncate after N lines with ellipsis            |
+
+### Link props
+
+Inherits `HTMLAnchorElement` attributes.
+
+| Prop             | Type                                           | Default       | Description                  |
+| ---------------- | ---------------------------------------------- | ------------- | ---------------------------- |
+| `weight`         | `"regular" \| "semibold" \| "bold" \| "light"` | `"regular"`   | Font weight                  |
+| `external`       | `boolean`                                      | —             | Show external link indicator |
+| `underlineStyle` | `"underline" \| "none"`                        | `"underline"` | Text decoration              |
+
+## Rules
+
+-   Default HTML elements: `HeadingXXL` → `h1`, `HeadingXL` → `h2`, `HeadingLG` → `h3`, `HeadingMD` → `h4`.
+-   Text color is not set by the component — apply via `styled()` using Colour tokens.
+-   Do not pass `color` as a prop — `TypographyProps` extends `HTMLAttributes` and forwards the value to the DOM, triggering a React warning.
+-   Do not use Typography for parent containers — use Font tokens instead.
+-   Heading components render default HTML elements — use the `as` prop when visual size and reading order don't match.
+-   Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
+-   Apply text color via `styled()` using Colour tokens — never pass `color` as a prop.
+-   Use the `weight` prop to adjust emphasis, not opacity.
+-   Links are underlined by default — use `underlineStyle="none"` only when context makes the link obvious.
+-   Always use the `external` prop for links that navigate outside the domain.
+
+## Anti-patterns
+
+-   Passing `color` directly as a prop — it forwards a Colour object to the DOM and triggers a React warning.
+-   Skipping heading levels for visual sizing — use the `as` prop instead.
+-   Using `<h1>` raw HTML inside a Typography component instead of `as="h1"`.
+-   Using Typography on a container element to inherit font styles — use Font tokens.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/uneditable-section.md b/docs/skills/cc-flagship-ds/resources/v3/components/uneditable-section.md
new file mode 100644
index 0000000000..74e4b5bd7f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/components/uneditable-section.md
@@ -0,0 +1,94 @@
+# UneditableSection
+
+Import: `import { UneditableSection } from "@lifesg/react-design-system/uneditable-section"`
+
+## When to use
+
+-   Displaying read-only label/value pairs on summary or review screens.
+-   Showing retrieved or pre-filled data the user cannot edit.
+
+## Sub-components
+
+-   `UneditableSection.ItemSection` — wraps a group of items (extends `HTMLUListElement`)
+-   `UneditableSection.Item` — individual label/value item
+
+## Usage
+
+```tsx
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+
+<UneditableSection
+    title="Personal details"
+    items={[
+        { label: "Full name", value: "Jane Tan", displayWidth: "half" },
+        { label: "Date of birth", value: "1 Jan 1990", displayWidth: "half" },
+        { label: "Address", value: "123 Example Road, Singapore 123456" },
+    ]}
+/>;
+```
+
+## Props
+
+### UneditableSection
+
+| Prop            | Type                                         | Default | Description                                        |
+| --------------- | -------------------------------------------- | ------- | -------------------------------------------------- |
+| `items`         | `UneditableSectionItemProps[]`               | —       | Items displayed in label/value format              |
+| `title`         | `string`                                     | —       | Section title (rendered as `Text.H3`)              |
+| `description`   | `string`                                     | —       | Section description (rendered as `Text.Body`)      |
+| `topSection`    | `JSX.Element`                                | —       | Custom section rendered above the items            |
+| `bottomSection` | `JSX.Element`                                | —       | Custom section rendered below the items            |
+| `children`      | `JSX.Element \| JSX.Element[]`               | —       | Full body; enables custom composition              |
+| `background`    | `boolean`                                    | `true`  | Whether a background is rendered                   |
+| `stretch`       | `boolean`                                    | —       | Contents take full width of the section            |
+| `fullWidth`     | `boolean`                                    | —       | Removes default spacing/grid from `Layout.Content` |
+| `onMask`        | `(item: UneditableSectionItemProps) => void` | —       | Called when the mask icon is clicked               |
+| `onUnmask`      | `(item: UneditableSectionItemProps) => void` | —       | Called when the unmask icon is clicked             |
+| `onTryAgain`    | `(item: UneditableSectionItemProps) => void` | —       | Called when "Try again?" indicator is clicked      |
+| `id`            | `string`                                     | —       | Unique id of the component                         |
+| `className`     | `string`                                     | —       | Class selector of the component                    |
+| `data-testid`   | `string`                                     | —       | Test identifier of the component                   |
+
+### UneditableSection.ItemSection
+
+Inherits all props from `HTMLUListElement`.
+
+| Prop      | Type      | Default | Description                                       |
+| --------- | --------- | ------- | ------------------------------------------------- |
+| `stretch` | `boolean` | —       | Contents take full width of the UneditableSection |
+
+### UneditableSectionItemProps
+
+| Prop                | Type                        | Default  | Description                                                 |
+| ------------------- | --------------------------- | -------- | ----------------------------------------------------------- |
+| `label` \*          | `string`                    | —        | Label of the item                                           |
+| `value` \*          | `string \| React.ReactNode` | —        | Value of the item; masking only works for string values     |
+| `displayWidth`      | `"half" \| "full"`          | `"full"` | Column span of the item                                     |
+| `id`                | `string`                    | —        | Unique identifier of the item                               |
+| `maskRange`         | `number[]`                  | —        | [start, end] index range to mask                            |
+| `unmaskRange`       | `number[]`                  | —        | [start, end] index range to NOT mask                        |
+| `maskRegex`         | `RegExp`                    | —        | Regex matched content replaced with `maskChar`              |
+| `maskTransformer`   | `(value) => string`         | —        | Function to transform the value                             |
+| `maskChar`          | `string`                    | `•`      | Character used for masking                                  |
+| `maskState`         | `"masked" \| "unmasked"`    | —        | If undefined, no mask/unmask controls are rendered          |
+| `maskLoadingState`  | `"loading" \| "fail"`       | —        | Loading state for mask/unmask action                        |
+| `disableMaskUnmask` | `boolean`                   | —        | Value is masked/unmasked but no indicator is rendered       |
+| `alert`             | `AlertProps`                | —        | Alert rendered under the section item                       |
+| `onMask`            | `() => void`                | —        | Called when mask icon is clicked (on Item sub-component)    |
+| `onUnmask`          | `() => void`                | —        | Called when unmask icon is clicked (on Item sub-component)  |
+| `onTryAgain`        | `() => void`                | —        | Called when "Try again?" is clicked (on Item sub-component) |
+
+`*` = required
+
+## Rules
+
+-   Always supply `items` with a `label` and `value` for each field.
+-   Use `displayWidth: "half"` for short values (names, dates, codes) to show two per row; omit for long values.
+-   Show `"—"` for any unanswered or empty field rather than leaving `value` blank.
+-   Set `background={false}` when rendering inside a `BoxContainer` — the container already provides the visual boundary; the default background creates an unwanted nested box appearance.
+-   Set `fullWidth` when rendering inside a container such as `BoxContainer` to remove the default `Layout.Content` spacing and allow content to fill the full width.
+
+## Anti-patterns
+
+-   Do not use `UneditableSection` for editable fields — use `Form.*` components with `readOnly` instead.
+-   Do not nest `UneditableSection` inside another `UneditableSection`.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/foundations/layout-composition-patterns.md b/docs/skills/cc-flagship-ds/resources/v3/foundations/layout-composition-patterns.md
new file mode 100644
index 0000000000..ee3f20b411
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/foundations/layout-composition-patterns.md
@@ -0,0 +1,47 @@
+# Layout & Composition Patterns
+
+Cross-cutting rules for assembling FDS components into polished layouts. Apply alongside per-page pattern and template files.
+
+---
+
+## Vertical Spacing Rhythm
+
+| Between…                                   | Token        |
+| ------------------------------------------ | ------------ |
+| Page title and first content section       | `spacing-32` |
+| Major page sections (cards → table)        | `spacing-48` |
+| Cards in a grid row (gap)                  | `spacing-24` |
+| Heading and its body text within a section | `spacing-8`  |
+| Form fields within a group                 | `spacing-24` |
+| Form field groups (personal → address)     | `spacing-32` |
+| Button row and the content above it        | `spacing-32` |
+| Last content section and page bottom       | `spacing-64` |
+
+---
+
+## Visual Hierarchy
+
+Every page must use at least three distinct text levels.
+
+| Level   | Component              | Colour token   | Use for                                 |
+| ------- | ---------------------- | -------------- | --------------------------------------- |
+| Primary | `Typography.HeadingXL` | `text`         | Page title — one per page               |
+| Section | `Typography.HeadingMD` | `text`         | Section headings within the page        |
+| Card    | `Typography.HeadingSM` | `text`         | Card titles, panel headers              |
+| Body    | `Typography.BodyMD`    | `text`         | Default body text, descriptions         |
+| Support | `Typography.BodySM`    | `text-subtle`  | Secondary info, timestamps, helper text |
+| Caption | `Typography.BodyXS`    | `text-subtler` | Footnotes, disclaimers, metadata        |
+
+Page title pattern: `Typography.HeadingXL` as `h1`, `Typography.BodyMD` in `Colour["text-subtle"]` directly below as subtitle.
+
+---
+
+## Anti-patterns
+
+| Anti-pattern                            | Fix                                                               |
+| --------------------------------------- | ----------------------------------------------------------------- |
+| All text the same size and colour       | Use at least 3 Typography sizes; `text-subtle` for secondary text |
+| No spacing between page sections        | `spacing-48` between major sections                               |
+| Summary metric cards stacked vertically | Use a responsive grid: 3–4 across on desktop, stacked on mobile   |
+| Buttons touching content above          | `spacing-32` above button row                                     |
+| Missing page-bottom spacing             | `spacing-64` padding-bottom on page wrapper                       |
diff --git a/docs/skills/cc-flagship-ds/resources/v3/foundations/tokens.md b/docs/skills/cc-flagship-ds/resources/v3/foundations/tokens.md
new file mode 100644
index 0000000000..720a24789d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/foundations/tokens.md
@@ -0,0 +1,628 @@
+# Design Tokens
+
+All tokens are imported from `@lifesg/react-design-system/theme`.
+
+```tsx
+import {
+    Colour,
+    Spacing,
+    Radius,
+    Font,
+} from "@lifesg/react-design-system/theme";
+```
+
+**v4:** tokens are plain CSS variable strings — use directly in inline `style={{}}` props.
+**v3:** tokens are styled-components interpolation functions — use only inside `styled` template literals, never in `style={{}}`.
+
+---
+
+## Token Usage Basics
+
+`Colour`, `Spacing`, and `Font` values are **styled-components interpolation functions** — interpolate them directly inside tagged template literals. They resolve to the correct CSS value for the active `ThemeProvider` theme.
+
+```ts
+import { Colour, Spacing, Font } from "@lifesg/react-design-system/theme";
+import styled from "styled-components";
+
+const Card = styled.div`
+    background: ${Colour["bg-stronger"]};
+    padding: ${Spacing["spacing-16"]};
+    ${Font["body-md-regular"]}
+`;
+```
+
+**Using tokens as constants (outside styled-components):**
+
+```ts
+import { Colour, LifeSGTheme } from "@lifesg/react-design-system/theme";
+import { useTheme } from "styled-components";
+
+// In a React component — resolves based on current theme
+const Component = () => {
+    const theme = useTheme();
+    const colour = Colour["text"]({ theme });
+};
+
+// With a fixed theme object (not reactive to theme switching)
+const colour = Colour["text"]({ theme: LifeSGTheme });
+```
+
+**TypeScript setup (required once per project):**
+
+```ts
+// src/styled.d.ts
+import "styled-components";
+import { ThemeSpec } from "@lifesg/react-design-system/theme/types";
+
+declare module "styled-components" {
+    export interface DefaultTheme extends ThemeSpec {
+        maxColumns?: {
+            xxs: 8;
+            xs: 8;
+            sm: 8;
+            md: 8;
+            lg: 12;
+            xl: 12;
+            xxl: 12;
+        };
+    }
+}
+```
+
+Without this file every `${Colour[...]}` or `${Spacing[...]}` interpolation in a styled-component will emit a TypeScript error.
+
+---
+
+## Anti-patterns
+
+| Anti-pattern                                              | Why it fails                                                                       | Correct alternative                                            |
+| --------------------------------------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| `const bg = Colour['bg']` outside a template literal      | `Colour['bg']` is a function — renders as `[object Object]` in CSS                 | Interpolate directly: `${Colour['bg']}`                        |
+| Creating a local token proxy file (`src/theme/tokens.ts`) | Plain strings do not resolve theme overrides — app silently breaks on theme change | Use `Colour[...]` / `Spacing[...]` directly                    |
+| Accessing `props.theme.colourScheme` in styled-components | Does not work without the `styled.d.ts` augmentation                               | Use `Colour[...]` / `Spacing[...]` interpolations instead      |
+| Hardcoding `var(--color-*)` CSS variables                 | FDS internal variable names may change                                             | Use `Colour[...]` tokens                                       |
+| Using `SpacingValues`                                     | This export does not exist                                                         | Use `Spacing`                                                  |
+| Using `Theme` (named export)                              | This export does not exist in `@lifesg/react-design-system/theme`                  | Use a named preset: `LifeSGTheme`, `SupportGoWhereTheme`, etc. |
+
+---
+
+## Colour
+
+### Quick decision
+
+| I need a colour for…                     | Token                           |
+| ---------------------------------------- | ------------------------------- |
+| Page / card background                   | `Colour.bg`                     |
+| Emphasis panel / CTA surface             | `Colour["bg-strong"]`           |
+| Brand-tinted surface                     | `Colour["bg-primary-subtlest"]` |
+| Hover state (custom interactive)         | `Colour["bg-hover"]`            |
+| Selected state                           | `Colour["bg-selected"]`         |
+| Disabled background                      | `Colour["bg-disabled"]`         |
+| Modal / drawer backdrop                  | `Colour["overlay-strong"]`      |
+| Body copy, headings                      | `Colour.text`                   |
+| Form labels, UI labels                   | `Colour["text-subtle"]`         |
+| Descriptions, helper text, metadata      | `Colour["text-subtler"]`        |
+| Placeholders                             | `Colour["text-subtlest"]`       |
+| Active / brand text                      | `Colour["text-primary"]`        |
+| Link text                                | `Colour.hyperlink`              |
+| Text on dark backgrounds                 | `Colour["text-inverse"]`        |
+| Disabled text                            | `Colour["text-disabled"]`       |
+| Default border (inputs, cards, dividers) | `Colour.border`                 |
+| Emphasis border                          | `Colour["border-strong"]`       |
+| Brand border / active indicator          | `Colour["border-primary"]`      |
+| Focus ring                               | `Colour["border-focus"]`        |
+| Error border                             | `Colour["border-error"]`        |
+| Default icon                             | `Colour.icon`                   |
+| Secondary / subtle icon                  | `Colour["icon-subtle"]`         |
+| Brand icon                               | `Colour["icon-primary"]`        |
+| Icon on dark backgrounds                 | `Colour["icon-inverse"]`        |
+
+### Notation
+
+Single-word tokens use dot notation: `Colour.text`, `Colour.border`, `Colour.bg`, `Colour.icon`
+
+Hyphenated tokens use bracket notation: `Colour["text-subtle"]`, `Colour["bg-hover"]`
+
+### Status tokens
+
+| Status  | Background   | Text           | Icon           | Border           |
+| ------- | ------------ | -------------- | -------------- | ---------------- |
+| Success | `bg-success` | `text-success` | `icon-success` | `border-success` |
+| Warning | `bg-warning` | `text-warning` | `icon-warning` | `border-warning` |
+| Error   | `bg-error`   | `text-error`   | `icon-error`   | `border-error`   |
+| Info    | `bg-info`    | `text-info`    | `icon-info`    | `border-info`    |
+
+All follow bracket notation: `Colour["bg-success"]`, `Colour["text-error"]`.
+
+### Full token reference
+
+#### Text colours
+
+| Token key                | Use for                                    |
+| ------------------------ | ------------------------------------------ |
+| `text`                   | Default body text                          |
+| `text-subtle`            | Secondary / supporting text                |
+| `text-subtler`           | Tertiary / caption-like text               |
+| `text-subtlest`          | Weakest text — muted labels, hints         |
+| `text-primary`           | Brand-coloured text (links, active labels) |
+| `text-hover`             | Text colour on hover states                |
+| `text-selected`          | Text in selected / active state            |
+| `text-selected-hover`    | Text in selected state on hover            |
+| `text-disabled`          | Disabled state text                        |
+| `text-disabled-subtle`   | Subtle disabled text                       |
+| `text-disabled-subtlest` | Faintest disabled text                     |
+| `text-selected-disabled` | Text in selected + disabled state          |
+| `text-success`           | Success state text                         |
+| `text-warning`           | Warning state text                         |
+| `text-error`             | Inline validation error text               |
+| `text-info`              | Informational state text                   |
+| `text-inverse`           | Text on dark / inverted backgrounds        |
+
+#### Icon colours
+
+| Token key                | Use for                           |
+| ------------------------ | --------------------------------- |
+| `icon`                   | Default icon fill                 |
+| `icon-subtle`            | Subdued / secondary icon          |
+| `icon-strongest`         | Highest-contrast icon (very dark) |
+| `icon-primary`           | Brand-coloured icon               |
+| `icon-primary-subtle`    | Muted brand icon                  |
+| `icon-primary-subtlest`  | Faintest brand icon               |
+| `icon-hover`             | Icon on hover                     |
+| `icon-selected`          | Icon in selected state            |
+| `icon-selected-hover`    | Icon in selected state on hover   |
+| `icon-disabled`          | Disabled icon                     |
+| `icon-disabled-subtle`   | Subtle disabled icon              |
+| `icon-selected-disabled` | Icon in selected + disabled state |
+| `icon-success`           | Success state icon                |
+| `icon-warning`           | Warning state icon                |
+| `icon-error`             | Error state icon                  |
+| `icon-error-strong`      | Strong / filled error icon        |
+| `icon-info`              | Informational icon                |
+| `icon-inverse`           | Icon on dark background           |
+| `icon-primary-inverse`   | Brand icon on inverted background |
+
+#### Border colours
+
+| Token key                  | Use for                                     |
+| -------------------------- | ------------------------------------------- |
+| `border`                   | Default input / card / divider borders      |
+| `border-strong`            | Stronger divider or emphasis border         |
+| `border-stronger`          | Strongest border emphasis                   |
+| `border-primary`           | Brand-coloured border                       |
+| `border-primary-subtle`    | Muted brand-coloured border                 |
+| `border-focus`             | Focus ring on interactive elements          |
+| `border-focus-strong`      | Strong focus ring (accessibility highlight) |
+| `border-hover`             | Border on hover                             |
+| `border-hover-strong`      | Strong border on hover                      |
+| `border-selected`          | Selected / active state border              |
+| `border-selected-subtle`   | Subtle selected state border                |
+| `border-selected-subtlest` | Faintest selected state border              |
+| `border-selected-hover`    | Selected state border on hover              |
+| `border-disabled`          | Disabled state border                       |
+| `border-selected-disabled` | Selected + disabled state border            |
+| `border-error`             | Error state border                          |
+| `border-error-focus`       | Focus ring inside error state               |
+| `border-error-strong`      | Strong error state border                   |
+| `border-success`           | Success state border                        |
+| `border-warning`           | Warning state border                        |
+| `border-info`              | Informational border                        |
+
+#### Background colours
+
+| Token key                      | Use for                                     |
+| ------------------------------ | ------------------------------------------- |
+| `bg`                           | Default surface background                  |
+| `bg-strong`                    | Slightly elevated surface                   |
+| `bg-stronger`                  | Card / panel surface                        |
+| `bg-strongest`                 | Highest elevation surface                   |
+| `bg-hover`                     | Background on hover                         |
+| `bg-hover-strong`              | Strong hover background                     |
+| `bg-hover-subtle`              | Subtle hover background                     |
+| `bg-hover-neutral`             | Neutral hover (non-primary elements)        |
+| `bg-hover-neutral-strong`      | Strong neutral hover background             |
+| `bg-selected`                  | Selected item background                    |
+| `bg-selected-hover`            | Selected item background on hover           |
+| `bg-selected-strong`           | Strong selected state                       |
+| `bg-selected-strongest`        | Strongest selected fill                     |
+| `bg-selected-strongest-hover`  | Strongest selected fill on hover            |
+| `bg-disabled`                  | Disabled element background                 |
+| `bg-selected-disabled`         | Selected + disabled background              |
+| `bg-primary`                   | Brand-coloured fill                         |
+| `bg-primary-subtle`            | Subtle brand tint                           |
+| `bg-primary-subtler`           | Lighter brand tint                          |
+| `bg-primary-subtlest`          | Faintest brand tint                         |
+| `bg-primary-hover`             | Brand background on hover                   |
+| `bg-primary-subtlest-hover`    | Faintest brand tint on hover                |
+| `bg-primary-subtlest-selected` | Faintest brand tint in selected state       |
+| `bg-success`                   | Success state background                    |
+| `bg-success-hover`             | Success background on hover                 |
+| `bg-success-strong`            | Strong success fill (badges, chips)         |
+| `bg-success-strong-hover`      | Strong success fill on hover                |
+| `bg-warning`                   | Warning state background                    |
+| `bg-warning-hover`             | Warning background on hover                 |
+| `bg-warning-strong`            | Strong warning fill                         |
+| `bg-warning-strong-hover`      | Strong warning fill on hover                |
+| `bg-error`                     | Error state background                      |
+| `bg-error-hover`               | Error background on hover                   |
+| `bg-error-strong`              | Strong error fill                           |
+| `bg-error-strong-hover`        | Strong error fill on hover                  |
+| `bg-info`                      | Informational background                    |
+| `bg-info-hover`                | Informational background on hover           |
+| `bg-info-strong`               | Strong informational fill                   |
+| `bg-info-strong-hover`         | Strong informational fill on hover          |
+| `bg-inverse`                   | Dark / inverted background                  |
+| `bg-inverse-subtle`            | Subtle inverted background                  |
+| `bg-inverse-subtler`           | Lighter inverted background                 |
+| `bg-inverse-subtlest`          | Faintest inverted background                |
+| `bg-inverse-hover`             | Inverted background on hover                |
+| `bg-available`                 | Available / open slot (scheduling contexts) |
+| `overlay-strong`               | Modal / drawer backdrop                     |
+| `overlay-subtle`               | Soft overlay                                |
+
+#### Hyperlink
+
+| Token key           | Use for                 |
+| ------------------- | ----------------------- |
+| `hyperlink`         | Default link colour     |
+| `hyperlink-inverse` | Link on dark background |
+
+#### Focus
+
+| Token key            | Use for                           |
+| -------------------- | --------------------------------- |
+| `focus-ring`         | Keyboard focus outline colour     |
+| `focus-ring-inverse` | Focus outline on dark backgrounds |
+
+### Overriding
+
+```ts
+const customTheme: ThemeSpec = {
+    ...LifeSGTheme,
+    overrides: {
+        primitiveColour: { "primary-50": "#1768BE" },
+        semanticColour: {
+            "text-warning": Colour.Primitive["warning-10"],
+            "text-error": "#A04747",
+        },
+    },
+};
+```
+
+For dark mode, use `primitiveColourDark` / `semanticColourDark` keys instead.
+
+### Rules
+
+-   Never hardcode hex values — always use a Colour token
+-   Use `hyperlink` for link text — not `text-primary`
+-   DS components (Button, Form.Input, Card, etc.) handle their own colour states — only apply Colour tokens to custom elements
+
+---
+
+## Spacing
+
+Base-4 system. Import: `Spacing["spacing-{n}"]`
+
+| Token         | Value | Frequency    | Typical use                             |
+| ------------- | ----- | ------------ | --------------------------------------- |
+| `spacing-0`   | 0px   | Rare         | Reset / collapse                        |
+| `spacing-4`   | 4px   | Rare         | Tight inline gaps                       |
+| `spacing-8`   | 8px   | **Common**   | Icon-text gaps, heading-to-body gaps    |
+| `spacing-12`  | 12px  | Occasional   | Tight component gaps                    |
+| `spacing-16`  | 16px  | **Dominant** | List items, form fields, component gaps |
+| `spacing-20`  | 20px  | Occasional   | Medium-small spacing                    |
+| `spacing-24`  | 24px  | **Dominant** | Card padding, section gaps              |
+| `spacing-32`  | 32px  | Common       | Large spacing, section padding          |
+| `spacing-40`  | 40px  | Occasional   | Extra-large spacing                     |
+| `spacing-48`  | 48px  | Occasional   | Page-level vertical rhythm              |
+| `spacing-64`  | 64px  | Rare         | XXL spacing                             |
+| `spacing-72`  | 72px  | Rare         | Extra-large structural spacing          |
+| `layout-xs`   | —     | —            | Layout grid gutter xs breakpoint        |
+| `layout-sm`   | —     | —            | Layout grid gutter sm breakpoint        |
+| `layout-md`   | —     | —            | Layout grid gutter md breakpoint        |
+| `layout-lg`   | —     | —            | Layout grid gutter lg breakpoint        |
+| `layout-xl`   | —     | —            | Layout grid gutter xl breakpoint        |
+| `layout-xxl`  | —     | —            | Layout grid gutter xxl breakpoint       |
+| `layout-xxxl` | —     | —            | Layout grid gutter xxxl breakpoint      |
+
+Always bracket notation: `Spacing["spacing-16"]`
+
+Never hardcode `px` values — always use a Spacing token.
+
+---
+
+## Radius
+
+| Token         | Value  | Use                                                  |
+| ------------- | ------ | ---------------------------------------------------- |
+| `Radius.none` | 0px    | Full-bleed, tables                                   |
+| `Radius.xs`   | 2px    | Rarely needed                                        |
+| `Radius.sm`   | 4px    | **Default** — form elements, small custom components |
+| `Radius.md`   | 8px    | Cards, panels, overlays                              |
+| `Radius.lg`   | 12px   | Modals, large overlays                               |
+| `Radius.full` | 9999px | Pills, avatars, circular elements                    |
+
+Always dot notation: `Radius.sm`, `Radius.md`
+
+DS components have radius baked in — do not override: Input/Textarea (`sm`), Card/Drawer/Menu/Toast (`md`), Modal (`lg`), Pill (`full`).
+
+**Overriding:**
+
+```ts
+const customTheme: ThemeSpec = {
+    ...LifeSGTheme,
+    overrides: { radius: { sm: 6 } },
+};
+```
+
+---
+
+## Typography
+
+Use `Typography.*` components for all rendered text. Use `Font` tokens only when styling a non-text parent container that needs font styles.
+
+### Typography component → heading level
+
+| Component                | Default element | When to use                       |
+| ------------------------ | --------------- | --------------------------------- |
+| `Typography.HeadingXXL`  | `h1`            | Hero / landing page title         |
+| `Typography.HeadingXL`   | `h2`            | Page title (top of view)          |
+| `Typography.HeadingLG`   | `h3`            | Section heading — most common     |
+| `Typography.HeadingMD`   | `h4`            | Card heading, subsection          |
+| `Typography.HeadingSM`   | `h5`            | Small heading, list header        |
+| `Typography.HeadingXS`   | `h6`            | Tiny heading, emphasized label    |
+| `Typography.BodyBL`      | `p`             | Default body text, paragraphs     |
+| `Typography.BodyBLSmall` | `p`             | Emphasized small body text        |
+| `Typography.BodyMD`      | `p`             | Medium body text                  |
+| `Typography.BodySM`      | `p`             | Small text, captions, helper text |
+| `Typography.BodyXS`      | `p`             | Metadata, timestamps, footnotes   |
+
+Use the `as` prop when visual size and semantic heading level don't match:
+
+```tsx
+{
+    /* Visually large but logically a subsection h2 */
+}
+<Typography.HeadingLG as="h2">Section title</Typography.HeadingLG>;
+```
+
+Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
+
+### Rules
+
+-   Sentence case for all UI text — "Save changes" not "Save Changes"
+-   Always pair Font tokens with a Colour token — Font sets typography only, not colour
+-   Heading level follows reading order, not visual size
+
+---
+
+## Font Tokens (v3 styled-components only)
+
+> Import: `import { Font } from "@lifesg/react-design-system/theme"` > `Font[key]` injects a full set of CSS font properties (family, size, weight, line-height, letter-spacing) as a styled-components CSS block.
+> Use `Font.Spec[key]` to access individual font spec values (e.g. just the font size).
+
+Use `Typography.*` components for all rendered text content in JSX. Use `Font[...]` tokens only when initialising text styles in a styled-component container — e.g. to inherit to child elements, or to match an icon size to adjacent text.
+
+```tsx
+const CardHeader = styled.div`
+    ${Font["heading-md-semibold"]}
+    display: flex;
+    align-items: center;
+    gap: ${Spacing["spacing-8"]};
+`;
+
+// Match an inline icon height to the text size
+const Icon = styled.svg`
+    height: ${Font.Spec["heading-size-xxl"]};
+`;
+```
+
+Most headings use `-semibold`, not `-bold`. Default body is `body-baseline-regular`.
+
+### Overriding
+
+```ts
+const customTheme: ThemeSpec = {
+    ...LifeSGTheme,
+    overrides: {
+        fontSpec: { "heading-size-xxl": "5rem" },
+        font: {
+            "heading-body-light": css`
+                font-family: serif;
+                font-size: 1rem;
+                font-weight: 300;
+                line-height: 1.4rem;
+                letter-spacing: 0;
+            `,
+        },
+    },
+};
+```
+
+When overriding a font spec token, all font tokens that reference it also reflect the new value. Use longhand CSS properties (e.g. `font-size`, not `font`) to avoid overwriting unrelated font values.
+
+---
+
+## Breakpoint / Media Query Tokens
+
+> Import: `import { MediaQuery, Breakpoint } from "@lifesg/react-design-system/theme"`
+
+`MediaQuery.MaxWidth.<tier>` and `MediaQuery.MinWidth.<tier>` inject a full `@media` rule into a styled-component template literal. Use `Breakpoint["<tier>-min"]` / `Breakpoint["<tier>-max"]` to access the raw pixel value at runtime (e.g. for JS conditional logic).
+
+```ts
+// Desktop-first: hide on xs and below
+const Panel = styled.div`
+    display: block;
+    ${MediaQuery.MaxWidth.xs} {
+        display: none;
+    }
+`;
+
+// Mobile-first: two columns from lg upward
+const Grid = styled.div`
+    columns: 1;
+    ${MediaQuery.MinWidth.lg} {
+        columns: 2;
+    }
+`;
+
+// Runtime value — compare against current window width
+const Component = () => {
+    const theme = useTheme();
+    const tabletMin = Breakpoint["md-min"]({ theme });
+    return window.innerWidth > tabletMin ? <Wide /> : <Narrow />;
+};
+```
+
+### Breakpoint tiers
+
+| Tier  | Screen width   | `*-min` value | `*-max` value | Columns | Gutter | Margin |
+| ----- | -------------- | ------------- | ------------- | ------- | ------ | ------ |
+| `xxs` | 0 – 320 px     | —             | 320 px        | 8       | 16 px  | 24 px  |
+| `xs`  | 321 – 375 px   | 321 px        | 375 px        | 8       | 16 px  | 24 px  |
+| `sm`  | 376 – 480 px   | 376 px        | 480 px        | 8       | 16 px  | 24 px  |
+| `md`  | 481 – 768 px   | 481 px        | 768 px        | 8       | 16 px  | 24 px  |
+| `lg`  | 769 – 1200 px  | 769 px        | 1200 px       | 12      | 32 px  | 48 px  |
+| `xl`  | 1201 – 1440 px | 1201 px       | 1440 px       | 12      | 32 px  | 48 px  |
+| `xxl` | ≥ 1441 px      | 1441 px       | —             | 12      | 32 px  | 48 px  |
+
+### `Breakpoint` token keys
+
+Each key returns a raw `number` (pixels) when called with `{ theme }`.
+
+| Token key | Value | Use for                    |
+| --------- | ----- | -------------------------- |
+| `xxs-max` | 320   | Max-width JS check for xxs |
+| `xs-min`  | 321   | Min-width JS check for xs  |
+| `xs-max`  | 375   | Max-width JS check for xs  |
+| `sm-min`  | 376   | Min-width JS check for sm  |
+| `sm-max`  | 480   | Max-width JS check for sm  |
+| `md-min`  | 481   | Min-width JS check for md  |
+| `md-max`  | 768   | Max-width JS check for md  |
+| `lg-min`  | 769   | Min-width JS check for lg  |
+| `lg-max`  | 1200  | Max-width JS check for lg  |
+| `xl-min`  | 1201  | Min-width JS check for xl  |
+| `xl-max`  | 1440  | Max-width JS check for xl  |
+| `xxl-min` | 1441  | Min-width JS check for xxl |
+
+### Overriding
+
+```ts
+const customTheme: ThemeSpec = {
+    ...LifeSGTheme,
+    overrides: {
+        breakpoint: {
+            "sm-max": 430,
+            "md-min": 431,
+        },
+    },
+};
+```
+
+All `MediaQuery` helpers automatically reflect the overridden values.
+
+### Known limitations
+
+-   `MediaQuery` helpers are CSS-in-JS only — cannot be used outside a styled-component template literal
+-   There is no built-in hook to reactively detect the current tier; wire `window.matchMedia` manually if needed
+
+---
+
+## Shadow Tokens
+
+> Import: `import { Shadow } from "@lifesg/react-design-system/theme"`
+
+```ts
+const Card = styled.div`
+    box-shadow: ${Shadow["sm-subtle"]};
+`;
+
+const Input = styled.input`
+    box-shadow: ${Shadow["xs-focus-strong"]};
+`;
+```
+
+### Token reference
+
+| Token key         | Common use                            |
+| ----------------- | ------------------------------------- |
+| `xs-subtle`       | Subtle glow / container resting state |
+| `xs-strong`       | Strong glow / hover or active state   |
+| `xs-focus-strong` | Keyboard focus ring on inputs         |
+| `xs-error-strong` | Error focus ring on inputs            |
+| `sm-subtle`       | Card / panel resting elevation        |
+| `sm-strong`       | Card hover / lifted state             |
+| `md-subtle`       | Modal / drawer resting elevation      |
+| `md-strong`       | Modal hover or prominent elevation    |
+
+---
+
+## Border Tokens
+
+> Import: `import { Border } from "@lifesg/react-design-system/theme"`
+
+`Border["width-*"]` for widths, `Border.Util["solid"]` for a full border shorthand.
+
+```ts
+// Individual properties
+const Box = styled.div`
+    border-width: ${Border["width-010"]};
+    border-style: ${Border["solid"]};
+`;
+
+// Util shorthand
+const Card = styled.div`
+    ${Border.Util["solid"]};
+`;
+
+// Util with custom options
+const Custom = styled.div`
+    ${Border.Util["solid"]({ thickness: 2, colour: "red", radius: 8 })};
+`;
+```
+
+### Token reference
+
+| Token key   | Value | Common use                  |
+| ----------- | ----- | --------------------------- |
+| `width-005` | 0.5px | Hairline divider            |
+| `width-010` | 1px   | Default input / card border |
+| `width-020` | 2px   | Emphasis / selected border  |
+| `solid`     | solid | Border style                |
+
+Utilities: `Border.Util["solid"]` and `Border.Util["dashed-default"]` accept optional `{ thickness, colour, radius }` — all parameters optional, omit to use token defaults.
+
+---
+
+## Motion Tokens
+
+> Import: `import { Motion } from "@lifesg/react-design-system/theme"`
+
+```ts
+const Button = styled.button`
+    transition: background ${Motion["duration-250"]} ${Motion["ease-default"]};
+    &:hover {
+        background: darkgrey;
+    }
+`;
+```
+
+For elements with dynamic height or width (e.g. expandable panels), use `react-spring` instead — CSS transitions cannot handle layout animation reliably with dynamic content.
+
+### Duration
+
+| Token key       | Value  | Use for                 |
+| --------------- | ------ | ----------------------- |
+| `duration-150`  | 150ms  | Checkboxes, toggles     |
+| `duration-250`  | 250ms  | Buttons, fades          |
+| `duration-350`  | 350ms  | Icons, short movements  |
+| `duration-500`  | 500ms  | Search bars, toasts     |
+| `duration-800`  | 800ms  | Notifications, cards    |
+| `duration-1000` | 1000ms | Full-screen transitions |
+
+### Easing
+
+| Token key       | Value                                  | Use for                               |
+| --------------- | -------------------------------------- | ------------------------------------- |
+| `ease-default`  | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | Non-moving elements — opacity, colour |
+| `ease-standard` | `cubic-bezier(0.86, 0, 0.07, 1)`       | Visible throughout motion — dropdowns |
diff --git a/docs/skills/cc-flagship-ds/resources/v3/patterns/dashboard.md b/docs/skills/cc-flagship-ds/resources/v3/patterns/dashboard.md
new file mode 100644
index 0000000000..e193ab631c
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/patterns/dashboard.md
@@ -0,0 +1,154 @@
+# Dashboard Pattern
+
+Admin interfaces, internal portals, and post-login overview pages. Always uses the sidenav shell.
+
+## When to use
+
+-   Admin portals and internal tools
+-   Post-login landing pages
+-   User portals with personalised data and quick actions
+
+Do not use for public-facing pages without authentication → use `Navbar` + `<main><Layout.Container type="grid">` + `Footer` directly.
+Do not use for a single record's full detail → use `detail.md`.
+
+---
+
+## Page shell
+
+```
+Navbar
+├── Sidenav (fixed left, 240px)
+└── main content (flex: 1)
+Footer
+```
+
+```tsx
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Sidenav } from "@lifesg/react-design-system/sidenav";
+import styled from "styled-components";
+import { Spacing, MediaQuery } from "@lifesg/react-design-system/theme";
+
+const AppShell = styled.div`
+    display: flex;
+    min-height: 100vh;
+`;
+
+const SidenavWrapper = styled.aside`
+    width: 240px;
+    flex-shrink: 0;
+    ${MediaQuery.MaxWidth.md} {
+        display: none;
+    }
+`;
+
+const MainContent = styled.main`
+    flex: 1;
+    min-width: 0;
+    padding: ${Spacing["spacing-32"]};
+`;
+
+export default function DashboardPage() {
+    return (
+        <>
+            <Navbar
+                resources={{
+                    primary: { brandName: "MyService", logoSrc: "/logo.svg" },
+                }}
+                items={{ desktop: [] }}
+            />
+            <AppShell>
+                <SidenavWrapper>
+                    <Sidenav>
+                        {/* See sidenav.md for full Sidenav.Group / Sidenav.Item wiring */}
+                    </Sidenav>
+                </SidenavWrapper>
+                <MainContent>
+                    <Layout.Container type="grid">
+                        <Layout.ColDiv xsCols={8} lgCols={12}>
+                            {/* page content */}
+                        </Layout.ColDiv>
+                    </Layout.Container>
+                </MainContent>
+            </AppShell>
+            <Footer />
+        </>
+    );
+}
+```
+
+For Sidenav wiring (groups, items, selected state, onClick) — read `../components/sidenav.md`.
+
+---
+
+## Components
+
+| Slot                  | Component                                                             |
+| --------------------- | --------------------------------------------------------------------- |
+| Header                | `Navbar` (masthead enabled)                                           |
+| Side navigation       | `Sidenav`                                                             |
+| Content layout        | `Layout.Container type="grid"` + `Layout.ColDiv` inside `MainContent` |
+| Metric containers     | `Card`                                                                |
+| Section headings      | `Typography.HeadingMD`, `Typography.HeadingSM`                        |
+| Metric values         | `Typography.HeadingXL`                                                |
+| Labels / descriptions | `Typography.BodyBL`, `Typography.BodyBLSmall`                         |
+| Status indicators     | `Badge`                                                               |
+| Quick actions         | `Button.Default`, `ButtonWithIcon.Default`                            |
+| Footer                | `Footer`                                                              |
+
+---
+
+## Content area layout structures
+
+These go inside the `Layout.Container` within `MainContent`.
+
+### Metric cards row
+
+```
+ColDiv xsCols=8 mdCols=6 lgCols=3  — Metric card
+ColDiv xsCols=8 mdCols=6 lgCols=3  — Metric card
+ColDiv xsCols=8 mdCols=6 lgCols=3  — Metric card
+ColDiv xsCols=8 mdCols=6 lgCols=3  — Metric card
+```
+
+### Settings / profile page
+
+```
+ColDiv xsCols=8 lgCols=12
+  HeadingXL + BodyMD subtitle       (spacing-32 below)
+  Card — Settings group 1
+  Card — Settings group 2           (spacing-32 between cards)
+  Sticky action bar (see form.md)   (if page exceeds viewport)
+```
+
+`Toast` for save confirmations; `Alert type="error"` above the relevant `Card` for validation failures.
+
+### Full-width with sections
+
+```
+ColDiv xsCols=8                    — Section heading
+ColDiv xsCols=8 mdCols=4  ×3      — Metric row
+ColDiv xsCols=8                    — Section heading
+ColDiv xsCols=8                    — Full-width table
+```
+
+---
+
+## Rules
+
+-   Always use the sidenav shell — `Navbar` + `Sidenav` (left) + `MainContent` (right) + `Footer`
+-   **Always use `Layout.Container type="grid"` + `Layout.ColDiv` inside `MainContent`** — never replace with plain styled divs. The DS grid encodes gutter tokens and breakpoints that plain CSS duplicates incorrectly.
+-   Show 3–4 key metrics prominently — never more than fits above the fold
+-   Metric cards must have a label, a value, and an optional trend (`Badge`)
+-   All grid columns must stack on mobile: `xsCols={8}`
+-   Limit dashboard to 1–2 scroll-lengths — remove or collapse lower-priority content
+-   Use skeleton loading while fetching (see `states.md`)
+
+## Anti-patterns
+
+-   Do not use Shell 1 (full-width, no sidenav) for dashboard screens
+-   **Do not use plain `styled.div` grids for metric rows or content sections** — use `Layout.Container type="grid"` + `Layout.ColDiv xsCols mdCols lgCols` instead
+-   Do not show percentage changes without context labels
+-   Do not combine pagination AND lazy loading on the same list
+-   Do not omit loading state — always show feedback while fetching metrics
diff --git a/docs/skills/cc-flagship-ds/resources/v3/patterns/detail.md b/docs/skills/cc-flagship-ds/resources/v3/patterns/detail.md
new file mode 100644
index 0000000000..694118e336
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/patterns/detail.md
@@ -0,0 +1,364 @@
+# Detail Pattern
+
+Pages for reading the full content of a single record.
+
+## When to use
+
+-   User navigated from a list to see one specific record
+-   Screen is primarily read-only with limited, targeted edit actions
+-   Content is structured around a single entity
+
+Do not use for:
+
+-   Primarily collecting new input → use `form.md`
+-   Showing many records side by side → use `listing.md`
+
+---
+
+## Layout types
+
+| Record type                                        | Layout            |
+| -------------------------------------------------- | ----------------- |
+| Submission, application, job, scheme, general info | Description-based |
+| Venue, facility, park, address-centric resource    | Location-based    |
+| Bookable resource with availability slots          | Booking-based     |
+
+When in doubt, start with Description-based.
+
+---
+
+## 1. Description-based
+
+```
+Layout.Section > Layout.Container > Layout.Content
+  │
+  ├── BreadcrumbRow (space-between flex)
+  │     Breadcrumb (left)
+  │     Button.Default styleType="light" (right — page-level utility action)
+  │
+  ├── Card (full-width, bordered)
+  │     ContentArea (flex-1)
+  │       Typography.HeadingXL as="h1"       — Record title
+  │       Typography.HeadingSM               — Subtitle
+  │       Status badge (pill, outlined)      — Optional, below title
+  │       Typography.BodyBL color=text-subtler — Description (one line)
+  │       AttributeRow × up to 3             — Icon + value text
+  │       Tag / Pill row                     — Optional
+  │       Typography.BodySM color=text-subtler — Timestamp
+  │     CtaColumn (width ~160px)
+  │       Button.Default                     — Primary CTA
+  │       Button.Default styleType="secondary" — Secondary CTA
+  │
+  ├── Alert type="info"                      — Optional, outside card
+  │
+  └── ContentSection × N (no card wrapper)
+        Typography.HeadingSM as="h2"         — Section heading
+        Typography.BodyBL                    — Body paragraph(s)
+```
+
+## 2. Location-based
+
+Same as Description-based but wrapped in a two-column layout. Remove `Layout.Content` and the `Card` + `CtaColumn`:
+
+```
+Layout.Section > Layout.Container
+  ├── BreadcrumbRow
+  └── TwoColumn (flex, gap)
+        LeftColumn (~427px)
+          <img> or map embed
+          Typography.HeadingSM as="h2"   — Attributes subtitle
+          AttributeRow × up to 3
+          Tag / Pill row (optional)
+        RightColumn (flex-1)
+          Typography.HeadingXL as="h1"
+          Typography.HeadingSM
+          Collapsible description (truncated + Show more/less toggle)
+          Alert (optional)
+          ContentSection × N
+```
+
+## 3. Booking-based
+
+Same as Location-based. Right column adds an Availability `Card` between content section groups:
+
+```
+RightColumn (flex-1)
+  Typography.HeadingXL as="h1"
+  ...
+  ContentSection(s) before availability
+  Card (Availability)
+    Typography.HeadingSM as="h2"
+    Description
+    Calendar
+    Time slot display
+    Form.TimeRangePicker
+    Description note
+    Divider
+    CTA row: Button.Default styleType="light" (left) · Button.Default (right)
+  ContentSection(s) after availability
+```
+
+---
+
+## Component defaults
+
+| Slot                      | Component                                        | Notes                                                       |
+| ------------------------- | ------------------------------------------------ | ----------------------------------------------------------- |
+| Page-level utility action | `Button.Default styleType="light"`               | Right of breadcrumb row — e.g. "View bookmarks"             |
+| Record title              | `Typography.HeadingXL as="h1"`                   | —                                                           |
+| Subtitle                  | `Typography.HeadingSM`                           | —                                                           |
+| Status badge              | Pill-shaped outlined span                        | Outlined border + matching text/bg colour. Never solid fill |
+| Description               | `Typography.BodyBL color=Colour["text-subtler"]` | One line, optional                                          |
+| Collapsible description   | Custom expand/collapse                           | Location + Booking only. "Show more ↓" / "Show less ↑"      |
+| Attribute rows            | Icon + `Typography.BodyBL`                       | Up to 3 rows                                                |
+| Timestamp                 | `Typography.BodySM color=Colour["text-subtler"]` | Last element in card content area                           |
+| CTAs (in card)            | `Button.Default` primary + secondary             | Description-based only                                      |
+| Alert                     | `Alert type="info"`                              | Outside the card                                            |
+| Section heading           | `Typography.HeadingSM as="h2"`                   | Outside any card                                            |
+| Section body              | `Typography.BodyBL`                              | One or more paragraphs                                      |
+
+## Status badge colour mapping
+
+| Status       | Colour          |
+| ------------ | --------------- |
+| Submitted    | Green / success |
+| Under review | Amber / warning |
+| Closed       | Blue / info     |
+| Rejected     | Red / error     |
+| Draft        | Grey / neutral  |
+
+---
+
+## Rules
+
+-   Breadcrumb is always present — users arriving via deep links need context
+-   Entity CTAs (Apply, Save) go inside the details card's right column — not in the breadcrumb row
+-   Page-level utility actions (View bookmarks) go in the breadcrumb row — not inside the card
+-   Content sections have no card wrapper — they are intentionally borderless
+-   Collapsible description: truncate at ~3 lines, "Show more ↓" / "Show less ↑" toggle
+-   Key attribute rows: icon + value, no separate field label, up to 3 rows
+-   No inline editing — navigate to a separate form screen for edits
+-   Status-change actions (Approve / Reject) confirmed via modal before executing
+-   When 2+ page-level utility actions exist, collapse into a kebab menu
+
+---
+
+## Complete template
+
+Description-based layout. Swap the body section for Location-based or Booking-based as needed.
+
+```tsx
+import { useState, useEffect } from "react";
+import styled from "styled-components";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Button } from "@lifesg/react-design-system/button";
+import { Alert } from "@lifesg/react-design-system/alert";
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+import { Spacing, Colour, MediaQuery } from "@lifesg/react-design-system/theme";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface ItemDetail {
+    id: string;
+    title: string;
+    subtitle: string;
+    description: string;
+    status: string;
+}
+
+// ─── Styled components ────────────────────────────────────────────────────────
+
+const PageWrapper = styled.div`
+    padding: ${Spacing["spacing-32"]} 0;
+    ${MediaQuery.MinWidth.lg} {
+        padding: ${Spacing["spacing-48"]} 0;
+    }
+`;
+
+const BreadcrumbRow = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: ${Spacing["spacing-24"]};
+`;
+
+const DetailCard = styled(Card)`
+    display: flex;
+    gap: ${Spacing["spacing-32"]};
+    padding: ${Spacing["spacing-32"]};
+`;
+
+const ContentArea = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: ${Spacing["spacing-16"]};
+`;
+
+const CtaColumn = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${Spacing["spacing-12"]};
+    width: 160px;
+    flex-shrink: 0;
+`;
+
+const ContentSection = styled.div`
+    margin-top: ${Spacing["spacing-32"]};
+    display: flex;
+    flex-direction: column;
+    gap: ${Spacing["spacing-16"]};
+`;
+
+const SubtleText = styled(Typography.BodyBL)`
+    color: ${Colour["text-subtler"]};
+`;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+interface DetailPageProps {
+    itemId: string;
+}
+
+export default function DetailPage({ itemId }: DetailPageProps) {
+    const [item, setItem] = useState<ItemDetail | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [fetchError, setFetchError] = useState<string | null>(null);
+    const [notFound, setNotFound] = useState(false);
+
+    useEffect(() => {
+        setIsLoading(true);
+        setFetchError(null);
+        setNotFound(false);
+        // FIXME: replace with actual API client and URL to fetch record, e.g.:
+        // apiClient
+        //   .get<ItemDetail>(`/api/v1/items/${itemId}`)
+        //   .then(({ data }) => setItem(data))
+        //   .catch((err) => {
+        //     if (err.status === 404) setNotFound(true);
+        //     else setFetchError(err.message);
+        //   })
+        //   .finally(() => setIsLoading(false));
+        setIsLoading(false);
+    }, [itemId]);
+
+    return (
+        <>
+            <Navbar
+                resources={{
+                    primary: { brandName: "MyService", logoSrc: "/logo.svg" },
+                }}
+                items={{ desktop: [] }}
+            />
+            <main>
+                <PageWrapper>
+                    <Layout.Container type="grid">
+                        <Layout.ColDiv xsCols={8} lgCols={12}>
+                            {/* Loading */}
+                            {isLoading && (
+                                <Typography.BodyMD>
+                                    Loading...
+                                </Typography.BodyMD>
+                            )}
+
+                            {/* 404 */}
+                            {!isLoading && notFound && (
+                                <ErrorDisplay
+                                    type="404"
+                                    actionButton={{
+                                        children: "Go back",
+                                        onClick: () => history.back(),
+                                    }}
+                                />
+                            )}
+
+                            {/* Fetch error */}
+                            {!isLoading && fetchError && (
+                                <Alert
+                                    type="error"
+                                    actionLink={{
+                                        children: "Try again",
+                                        onClick: () => window.location.reload(),
+                                    }}
+                                >
+                                    {fetchError}
+                                </Alert>
+                            )}
+
+                            {/* Content */}
+                            {!isLoading && !notFound && !fetchError && item && (
+                                <>
+                                    <BreadcrumbRow>
+                                        <Breadcrumb
+                                            items={[
+                                                { label: "Home", href: "/" },
+                                                {
+                                                    label: "Items",
+                                                    href: "/items",
+                                                },
+                                                { label: item.title },
+                                            ]}
+                                        />
+                                        {/* Page-level utility action — e.g. bookmark */}
+                                        {/* <Button.Default styleType="light">Bookmark</Button.Default> */}
+                                    </BreadcrumbRow>
+
+                                    <DetailCard>
+                                        <ContentArea>
+                                            <Typography.HeadingXL as="h1">
+                                                {item.title}
+                                            </Typography.HeadingXL>
+                                            <Typography.HeadingSM>
+                                                {item.subtitle}
+                                            </Typography.HeadingSM>
+                                            <SubtleText>
+                                                {item.description}
+                                            </SubtleText>
+                                        </ContentArea>
+                                        <CtaColumn>
+                                            <Button.Default styleType="default">
+                                                Apply
+                                            </Button.Default>
+                                            <Button.Default styleType="secondary">
+                                                Save
+                                            </Button.Default>
+                                        </CtaColumn>
+                                    </DetailCard>
+
+                                    <ContentSection>
+                                        <Typography.HeadingSM as="h2">
+                                            Section heading
+                                        </Typography.HeadingSM>
+                                        <Typography.BodyBL>
+                                            Section body paragraph.
+                                        </Typography.BodyBL>
+                                    </ContentSection>
+                                </>
+                            )}
+                        </Layout.ColDiv>
+                    </Layout.Container>
+                </PageWrapper>
+            </main>
+            <Footer />
+        </>
+    );
+}
+```
+
+---
+
+## Anti-patterns
+
+-   Do not use `Form.Input` or any form component to display read-only values — use `UnEditableSection` or plain `Typography`
+-   Do not omit the breadcrumb
+-   Do not hide empty sections with blank space — remove them entirely if no data
+-   Do not place the breadcrumb inside a `Card`
+-   Do not use `Typography.BodyBL` alone as a section heading — always `as="h2"` for accessibility
+-   Do not put entity CTAs in the breadcrumb row
+-   Do not put page-level utility actions inside the details card
+-   Do not wrap content sections in a `Card`
diff --git a/docs/skills/cc-flagship-ds/resources/v3/patterns/setup.md b/docs/skills/cc-flagship-ds/resources/v3/patterns/setup.md
new file mode 100644
index 0000000000..5a61310d3b
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/patterns/setup.md
@@ -0,0 +1,369 @@
+# App Setup — Flagship v3
+
+Full project setup for `@lifesg/react-design-system` v3. Work through all four steps before writing any component code.
+
+---
+
+## Step 1 — Install packages
+
+```bash
+pnpm add @lifesg/react-design-system @lifesg/react-icons styled-components @floating-ui/react @mui/icons-material @emotion/is-prop-valid
+```
+
+---
+
+## Step 2 — CSS (src/index.css)
+
+`main.css` must come first. Font stylesheet must match the selected theme.
+
+```css
+@import url("https://assets.life.gov.sg/react-design-system/v3/css/main.css");
+@import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
+```
+
+Font-to-theme mapping:
+
+| Font stylesheet             | Themes                              |
+| --------------------------- | ----------------------------------- |
+| `open-sans.css`             | LifeSG, CCube, MyLegacy, OneService |
+| `plus-jakarta-sans.css`     | BookingSG                           |
+| `lato.css`                  | PA                                  |
+| `libre-franklin.css`        | SupportGoWhere, SGW Digital Lobby   |
+| `poppins.css` + `inter.css` | SMGS (**both files required**)      |
+
+---
+
+## Step 3 — App.tsx
+
+> Use the two-argument `shouldForwardProp`. The single-argument form blocks non-HTML props (e.g. `styleType="no-border"`) from reaching inner React components through styled-component wrappers, causing visual rendering bugs.
+
+> Sticky footer: set `#root { min-height: 100vh; display: flex; flex-direction: column; }` in `index.css` and `<main style={{ flex: 1 }}>` in App.tsx. Do not use CSS Grid on `#root` — it overrides `Layout.Container`'s max-width.
+
+```tsx
+import { ThemeProvider, StyleSheetManager } from "styled-components";
+import styled from "styled-components";
+import isPropValid from "@emotion/is-prop-valid";
+import {
+    LifeSGTheme,
+    Spacing,
+    MediaQuery,
+} from "@lifesg/react-design-system/theme";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+import { Layout } from "@lifesg/react-design-system/layout";
+
+const PageWrapper = styled.div`
+    padding: ${Spacing["spacing-32"]} 0;
+
+    ${MediaQuery.MinWidth.lg} {
+        padding: ${Spacing["spacing-64"]} 0;
+    }
+`;
+
+export default function App() {
+    return (
+        <StyleSheetManager
+            shouldForwardProp={(prop, target) =>
+                typeof target === "string" ? isPropValid(prop) : true
+            }
+        >
+            <ThemeProvider theme={LifeSGTheme}>
+                <Navbar
+                    masthead
+                    items={{
+                        desktop: [{ id: "home", children: "Home", href: "/" }],
+                    }}
+                />
+                <main style={{ flex: 1 }}>
+                    <PageWrapper>
+                        <Layout.Container type="grid">
+                            {/* page content — ColDivs here */}
+                        </Layout.Container>
+                    </PageWrapper>
+                </main>
+                <Footer />
+            </ThemeProvider>
+        </StyleSheetManager>
+    );
+}
+```
+
+**All available theme objects:**
+
+```tsx
+import {
+    LifeSGTheme,
+    BookingSGTheme,
+    CCubeTheme,
+    MyLegacyTheme,
+    OneServiceTheme,
+    PATheme,
+    A11yPlaygroundTheme,
+    SupportGoWhereTheme,
+    SGWDigitalLobbyTheme,
+    IMDATheme,
+    SPFTheme,
+    SMGSTheme,
+} from "@lifesg/react-design-system/theme";
+```
+
+**Dark/light mode:** swap `ThemeProvider` for `DSThemeProvider` (auto-detects OS preference). Pass `LifeSGTheme.light` or `LifeSGTheme.dark` to force a fixed mode.
+
+```tsx
+import { DSThemeProvider } from "@lifesg/react-design-system/theme";
+
+// inside the same StyleSheetManager wrapper:
+<DSThemeProvider theme={LifeSGTheme}>{/* app */}</DSThemeProvider>;
+```
+
+---
+
+## Step 4 — Vite config
+
+```ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({ plugins: [react()] });
+```
+
+---
+
+## Checklist
+
+-   [ ] `main.css` imported first; font stylesheet matches theme (SMGS = two files)
+-   [ ] `StyleSheetManager` uses two-argument `shouldForwardProp`
+-   [ ] `ThemeProvider` (or `DSThemeProvider`) wraps the app with the correct theme object
+-   [ ] `#root` has `min-height: 100vh; display: flex; flex-direction: column`
+
+---
+
+## TypeScript setup
+
+Create `src/styled.d.ts` once per project so `Colour[...]` and `Spacing[...]` interpolations resolve without TypeScript errors:
+
+```ts
+// src/styled.d.ts
+import "styled-components";
+import { ThemeSpec } from "@lifesg/react-design-system/theme/types";
+
+declare module "styled-components" {
+    export interface DefaultTheme extends ThemeSpec {
+        maxColumns?: {
+            xxs: 8;
+            xs: 8;
+            sm: 8;
+            md: 8;
+            lg: 12;
+            xl: 12;
+            xxl: 12;
+        };
+    }
+}
+```
+
+---
+
+## ThemeSpec structure
+
+A `ThemeSpec` object is composed of several scheme keys:
+
+```ts
+{
+  colourScheme: "lifesg",
+  fontScheme: "default",
+  motionScheme: "default",
+  borderScheme: "default",
+  spacingScheme: "default",
+  radiusScheme: "default",
+  breakpointScheme: "default",
+  resourceScheme: "lifesg"
+}
+```
+
+---
+
+## DSThemeProvider
+
+**Import:** `import { DSThemeProvider } from "@lifesg/react-design-system/theme"`
+
+Use `DSThemeProvider` for all new projects and any project that requires dark mode token switching. Never use both `ThemeProvider` and `DSThemeProvider` simultaneously. Never import `Theme` from `@lifesg/react-design-system/theme` (that export does not exist).
+
+**Key props:**
+
+| Prop       | Type        | Required | Notes                                                                                  |
+| ---------- | ----------- | -------- | -------------------------------------------------------------------------------------- |
+| `theme`    | `ThemeSpec` | yes      | A preset theme object. Pass `LifeSGTheme.light` or `LifeSGTheme.dark` to force a mode. |
+| `children` | `ReactNode` | yes      | The entire React component tree.                                                       |
+
+**Canonical usage:**
+
+```tsx
+// Auto mode (follows system prefers-color-scheme)
+<DSThemeProvider theme={LifeSGTheme}><App /></DSThemeProvider>
+
+// Force light mode regardless of system preference
+<DSThemeProvider theme={LifeSGTheme.light}><App /></DSThemeProvider>
+
+// Force dark mode regardless of system preference
+<DSThemeProvider theme={LifeSGTheme.dark}><App /></DSThemeProvider>
+```
+
+**Known limitations:**
+
+-   Prefer `Colour[]` interpolation functions over accessing `props.theme` directly — `DSThemeProvider` does not guarantee a fully resolved `ThemeObject` on `props.theme`
+-   The per-element `modifiedProps` override pattern is valid only with `ThemeProvider` directly, not with `DSThemeProvider`
+-   There is no export named `Theme` — using it throws a runtime error
+
+---
+
+## Advanced Theme Customisation
+
+### Custom theme from scratch
+
+```tsx
+import { ThemeSpec } from "@lifesg/react-design-system/theme";
+import { ThemeProvider } from "styled-components";
+
+const myTheme: ThemeSpec = {
+    colourScheme: "bookingsg",
+    fontScheme: "default",
+    motionScheme: "default",
+    borderScheme: "default",
+    spacingScheme: "default",
+    radiusScheme: "default",
+    breakpointScheme: "default",
+    resourceScheme: "mylegacy",
+};
+
+<ThemeProvider theme={myTheme}>
+    <App />
+</ThemeProvider>;
+```
+
+### Extending a preset
+
+```tsx
+const customTheme: ThemeSpec = {
+    ...LifeSGTheme,
+    overrides: {
+        primitiveColour: { "primary-10": "#F3C85C" },
+        font: {
+            "heading-size-xxl": "4rem",
+            "heading-lh-xxl": "4.5rem",
+        },
+    },
+};
+```
+
+### Per-element theme override (ThemeProvider only — not supported with DSThemeProvider)
+
+```tsx
+import { Colour } from "@lifesg/react-design-system/theme";
+import styled, { css } from "styled-components";
+
+const SomeComponent = styled.div`
+    ${(props) => {
+        const modifiedProps = {
+            ...props,
+            theme: { ...props.theme, colourScheme: "bookingsg" },
+        };
+        return css`
+            background: ${Colour["background-error"](modifiedProps)};
+        `;
+    }}
+`;
+```
+
+---
+
+## Dark Mode
+
+| Theme passed        | Behaviour                                    |
+| ------------------- | -------------------------------------------- |
+| `LifeSGTheme`       | Auto — follows system `prefers-color-scheme` |
+| `LifeSGTheme.light` | Always light, ignores system preference      |
+| `LifeSGTheme.dark`  | Always dark, ignores system preference       |
+
+The same `.light` / `.dark` sub-properties exist on every theme preset (e.g. `SupportGoWhereTheme.light`).
+
+> For citizen-facing government applications where design requires light mode, pass `LifeSGTheme.light` rather than the bare `LifeSGTheme` — this prevents the UI from shifting to dark when users have a dark system preference.
+
+**Manual user toggle:**
+
+```tsx
+const [preference, setPreference] = useState<"light" | "dark" | "auto">("auto");
+
+const currentTheme =
+    preference === "dark"
+        ? LifeSGTheme.dark
+        : preference === "light"
+        ? LifeSGTheme.light
+        : LifeSGTheme;
+
+<DSThemeProvider theme={currentTheme}>
+    <App />
+</DSThemeProvider>;
+```
+
+**`useDSTheme` hook (read the active colour mode):**
+
+```tsx
+import { useDSTheme } from "@lifesg/react-design-system/theme";
+
+const { colourMode, theme } = useDSTheme();
+```
+
+**Extending dark mode overrides:**
+
+```tsx
+const customTheme: ThemeSpec = {
+    ...LifeSGTheme,
+    overrides: {
+        primitiveColour: { "primary-50": "#0066cc" },
+        primitiveColourDark: { "primary-50": "#4d94ff" },
+        semanticColour: { text: "#2c2c2c" },
+        semanticColourDark: { text: "#f0f0f0" },
+    },
+};
+```
+
+Without `semanticColourDark` / `primitiveColourDark`, the light-mode override values are used in both modes.
+
+---
+
+## Migration — ThemeProvider to DSThemeProvider
+
+### Step 1 — Replace the root provider
+
+```tsx
+// Before
+import { ThemeProvider } from "styled-components";
+<ThemeProvider theme={LifeSGTheme}>
+    <App />
+</ThemeProvider>;
+
+// After
+import { DSThemeProvider } from "@lifesg/react-design-system/theme";
+<DSThemeProvider theme={LifeSGTheme}>
+    <App />
+</DSThemeProvider>;
+```
+
+### Step 2 — Add dark mode overrides (if using custom colours)
+
+```tsx
+const customTheme = {
+    ...LifeSGTheme,
+    overrides: {
+        primitiveColour: { "primary-50": "#0066cc" },
+        primitiveColourDark: { "primary-50": "#4d94ff" },
+        semanticColour: { text: "#custom-light" },
+        semanticColourDark: { text: "#custom-dark" },
+    },
+};
+```
+
+### Step 3 — Test both modes
+
+Toggle system preference or use browser DevTools to simulate `prefers-color-scheme: dark`. Existing styled-components using `Colour` and `Spacing` interpolation functions will adapt automatically.
diff --git a/docs/skills/cc-flagship-ds/resources/v3/patterns/states.md b/docs/skills/cc-flagship-ds/resources/v3/patterns/states.md
new file mode 100644
index 0000000000..7afde1fa79
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/patterns/states.md
@@ -0,0 +1,305 @@
+# States Pattern
+
+Loading, empty, error, and success states for async operations and data absence.
+
+---
+
+## Loading states
+
+### Full-page loading
+
+```tsx
+import styled from "styled-components";
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+const LoadingCard = styled(Card)`
+    text-align: center;
+    padding: ${Spacing["spacing-64"]} ${Spacing["spacing-32"]};
+`;
+
+if (isLoading) {
+    return (
+        <Layout.Container type="grid">
+            <Layout.ColDiv xsCols={8} lgCols={12}>
+                <LoadingCard>
+                    <LoadingSpinner />{" "}
+                    {/* import { LoadingSpinner } from "@lifesg/react-design-system/loading-spinner" */}
+                    <Typography.BodyBL>Loading...</Typography.BodyBL>
+                </LoadingCard>
+            </Layout.ColDiv>
+        </Layout.Container>
+    );
+}
+```
+
+### Skeleton loading (preferred for content-heavy pages)
+
+Render placeholder blocks matching the shape of real content. Use a CSS `pulse` animation (`opacity 0.5 → 1` at 1.5s). Show the same grid structure as the loaded state — same column count, same card shapes.
+
+### Button loading (inline async)
+
+```tsx
+<Button.Default type="submit" loading={isSubmitting} disabled={isSubmitting}>
+    {isSubmitting ? "Submitting..." : "Submit"}
+</Button.Default>
+```
+
+Always combine `loading` + `disabled` during async to prevent double-submission.
+
+---
+
+## Empty states
+
+### First-time use (no data)
+
+```tsx
+import styled from "styled-components";
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { ButtonWithIcon } from "@lifesg/react-design-system/button-with-icon";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+const EmptyCard = styled(Card)`
+    text-align: center;
+    padding: ${Spacing["spacing-64"]} ${Spacing["spacing-32"]};
+`;
+
+const EmptyButton = styled(ButtonWithIcon.Default)`
+    margin-top: ${Spacing["spacing-24"]};
+`;
+
+<EmptyCard>
+    <Typography.HeadingSM>No items yet</Typography.HeadingSM>
+    <Typography.BodyBL>
+        Get started by creating your first item
+    </Typography.BodyBL>
+    <EmptyButton icon={<PlusIcon />} onClick={handleCreate}>
+        Create item
+    </EmptyButton>
+</EmptyCard>;
+```
+
+### No search results
+
+```tsx
+import styled from "styled-components";
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Button } from "@lifesg/react-design-system/button";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+const EmptyCard = styled(Card)`
+    text-align: center;
+    padding: ${Spacing["spacing-64"]} ${Spacing["spacing-32"]};
+`;
+
+const EmptyButton = styled(Button.Default)`
+    margin-top: ${Spacing["spacing-24"]};
+`;
+
+<EmptyCard>
+    <Typography.HeadingSM>No results found</Typography.HeadingSM>
+    <Typography.BodyBL>Try adjusting your search or filters</Typography.BodyBL>
+    <EmptyButton styleType="secondary" onClick={handleClearFilters}>
+        Clear filters
+    </EmptyButton>
+</EmptyCard>;
+```
+
+For listing pages, prefer `ErrorDisplay type="no-item-found"` over a custom card.
+
+### Empty section (within a page)
+
+```tsx
+import styled from "styled-components";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Colour, Spacing } from "@lifesg/react-design-system/theme";
+
+const EmptySection = styled.div`
+    text-align: center;
+    padding: ${Spacing["spacing-32"]} 0;
+`;
+
+const MutedText = styled(Typography.BodySM)`
+    color: ${Colour["text-subtler"]};
+`;
+
+<EmptySection>
+    <MutedText>No recent activity to display</MutedText>
+</EmptySection>;
+```
+
+---
+
+## Error states
+
+### API / fetch error
+
+```tsx
+import { Alert } from "@lifesg/react-design-system/alert";
+import { Layout } from "@lifesg/react-design-system/layout";
+
+if (error) {
+    return (
+        <Layout.Container type="grid">
+            <Layout.ColDiv xsCols={8} lgCols={12}>
+                <Alert
+                    type="error"
+                    actionLink={{
+                        children: "Try again",
+                        onClick: () => window.location.reload(),
+                    }}
+                >
+                    {error.message}
+                </Alert>
+            </Layout.ColDiv>
+        </Layout.Container>
+    );
+}
+```
+
+### 404 Not found
+
+```tsx
+import styled from "styled-components";
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Button } from "@lifesg/react-design-system/button";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+const ErrorCard = styled(Card)`
+    text-align: center;
+    padding: ${Spacing["spacing-64"]} ${Spacing["spacing-32"]};
+`;
+
+const ErrorButton = styled(Button.Default)`
+    margin-top: ${Spacing["spacing-24"]};
+`;
+
+<ErrorCard>
+    <Typography.HeadingXL>404</Typography.HeadingXL>
+    <Typography.HeadingSM>Page not found</Typography.HeadingSM>
+    <Typography.BodyBL>
+        The page you're looking for doesn't exist or has been moved
+    </Typography.BodyBL>
+    <ErrorButton onClick={() => navigate("/")}>Go to home</ErrorButton>
+</ErrorCard>;
+```
+
+### Permission denied
+
+```tsx
+<ErrorCard>
+    <Typography.HeadingSM>Access denied</Typography.HeadingSM>
+    <Typography.BodyBL>
+        You don't have permission to view this page
+    </Typography.BodyBL>
+    <ErrorButton styleType="secondary" onClick={() => navigate("/")}>
+        Go to home
+    </ErrorButton>
+</ErrorCard>
+```
+
+---
+
+## Success states
+
+### Inline success
+
+```tsx
+<Alert
+    type="success"
+    actionLink={{ children: "View details", onClick: handleViewDetails }}
+>
+    {successMessage}
+</Alert>
+```
+
+### Toast notification
+
+```tsx
+Toast.success("Changes saved successfully"); // auto-dismisses
+Toast.error("Failed to save changes");
+```
+
+Use `Toast` for non-critical feedback. Use `Alert` for errors requiring action.
+
+### Full-page success (major operations)
+
+```tsx
+import styled from "styled-components";
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Button } from "@lifesg/react-design-system/button";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+const SuccessCard = styled(Card)`
+    text-align: center;
+    padding: ${Spacing["spacing-64"]} ${Spacing["spacing-32"]};
+`;
+
+const SuccessActions = styled.div`
+    display: flex;
+    gap: ${Spacing["spacing-16"]};
+    justify-content: center;
+    margin-top: ${Spacing["spacing-32"]};
+`;
+
+<SuccessCard>
+    <Typography.HeadingMD>
+        Application submitted successfully
+    </Typography.HeadingMD>
+    <Typography.BodyBL>Your application is being processed</Typography.BodyBL>
+    <SuccessActions>
+        <Button.Default onClick={() => navigate("/applications")}>
+            View applications
+        </Button.Default>
+        <Button.Default styleType="secondary" onClick={() => navigate("/")}>
+            Go to home
+        </Button.Default>
+    </SuccessActions>
+</SuccessCard>;
+```
+
+---
+
+## State management pattern
+
+```tsx
+const [state, setState] = useState({
+    data: null,
+    isLoading: true,
+    error: null,
+});
+
+// In component:
+if (state.isLoading) return <LoadingState />;
+if (state.error) return <ErrorState message={state.error} />;
+if (!state.data || state.data.length === 0) return <EmptyState />;
+return <DataDisplay data={state.data} />;
+```
+
+---
+
+## Rules
+
+-   Show loading feedback for any operation taking longer than 200ms
+-   Prefer skeleton loading over a spinner for content-heavy initial page loads
+-   Always provide a way out of an error state (retry, go home)
+-   Empty state messages: 1–2 sentences max, action-oriented, sentence case
+-   Error messages: name the specific problem — never "An error occurred"
+-   `Toast` auto-dismisses — use for confirmations; use `Alert` for errors needing action
+-   Full-page state containers: `padding: spacing-64 spacing-32`, `textAlign: center`, inside a `styled(Card)`
+-   Disable interactive elements during loading to prevent race conditions
+
+## Anti-patterns
+
+-   Do not show a spinner for operations under 200ms — causes flicker
+-   Do not show an empty container with no state message in a listing page
+-   Do not use `Toast` for critical errors — user may miss it
+-   Do not use generic error text — always tell the user what failed
+-   Do not leave submit buttons enabled during async — always set `disabled` + `loading`
+-   Do not use `style={{}}` for spacing or color — use `styled()` with `Spacing` and `Colour` tokens
diff --git a/docs/skills/cc-flagship-ds/resources/v3/templates/form.md b/docs/skills/cc-flagship-ds/resources/v3/templates/form.md
new file mode 100644
index 0000000000..ffea31f014
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/templates/form.md
@@ -0,0 +1,555 @@
+# Form Template
+
+Single or multi-step form page built with `@lifesg/react-design-system` v3.
+
+## When to use
+
+-   Collecting user input across one or more steps
+-   Profile, settings, or data-entry pages
+
+---
+
+## Page shell
+
+Narrow-content shell — `Navbar` + `PageWrapper` (styled div) inside `<main>` + `Footer`. Two sibling `ColDiv`s inside the grid: one full-width row for `ProgressIndicator` (multi-step only), one narrow row for the form body.
+
+```tsx
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+import { Layout } from "@lifesg/react-design-system/layout";
+import styled from "styled-components";
+import { Spacing, MediaQuery } from "@lifesg/react-design-system/theme";
+
+const PageWrapper = styled.div`
+  padding: ${Spacing["spacing-32"]} 0;
+  ${MediaQuery.MinWidth.lg} {
+    padding: ${Spacing["spacing-64"]} 0;
+  }
+`;
+
+// Usage:
+<Navbar resources={{ primary: { brandName: "MyService", logoSrc: "/logo.svg" } }} items={{ desktop: [] }} />
+<main>
+  <PageWrapper>
+    <Layout.Container type="grid">
+      {/* ProgressColDiv — multi-step only; omit for single-step */}
+      <Layout.ColDiv xsCols={12} lgCols={12}> ... </Layout.ColDiv>
+      {/* FormColDiv — always present */}
+      <Layout.ColDiv xsCols={12} lgCols={9} xlCols={8}> ... </Layout.ColDiv>
+    </Layout.Container>
+  </PageWrapper>
+</main>
+<Footer />
+```
+
+## Page anatomy
+
+```
+┌──────────────────────────────────────────────────────────┐
+│ Navbar                                                   │
+├──────────────────────────────────────────────────────────┤
+│  PageWrapper (padding: spacing-32 0; lg: spacing-64)     │
+│  └─ Layout.Container type="grid"                         │
+│     ├─ ProgressColDiv xsCols={12} lgCols={12}            │
+│     │  └─ ProgressIndicator  (multi-step only)           │
+│     └─ FormColDiv xsCols={12} lgCols={9} xlCols={8}      │
+│        │  flex column · gap: spacing-32                   │
+│        ├─ PageHeadingBlock (flex column · gap: 16)        │
+│        │  ├─ PageTitle (h1)                               │
+│        │  └─ PageDescription (p, optional)               │
+│        ├─ FormContent                                     │
+│        │  └─ Form fields (built-in margin-bottom: 32)    │
+│        │     Non-form components → margin-bottom: 32     │
+│        └─ FormNav                                        │
+├──────────────────────────────────────────────────────────┤
+│ Footer                                                   │
+└──────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Step state machine
+
+```tsx
+const STEPS = ["Step one", "Step two", "Review"];
+const [step, setStep] = useState(0);
+const isLastStep = step === STEPS.length - 1;
+```
+
+-   `currentIndex` on `ProgressIndicator` is **zero-based**
+-   `ProgressIndicator` sits in its own `Layout.ColDiv xsCols={12} lgCols={12}` — never inside the 8/9-col form column
+-   Page heading defaults to `{STEPS[step]}`; override per step only when the heading needs to differ from the label
+-   The review step is **required** as the last entry in `STEPS`
+
+Single-step forms: omit `ProgressColDiv`/`ProgressIndicator` entirely and pass no `onBack` to `FormNav`.
+
+---
+
+## Per-step validation
+
+Validate the current step before advancing — never let `onNext` proceed with invalid fields.
+
+```tsx
+function validateStep(step: number): Record<string, string> {
+    const errors: Record<string, string> = {};
+    if (step === 0) {
+        if (!name.trim()) errors.name = "Enter your full name";
+        if (!email.trim()) errors.email = "Enter your email address";
+        else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
+            errors.email = "Enter a valid email address";
+    }
+    if (step === 1) {
+        // step 2 checks
+    }
+    return errors;
+}
+
+const [errors, setErrors] = useState<Record<string, string>>({});
+
+function handleNext() {
+    const stepErrors = validateStep(step);
+    setErrors(stepErrors);
+    if (Object.keys(stepErrors).length > 0) return;
+    if (!isLastStep) setStep((s) => s + 1);
+    else handleSubmit();
+}
+```
+
+-   Validate on `Next`, not on every keystroke — re-validate live only once a field already shows an `errorMessage`
+-   Pass `errorMessage={errors.fieldName}` directly to the `Form.*` component — never render a separate error block
+-   `Back` never triggers validation — always allowed
+-   Clear a field's error as soon as its value changes, even before the next `Next` press
+-   On the review step, skip validation — the user already passed prior steps
+
+---
+
+## Rules
+
+|                          | Wrong                                 | Correct                                                                                                                                                                 |
+| ------------------------ | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Column width             | `lgCols={12}`                         | `lgCols={9} xlCols={8}`                                                                                                                                                 |
+| Progress indicator       | Inside 8-col div                      | Separate `lgCols={12}` ColDiv; `currentIndex` is zero-based                                                                                                             |
+| Page heading             | Static string                         | Defaults to `{STEPS[step]}`; override per step as needed                                                                                                                |
+| Field spacing            | `gap` on wrapper div                  | Rely on component built-in `margin-bottom: 32`; add `margin-bottom: spacing-32` via `styled()` for components without it (BoxContainer, Toggle, FileUpload, ESignature) |
+| Constrained-width inputs | `width` on `styled(Form.X)`           | `max-width` — works alongside internal `width: 100%`                                                                                                                    |
+| Review step              | Omitting                              | Required as last step — one `BoxContainer` per preceding step                                                                                                           |
+| Optional fields          | Marking required fields with asterisk | All fields are required by default; add `"(optional)"` to the label of fields not validated in `validateStep`                                                           |
+
+---
+
+## FormNav
+
+Back left · Next right · Extra actions to the left of Next.
+
+**Buttons:** Next → `"default"` · Back → `"secondary"` · Other → `"light"`.
+
+Responsive sizing — copy exactly from the `FormNav.tsx` block below:
+
+-   Mobile: `width: 100%`, stacked column
+-   Desktop (`lg`): `width: auto; min-width: 10rem`, row layout, all buttons equalised to widest via `useLayoutEffect`
+
+**Do not simplify — omitting the `MediaQuery` override causes full-width buttons on desktop.**
+
+```tsx
+// FormNav.tsx
+import { useRef, useLayoutEffect } from "react";
+import styled from "styled-components";
+import { Spacing, MediaQuery } from "@lifesg/react-design-system/theme";
+import { Button } from "@lifesg/react-design-system/button";
+
+interface FormNavProps {
+    onBack?: () => void;
+    onNext: () => void;
+    nextLabel?: string;
+    isSubmitting?: boolean;
+    actions?: React.ReactNode;
+}
+
+const Nav = styled.div`
+    margin-top: ${Spacing["spacing-32"]};
+    display: flex;
+    flex-direction: column;
+    gap: ${Spacing["spacing-24"]};
+    ${MediaQuery.MinWidth.lg} {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0;
+    }
+`;
+
+const PrimaryGroup = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${Spacing["spacing-16"]};
+    ${MediaQuery.MinWidth.lg} {
+        flex-direction: row;
+        gap: ${Spacing["spacing-16"]};
+        order: 2;
+        margin-left: auto;
+    }
+`;
+
+const NextButton = styled(Button.Default)`
+    box-sizing: border-box;
+    width: 100%;
+    ${MediaQuery.MinWidth.lg} {
+        width: auto;
+        min-width: 10rem;
+        order: 1;
+    }
+`;
+
+const ActionsGroup = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${Spacing["spacing-16"]};
+    & > button {
+        box-sizing: border-box;
+        width: 100%;
+    }
+    ${MediaQuery.MinWidth.lg} {
+        flex-direction: row;
+        gap: ${Spacing["spacing-16"]};
+        & > button {
+            width: auto;
+            min-width: 10rem;
+        }
+    }
+`;
+
+const BackButton = styled(Button.Default)`
+    box-sizing: border-box;
+    width: 100%;
+    ${MediaQuery.MinWidth.lg} {
+        width: auto;
+        min-width: 10rem;
+        order: 1;
+    }
+`;
+
+export default function FormNav({
+    onBack,
+    onNext,
+    nextLabel = "Next",
+    isSubmitting = false,
+    actions,
+}: FormNavProps) {
+    const navRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (!navRef.current) return;
+        const buttons = Array.from(
+            navRef.current.querySelectorAll<HTMLElement>("button")
+        );
+        buttons.forEach((b) => {
+            b.style.width = "";
+        });
+        if (!window.matchMedia("(min-width: 1024px)").matches) return;
+        const widest = Math.max(...buttons.map((b) => b.offsetWidth));
+        buttons.forEach((b) => {
+            b.style.width = `${widest}px`;
+        });
+    });
+
+    return (
+        <Nav ref={navRef}>
+            <PrimaryGroup>
+                <NextButton
+                    styleType="default"
+                    onClick={onNext}
+                    loading={isSubmitting}
+                    disabled={isSubmitting}
+                >
+                    {nextLabel}
+                </NextButton>
+                {actions && <ActionsGroup>{actions}</ActionsGroup>}
+            </PrimaryGroup>
+            {onBack && (
+                <BackButton
+                    styleType="secondary"
+                    onClick={onBack}
+                    disabled={isSubmitting}
+                >
+                    Back
+                </BackButton>
+            )}
+        </Nav>
+    );
+}
+```
+
+Usage:
+
+```tsx
+<FormNav
+    onBack={step > 0 ? () => setStep((s) => s - 1) : undefined}
+    onNext={handleNext}
+    nextLabel={isLastStep ? "Submit" : "Next"}
+    actions={
+        <Button.Default styleType="light" onClick={saveDraft}>
+            Save draft
+        </Button.Default>
+    }
+/>
+```
+
+---
+
+## Review step
+
+Last step of every multi-step form. One `BoxContainer` per preceding step.
+
+```tsx
+import { BoxContainer } from "@lifesg/react-design-system/box-container";
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+
+const StyledBoxContainer = styled(BoxContainer)`
+    margin-bottom: ${Spacing["spacing-32"]};
+`;
+
+const SummaryPadding = styled.div`
+    padding: ${Spacing["spacing-20"]};
+    ${MediaQuery.MinWidth.md} {
+        padding: ${Spacing["spacing-32"]};
+    }
+`;
+
+{
+    step === STEPS.length - 1 && (
+        <StyledBoxContainer title="Step one" collapsible expanded>
+            <SummaryPadding>
+                <UneditableSection
+                    fullWidth
+                    background={false}
+                    items={[
+                        {
+                            label: "Short field",
+                            value: valueA || "—",
+                            displayWidth: "half",
+                        },
+                        {
+                            label: "Short field",
+                            value: valueB || "—",
+                            displayWidth: "half",
+                        },
+                        { label: "Long field", value: longValue || "—" },
+                    ]}
+                />
+            </SummaryPadding>
+        </StyledBoxContainer>
+    );
+}
+```
+
+-   `background={false}` — removes default background when inside `BoxContainer`
+-   `fullWidth` — fills container without `Layout.Content` spacing
+-   `displayWidth: "half"` — two short fields per row; omit for long values
+-   Show `"—"` for unanswered fields
+-   Review-step fields are `readOnly`, never `disabled` — `disabled` reads as broken to screen readers
+
+---
+
+## Sticky action bar
+
+For forms longer than one viewport height, fix the action buttons at the bottom instead of the inline `FormNav`.
+
+```tsx
+const StickyBar = styled.div`
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: ${Colour["bg-stronger"]};
+    padding: ${Spacing["spacing-16"]} ${Spacing["spacing-24"]};
+    display: flex;
+    justify-content: flex-end;
+    gap: ${Spacing["spacing-16"]};
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
+`;
+```
+
+Do not show both `FormNav` and a sticky bar — use one or the other.
+
+---
+
+## Anti-patterns
+
+-   Do not validate all steps upfront — only the current step, on `Next`
+-   Do not use `disabled` for read-only review fields — use `readOnly`
+-   Do not skip the review step on a multi-step form
+-   Do not put `ProgressIndicator` inside the 8/9-col form column
+-   Do not hardcode step count logic — derive `isLastStep` from `STEPS.length`
+-   Do not let `Back` trigger validation — it must always be allowed
+
+---
+
+## Complete template
+
+This renders the inner grid content only (ColDivs and form body). Wrap with the page shell defined in `## Page shell` above — `<Navbar />`, `<main><PageWrapper><Layout.Container type="grid">`, this content, `</Layout.Container></PageWrapper></main>`, `<Footer />`.
+
+```tsx
+import { useState } from "react";
+import styled from "styled-components";
+import { Spacing, MediaQuery } from "@lifesg/react-design-system/theme";
+import { Form } from "@lifesg/react-design-system/form";
+import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Alert } from "@lifesg/react-design-system/alert";
+import FormNav from "./FormNav";
+
+const ProgressColDiv = styled(Layout.ColDiv)`
+    margin-bottom: ${Spacing["spacing-32"]};
+`;
+
+const FormColDiv = styled(Layout.ColDiv)`
+    display: flex;
+    flex-direction: column;
+    gap: ${Spacing["spacing-32"]};
+`;
+
+const PageHeadingBlock = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${Spacing["spacing-16"]};
+`;
+
+const PageTitle = styled.h1`
+    margin: 0;
+`;
+
+const PageDescription = styled.p`
+    margin: 0;
+`;
+
+const FormContent = styled.div``;
+
+const STEPS = ["Step one", "Step two", "Review"];
+
+const CATEGORY_OPTIONS = [
+    { label: "Option A", value: "a" },
+    { label: "Option B", value: "b" },
+];
+
+export default function FormPage() {
+    const [step, setStep] = useState(0);
+    const isLastStep = step === STEPS.length - 1;
+
+    // Step 1 fields
+    const [name, setName] = useState("");
+    const [category, setCategory] = useState("");
+
+    const [errors, setErrors] = useState<Record<string, string>>({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState<string | null>(null);
+
+    function validateStep(s: number): Record<string, string> {
+        const e: Record<string, string> = {};
+        if (s === 0) {
+            if (!name.trim()) e.name = "Enter your full name";
+            if (!category) e.category = "Select a category";
+        }
+        return e;
+    }
+
+    function handleNext() {
+        const stepErrors = validateStep(step);
+        setErrors(stepErrors);
+        if (Object.keys(stepErrors).length > 0) return;
+        if (!isLastStep) setStep((s) => s + 1);
+        else handleSubmit();
+    }
+
+    async function handleSubmit() {
+        setIsSubmitting(true);
+        setSubmitError(null);
+        try {
+            // FIXME: replace with actual API client and submission endpoint, e.g.:
+            // await apiClient.post("/api/v1/submissions", { name, category });
+            console.log("submitted", { name, category });
+        } catch (err: unknown) {
+            setSubmitError(
+                err instanceof Error
+                    ? err.message
+                    : "Submission failed. Please try again."
+            );
+        } finally {
+            setIsSubmitting(false);
+        }
+    }
+
+    // Render inside: <Layout.Container type="grid"> ... </Layout.Container>
+    return (
+        <>
+            <ProgressColDiv xsCols={12} lgCols={12}>
+                <ProgressIndicator
+                    steps={STEPS}
+                    currentIndex={step}
+                    displayExtractor={(s) => s}
+                />
+            </ProgressColDiv>
+
+            <FormColDiv xsCols={12} lgCols={9} xlCols={8}>
+                <PageHeadingBlock>
+                    <PageTitle>{STEPS[step]}</PageTitle>
+                    {/* <PageDescription>Optional description</PageDescription> */}
+                </PageHeadingBlock>
+
+                {submitError && <Alert type="error">{submitError}</Alert>}
+
+                <FormContent>
+                    {step === 0 && (
+                        <>
+                            <Form.Input
+                                label="Full name"
+                                value={name}
+                                onChange={(e) => {
+                                    setName(e.target.value);
+                                    if (errors.name)
+                                        setErrors((prev) => ({
+                                            ...prev,
+                                            name: "",
+                                        }));
+                                }}
+                                errorMessage={errors.name}
+                            />
+                            <Form.Select
+                                label="Category"
+                                options={CATEGORY_OPTIONS}
+                                selectedOption={CATEGORY_OPTIONS.find(
+                                    (o) => o.value === category
+                                )}
+                                onSelectOption={(opt) => {
+                                    setCategory(opt.value);
+                                    if (errors.category)
+                                        setErrors((prev) => ({
+                                            ...prev,
+                                            category: "",
+                                        }));
+                                }}
+                                errorMessage={errors.category}
+                            />
+                        </>
+                    )}
+                    {step === 1 && <>{/* step 2 fields */}</>}
+                </FormContent>
+
+                <FormNav
+                    onBack={step > 0 ? () => setStep((s) => s - 1) : undefined}
+                    onNext={handleNext}
+                    nextLabel={isLastStep ? "Submit" : "Next"}
+                    isSubmitting={isSubmitting}
+                />
+            </FormColDiv>
+        </>
+    );
+}
+```
+
+---
+
+## Notes
+
+-   Single-step: omit `ProgressIndicator` and pass no `onBack` to `FormNav`
+-   Pass `actions` to `FormNav` for secondary actions like Save draft
+-   `Form.MaskedInput` and other complex inputs require two-argument `shouldForwardProp` in `App.tsx` — see `setup-v3.md`
diff --git a/docs/skills/cc-flagship-ds/resources/v3/templates/listing.md b/docs/skills/cc-flagship-ds/resources/v3/templates/listing.md
new file mode 100644
index 0000000000..7154459d89
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v3/templates/listing.md
@@ -0,0 +1,579 @@
+# Listing Template
+
+Pages whose primary goal is finding, scanning, or filtering a collection of records.
+
+## When to use
+
+-   Search results, service directories, record indexes
+-   Transaction histories, application lists
+-   Any screen presenting multiple instances of the same entity type
+
+Do not use for:
+
+-   A single record's detail → use `detail.md`
+-   A mixed overview with stats and no primary table → use `dashboard.md`
+
+---
+
+## Page shell
+
+`Navbar` → `<main><PageWrapper><Layout.Container type="grid">` → `<Footer />`. Content lives in a single full-width `ColDiv xsCols={8} lgCols={12}`. For the two-column filter variant, a `TwoColumn` flex div (gap: `spacing-32`) wraps `FilterSidebar` (width: 278px, flex-shrink: 0) and `ResultsArea` (flex: 1) inside that ColDiv.
+
+```
+Navbar
+main
+  PageWrapper (padding: spacing-32 0; lg: spacing-48)
+  └── Layout.Container type="grid"
+        └── Layout.ColDiv xsCols={8} lgCols={12}
+              SearchRow (optional)
+              TwoColumn
+                ├── FilterSidebar (278px) — omit for search-only variant
+                │     Filter
+                └── ResultsArea (flex-1)
+                      ResultCountRow
+                      ErrorDisplay type="no-item-found"  ← empty state
+                      Card list / DataTable
+                      Pagination (centred)
+Footer
+```
+
+On mobile the filter sidebar should be hidden behind a modal — `Filter` handles this automatically when `toggleFilterAtBreakpoint` is set.
+
+Use the **Complete template** below as the starting point — it wires all of these together in a single runnable file.
+
+---
+
+## Required components
+
+| Slot           | Component                                       | Required |
+| -------------- | ----------------------------------------------- | -------- |
+| Navigation     | `Navbar` (masthead enabled)                     | Yes      |
+| Results        | `Card` list/grid **or** `DataTable`             | Yes      |
+| Result count   | `Typography.BodyMD` — "X result(s) found"       | Yes      |
+| Footer         | `Footer`                                        | Yes      |
+| Hero banner    | Custom styled section                           | No       |
+| Search bar     | `Form.Input` + `Form.Select` + `Button.Default` | No\*     |
+| Breadcrumb     | `Breadcrumb`                                    | No       |
+| Alert          | `Alert type="info"`                             | No       |
+| View toggle    | `Tab`                                           | No       |
+| Filter sidebar | `Filter` (~278px wide)                          | No\*     |
+| Pagination     | `Pagination showFirstAndLastNav`                | No       |
+
+\* Search bar and filter sidebar are individually optional but **at least one must be present**.
+
+---
+
+## State shape
+
+```tsx
+interface ListingState {
+    keyword: string;
+    filters: Record<string, string[]>; // category -> selected option values
+    sortBy: string;
+    page: number;
+}
+
+const [state, setState] = useState<ListingState>({
+    keyword: "",
+    filters: {},
+    sortBy: "relevance",
+    page: 1,
+});
+
+// FIXME: replace MOCK_ITEMS with real fetch, e.g.:
+// apiClient.get<Item[]>("/api/v1/items").then(({ data }) => setAllRows(data));
+const [allRows, setAllRows] = useState<Item[]>(MOCK_ITEMS);
+
+useEffect(() => {
+    // FIXME: replace with actual API client and URL to fetch data
+    // Example: apiClient.get<Item[]>("/api/v1/items").then(({ data }) => setAllRows(data));
+    setAllRows(MOCK_ITEMS);
+}, []);
+```
+
+-   Changing `keyword`, `filters`, or `sortBy` **must reset `page` to `1`** — never keep the user on a page that may no longer exist after a filter change.
+-   Derive filtered/sorted/paginated results with a single `useMemo` — don't split filtering and sorting into separate effects that can race.
+-   Fetch-based listings: debounce `keyword` changes (~300ms) before refetching; filter/sort changes refetch immediately.
+
+```tsx
+const results = useMemo(() => {
+    let rows = allRows.filter(
+        (r) =>
+            matchesKeyword(r, state.keyword) && matchesFilters(r, state.filters)
+    );
+    rows = sortRows(rows, state.sortBy);
+    return rows;
+}, [allRows, state.keyword, state.filters, state.sortBy]);
+
+const pageCount = Math.ceil(results.length / PAGE_SIZE);
+const pageRows = results.slice(
+    (state.page - 1) * PAGE_SIZE,
+    state.page * PAGE_SIZE
+);
+```
+
+---
+
+## Layout options
+
+### Hero with search + side filters (most feature-complete)
+
+```
+Navbar
+HeroBanner
+  └── Title + subtitle + Tab (search criteria tabs)
+      SearchBar (Form.Input / Form.Select + Button.Default)
+Layout.Section > Layout.Container
+  ├── BreadcrumbRow (Breadcrumb left · optional CTA right)
+  ├── Alert (optional)
+  └── TwoColumn
+        ├── FilterSidebar (~278px)
+        │     Form.Input (keyword)
+        │     Sort by (RadioButton group)
+        │     Filter.Checkbox sections
+        └── ResultsArea (flex-1)
+              ResultCountRow (count left · Tab view toggle right)
+              Card list or grid
+              Pagination
+Footer
+```
+
+### Hero with search only
+
+Remove `FilterSidebar` and `TwoColumn`. `ResultsArea` goes full width.
+
+### Hero with side filters only
+
+Remove `SearchBar` from hero. Add `Form.Input` for keyword above `Filter` in sidebar. Results shown on load.
+
+### Compact (no hero) — search + side filters
+
+Remove `HeroBanner`. Add `Typography.HeadingLG as="h1"` + description + `SearchBar` directly in `Layout.Container` above breadcrumb row.
+
+### Compact — side filters only
+
+No hero, no search bar. Title + description in container. Filters in sidebar. Results shown on load.
+
+### Compact — search only, description column
+
+No hero. Full-width `SearchBar` above two-column region. Left column = description text; right column = results full width. No filter sidebar.
+
+### No description, search + side filters
+
+No hero. Full-width `SearchBar` above breadcrumb row. Filter sidebar + results as normal.
+
+---
+
+## Filter sidebar
+
+```tsx
+<Filter onClear={handleClear}>
+    <Filter.Item title="Sort by" collapsible={false}>
+        {SORT_OPTIONS.map((opt) => (
+            <RadioButton
+                key={opt.value}
+                checked={state.sortBy === opt.value}
+                onChange={() =>
+                    setState((s) => ({ ...s, page: 1, sortBy: opt.value }))
+                }
+            >
+                {opt.label}
+            </RadioButton>
+        ))}
+    </Filter.Item>
+    <Filter.Checkbox
+        title="Category"
+        options={categoryOptions}
+        selected={state.filters.category ?? []}
+        onChange={(values) =>
+            setState((s) => ({
+                ...s,
+                page: 1,
+                filters: { ...s.filters, category: values },
+            }))
+        }
+    />
+</Filter>
+```
+
+`onClear` resets `filters` to `{}` and `page` to `1`. It does not reset `keyword` unless the design explicitly requires it.
+
+---
+
+## Cards vs DataTable
+
+-   **Cards** — citizen-facing listing screens
+-   **DataTable** — internal/admin screens with 4+ structured columns where columnar comparison is the primary goal
+
+---
+
+## Rules
+
+-   Always show result count even when no filters are active — format: "X result(s) found"
+-   Always show `ErrorDisplay type="no-item-found"` with contextual copy when results are empty — never an empty container
+-   `Pagination` or lazy load — never both on the same list
+-   `showFirstAndLastNav` must be set on `Pagination`
+-   Filter sidebar width is fixed at ~278px; results area is `flex: 1`
+-   Inline action buttons (edit, delete) do not belong on listing cards — those go on the detail screen
+
+---
+
+## Complete template
+
+A single-file listing page with search, side filters, pagination, loading/error/empty states, and API stub wired in. Remove `FilterSidebar` / `TwoColumn` for search-only variant.
+
+```tsx
+import { useState, useEffect, useMemo } from "react";
+import styled from "styled-components";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Card } from "@lifesg/react-design-system/card";
+import { Filter } from "@lifesg/react-design-system/filter";
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+import { Pagination } from "@lifesg/react-design-system/pagination";
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+import { Alert } from "@lifesg/react-design-system/alert";
+import { Button } from "@lifesg/react-design-system/button";
+import { Form } from "@lifesg/react-design-system/form";
+import { Spacing, MediaQuery } from "@lifesg/react-design-system/theme";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface Item {
+    id: string;
+    title: string;
+    description: string;
+    category: string;
+}
+
+interface ListingState {
+    keyword: string;
+    filters: Record<string, string[]>;
+    sortBy: string;
+    page: number;
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const PAGE_SIZE = 10;
+
+const SORT_OPTIONS = [
+    { label: "Relevance", value: "relevance" },
+    { label: "Newest first", value: "newest" },
+];
+
+const CATEGORY_OPTIONS = [
+    { label: "Category A", value: "a" },
+    { label: "Category B", value: "b" },
+];
+
+// FIXME: replace with real seed data or remove once API is wired up
+const MOCK_ITEMS: Item[] = [];
+
+// ─── Styled components ────────────────────────────────────────────────────────
+
+const PageWrapper = styled.div`
+    padding: ${Spacing["spacing-32"]} 0;
+    ${MediaQuery.MinWidth.lg} {
+        padding: ${Spacing["spacing-48"]} 0;
+    }
+`;
+
+const TwoColumn = styled.div`
+    display: flex;
+    gap: ${Spacing["spacing-32"]};
+    align-items: flex-start;
+`;
+
+const FilterSidebar = styled.div`
+    width: 278px;
+    flex-shrink: 0;
+`;
+
+const ResultsArea = styled.div`
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: ${Spacing["spacing-16"]};
+`;
+
+const SearchRow = styled.div`
+    display: flex;
+    gap: ${Spacing["spacing-16"]};
+    align-items: flex-end;
+    margin-bottom: ${Spacing["spacing-24"]};
+`;
+
+const ResultCountRow = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+const CardBody = styled.div`
+    padding: ${Spacing["spacing-24"]};
+`;
+
+const PaginationWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    margin-top: ${Spacing["spacing-24"]};
+`;
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function matchesKeyword(item: Item, keyword: string): boolean {
+    if (!keyword.trim()) return true;
+    const q = keyword.toLowerCase();
+    return (
+        item.title.toLowerCase().includes(q) ||
+        item.description.toLowerCase().includes(q)
+    );
+}
+
+function matchesFilters(
+    item: Item,
+    filters: Record<string, string[]>
+): boolean {
+    const cats = filters.category;
+    if (!cats || cats.length === 0) return true;
+    return cats.includes(item.category);
+}
+
+function sortItems(items: Item[], sortBy: string): Item[] {
+    if (sortBy === "newest") return [...items].reverse();
+    return items;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function ListingPage() {
+    const [allItems, setAllItems] = useState<Item[]>(MOCK_ITEMS);
+    const [isLoading, setIsLoading] = useState(true);
+    const [fetchError, setFetchError] = useState<string | null>(null);
+
+    const [state, setState] = useState<ListingState>({
+        keyword: "",
+        filters: {},
+        sortBy: "relevance",
+        page: 1,
+    });
+
+    useEffect(() => {
+        setIsLoading(true);
+        setFetchError(null);
+        // FIXME: replace with actual API client and URL to fetch data, e.g.:
+        // apiClient
+        //   .get<Item[]>("/api/v1/items")
+        //   .then(({ data }) => setAllItems(data))
+        //   .catch((err) => setFetchError(err.message))
+        //   .finally(() => setIsLoading(false));
+        setAllItems(MOCK_ITEMS);
+        setIsLoading(false);
+    }, []);
+
+    const results = useMemo(() => {
+        let rows = allItems.filter(
+            (r) =>
+                matchesKeyword(r, state.keyword) &&
+                matchesFilters(r, state.filters)
+        );
+        return sortItems(rows, state.sortBy);
+    }, [allItems, state.keyword, state.filters, state.sortBy]);
+
+    const pageCount = Math.ceil(results.length / PAGE_SIZE);
+    const pageRows = results.slice(
+        (state.page - 1) * PAGE_SIZE,
+        state.page * PAGE_SIZE
+    );
+
+    function handleClear() {
+        setState((s) => ({ ...s, filters: {}, page: 1 }));
+    }
+
+    return (
+        <>
+            <Navbar
+                resources={{
+                    primary: { brandName: "MyService", logoSrc: "/logo.svg" },
+                }}
+                items={{ desktop: [] }}
+            />
+            <main>
+                <PageWrapper>
+                    <Layout.Container type="grid">
+                        <Layout.ColDiv xsCols={8} lgCols={12}>
+                            {/* Search bar */}
+                            <SearchRow>
+                                <Form.Input
+                                    label="Search"
+                                    placeholder="Search by keyword"
+                                    value={state.keyword}
+                                    onChange={(e) =>
+                                        setState((s) => ({
+                                            ...s,
+                                            keyword: e.target.value,
+                                            page: 1,
+                                        }))
+                                    }
+                                />
+                                <Button.Default
+                                    styleType="default"
+                                    onClick={() =>
+                                        setState((s) => ({ ...s, page: 1 }))
+                                    }
+                                >
+                                    Search
+                                </Button.Default>
+                            </SearchRow>
+
+                            {/* Loading */}
+                            {isLoading && (
+                                <Typography.BodyMD>
+                                    Loading...
+                                </Typography.BodyMD>
+                            )}
+
+                            {/* Fetch error */}
+                            {!isLoading && fetchError && (
+                                <Alert
+                                    type="error"
+                                    actionLink={{
+                                        children: "Try again",
+                                        onClick: () => window.location.reload(),
+                                    }}
+                                >
+                                    {fetchError}
+                                </Alert>
+                            )}
+
+                            {/* Results */}
+                            {!isLoading && !fetchError && (
+                                <TwoColumn>
+                                    {/* Filter sidebar — omit for search-only variant */}
+                                    <FilterSidebar>
+                                        <Filter onClear={handleClear}>
+                                            <Filter.Item
+                                                title="Sort by"
+                                                collapsible={false}
+                                            >
+                                                {SORT_OPTIONS.map((opt) => (
+                                                    <RadioButton
+                                                        key={opt.value}
+                                                        checked={
+                                                            state.sortBy ===
+                                                            opt.value
+                                                        }
+                                                        onChange={() =>
+                                                            setState((s) => ({
+                                                                ...s,
+                                                                sortBy: opt.value,
+                                                                page: 1,
+                                                            }))
+                                                        }
+                                                    >
+                                                        {opt.label}
+                                                    </RadioButton>
+                                                ))}
+                                            </Filter.Item>
+                                            <Filter.Checkbox
+                                                title="Category"
+                                                options={CATEGORY_OPTIONS}
+                                                selected={
+                                                    state.filters.category ?? []
+                                                }
+                                                onChange={(values) =>
+                                                    setState((s) => ({
+                                                        ...s,
+                                                        page: 1,
+                                                        filters: {
+                                                            ...s.filters,
+                                                            category: values,
+                                                        },
+                                                    }))
+                                                }
+                                            />
+                                        </Filter>
+                                    </FilterSidebar>
+
+                                    <ResultsArea>
+                                        {/* Result count */}
+                                        <ResultCountRow>
+                                            <Typography.BodyMD>
+                                                {results.length} result
+                                                {results.length !== 1
+                                                    ? "s"
+                                                    : ""} found
+                                            </Typography.BodyMD>
+                                        </ResultCountRow>
+
+                                        {/* Empty state */}
+                                        {results.length === 0 && (
+                                            <ErrorDisplay
+                                                type="no-item-found"
+                                                title="No results found"
+                                                description="Try adjusting your search or filters."
+                                                actionButton={{
+                                                    children: "Clear filters",
+                                                    onClick: handleClear,
+                                                }}
+                                            />
+                                        )}
+
+                                        {/* Card list */}
+                                        {pageRows.map((item) => (
+                                            <Card key={item.id}>
+                                                <CardBody>
+                                                    <Typography.HeadingSM>
+                                                        {item.title}
+                                                    </Typography.HeadingSM>
+                                                    <Typography.BodyMD>
+                                                        {item.description}
+                                                    </Typography.BodyMD>
+                                                </CardBody>
+                                            </Card>
+                                        ))}
+
+                                        {/* Pagination */}
+                                        {pageCount > 1 && (
+                                            <PaginationWrapper>
+                                                <Pagination
+                                                    totalItems={results.length}
+                                                    pageSize={PAGE_SIZE}
+                                                    activePage={state.page}
+                                                    onPageChange={(page) =>
+                                                        setState((s) => ({
+                                                            ...s,
+                                                            page,
+                                                        }))
+                                                    }
+                                                    showFirstAndLastNav
+                                                />
+                                            </PaginationWrapper>
+                                        )}
+                                    </ResultsArea>
+                                </TwoColumn>
+                            )}
+                        </Layout.ColDiv>
+                    </Layout.Container>
+                </PageWrapper>
+            </main>
+            <Footer />
+        </>
+    );
+}
+```
+
+---
+
+## Anti-patterns
+
+-   Do not omit the result count
+-   Do not show an empty results area with no state message
+-   Do not use `DataTable` for citizen-facing records
+-   Do not use pagination AND lazy loading together
+-   Do not leave stale `page` values pointing past the end of a newly-filtered result set
+-   Do not split filtering and sorting into separate `useEffect` calls — derive from a single `useMemo`
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/accordion.md b/docs/skills/cc-flagship-ds/resources/v4/components/accordion.md
new file mode 100644
index 0000000000..0ba95e2748
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/accordion.md
@@ -0,0 +1,115 @@
+# Accordion
+
+Import: `import { Accordion } from "@lifesg/react-design-system/accordion"`
+
+## When to use
+
+Use to reduce visual complexity when users don't need all content at once — FAQs, supplementary details, or grouped settings. Do not use when all content needs to be visible at the same time.
+
+## Composition
+
+```
+Accordion                    ← container, manages expand/collapse state
+├── Accordion.Item           ← expandable panel
+├── Accordion.Item
+└── Accordion.Item
+```
+
+All children must be `Accordion.Item`. Do not place other elements directly inside `Accordion`.
+
+## Variants
+
+| `type` on `Accordion.Item` | Usage                                |
+| -------------------------- | ------------------------------------ |
+| `"default"`                | Standard title size — default        |
+| `"small"`                  | Compact title size for dense layouts |
+
+## Usage
+
+```tsx
+import { Accordion } from "@lifesg/react-design-system/accordion";
+
+// Multiple items — all collapsed by default
+const FaqSection = () => (
+    <Accordion
+        title="Frequently asked questions"
+        headingLevel={2}
+        initialDisplay="collapse-all"
+        enableExpandAll
+    >
+        <Accordion.Item title="What is this service?">
+            <p>This service lets you manage your account settings.</p>
+        </Accordion.Item>
+        <Accordion.Item title="How do I reset my password?">
+            <p>Click "Forgot password" on the login page.</p>
+        </Accordion.Item>
+        {/* JSX in title must be wrapped in <span> — title renders inside <button> */}
+        <Accordion.Item
+            title={
+                <span>
+                    Can I use <strong>bold text</strong> in a title?
+                </span>
+            }
+        >
+            <p>Yes — wrap JSX title content in a span.</p>
+        </Accordion.Item>
+    </Accordion>
+);
+
+// Controlled item — force one item open regardless of Expand All state
+const ControlledExample = () => (
+    <Accordion initialDisplay="collapse-all">
+        <Accordion.Item title="Always expanded" expanded={true}>
+            <p>This item ignores the parent initialDisplay.</p>
+        </Accordion.Item>
+        <Accordion.Item title="Follows parent state">
+            <p>This item collapses with the rest.</p>
+        </Accordion.Item>
+    </Accordion>
+);
+```
+
+## Props
+
+### Accordion props
+
+| Prop                     | Type                               | Default        | Description                                        |
+| ------------------------ | ---------------------------------- | -------------- | -------------------------------------------------- |
+| `children`               | `JSX.Element` \| `JSX.Element[]`   | —              | Accordion items — required                         |
+| `title`                  | `string`                           | —              | Group title shown above items                      |
+| `enableExpandAll`        | `boolean`                          | `true`         | Show Expand All / Collapse All button              |
+| `initialDisplay`         | `"collapse-all"` \| `"expand-all"` | `"expand-all"` | Initial expand/collapse state of all items         |
+| `showTitleInMobile`      | `boolean`                          | `false`        | Show group title on mobile viewports               |
+| `headingLevel`           | `number`                           | `2`            | Heading level for the group title                  |
+| `id`                     | `string`                           | —              | Unique id of the component                         |
+| `className`              | `string`                           | —              | Class selector                                     |
+| `data-testid`            | `string`                           | —              | Test identifier                                    |
+| `onExpandCollapseChange` | `(expanded: boolean) => void`      | —              | Callback when Expand All / Collapse All is toggled |
+
+### Accordion.Item props
+
+| Prop          | Type                             | Default     | Description                                                       |
+| ------------- | -------------------------------- | ----------- | ----------------------------------------------------------------- |
+| `children`    | `JSX.Element` \| `JSX.Element[]` | —           | Panel content — required                                          |
+| `title`       | `string` \| `JSX.Element`        | —           | Header text of the item                                           |
+| `type`        | `"default"` \| `"small"`         | `"default"` | Title text size                                                   |
+| `expanded`    | `boolean`                        | —           | Controlled expand state; overrides `initialDisplay` for this item |
+| `collapsible` | `boolean`                        | `true`      | Whether the item can be collapsed                                 |
+| `id`          | `string`                         | —           | Unique id of the item                                             |
+| `className`   | `string`                         | —           | Class selector                                                    |
+| `data-testid` | `string`                         | —           | Test identifier                                                   |
+
+## Rules
+
+-   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
+-   Use `Accordion.Item` for all panels — do not place content directly in `Accordion`.
+-   Wrap custom JSX titles in `<span>` — item title renders inside a `<button>` and block elements are invalid inside it.
+-   Individual `expanded` on `Accordion.Item` overrides Expand All / Collapse All for that item.
+-   Use `initialDisplay="collapse-all"` when content is supplementary and users are unlikely to need it immediately.
+
+## Anti-patterns
+
+-   Placing content directly inside `Accordion` without `Accordion.Item` wrappers.
+-   Using Accordion when all content should be visible at once — use a plain layout instead.
+-   Using block elements (e.g. `<div>`) directly as `title` in `Accordion.Item` — wrap in `<span>`.
+-   Skipping `headingLevel` when `title` is set — this breaks heading hierarchy for screen readers.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/alert.md b/docs/skills/cc-flagship-ds/resources/v4/components/alert.md
new file mode 100644
index 0000000000..4d258c771c
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/alert.md
@@ -0,0 +1,56 @@
+# Alert
+
+Import: `import { Alert } from "@lifesg/react-design-system/alert"`
+
+## When to use
+
+Use to call out important information within page sections — warnings before a user starts a task, informational notes relevant to a specific section, or non-transient status messages. Not for form validation errors (use form error patterns instead).
+
+## Variants
+
+| `type`          | When to use                                |
+| --------------- | ------------------------------------------ |
+| `"success"`     | Action completed successfully              |
+| `"error"`       | Action failed or system error              |
+| `"warning"`     | User should proceed with caution           |
+| `"info"`        | Neutral informational message              |
+| `"description"` | Descriptive content with no status meaning |
+
+## Usage
+
+```tsx
+import { Alert } from "@lifesg/react-design-system/alert";
+
+<Alert type="warning" showIcon role="alert">
+    Your session will expire in 5 minutes. Save your work to avoid losing
+    progress.
+</Alert>;
+```
+
+## Props
+
+| Prop                 | Type                                                                   | Default              | Description                                                                |
+| -------------------- | ---------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------- |
+| `type`               | `"warning"` \| `"error"` \| `"success"` \| `"info"` \| `"description"` | —                    | Style type of the alert — required                                         |
+| `sizeType`           | `"default"` \| `"small"`                                               | `"default"`          | Size of the component                                                      |
+| `showIcon`           | `boolean`                                                              | `false`              | Show icon matching the alert type                                          |
+| `actionLink`         | `HTMLAnchorAttributes`                                                 | —                    | Action link rendered inside the alert                                      |
+| `actionLinkIcon`     | `JSX.Element`                                                          | `<ArrowRightIcon />` | Custom icon for the action link                                            |
+| `customIcon`         | `JSX.Element`                                                          | —                    | Custom replacement icon for the alert                                      |
+| `maxCollapsedHeight` | `number`                                                               | —                    | Maximum visible height of content in px; shows expand toggle when exceeded |
+
+Inherits all `HTMLDivElement` attributes.
+
+## Rules
+
+-   Always use `showIcon` — icons provide immediate visual recognition of alert severity.
+-   Use `actionLink` for recoverable errors (retry, undo, view details).
+-   Set `role` based on how the alert appears: `"alert"` for dynamic alerts triggered by user action, `"status"` for background status updates, omit for static content visible on page load.
+-   Use `maxCollapsedHeight` to avoid long content overwhelming the layout.
+-   `role` is not set automatically — set `role="alert"` for dynamic alerts, `role="status"` for background updates, and omit for static content.
+
+## Anti-patterns
+
+-   Using Alert for form field validation errors — use inline form error patterns instead.
+-   Omitting `role` on dynamically injected alerts — screen readers will not announce them.
+-   Using `type="description"` with `showIcon` — description has no semantic status meaning.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/animation.md b/docs/skills/cc-flagship-ds/resources/v4/components/animation.md
new file mode 100644
index 0000000000..96fc9e6277
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/animation.md
@@ -0,0 +1,17 @@
+# Animation
+
+Import: `import { Animation } from "@lifesg/react-design-system/animation"`
+
+## Props
+
+| Prop          | Type     | Default | Description                      |
+| ------------- | -------- | ------- | -------------------------------- |
+| `id`          | `string` | —       | Unique id of the component       |
+| `className`   | `string` | —       | Class selector of the component  |
+| `data-testid` | `string` | —       | Test identifier of the component |
+
+### Customised variant additional props
+
+| Prop    | Type     | Default | Description                            |
+| ------- | -------- | ------- | -------------------------------------- |
+| `color` | `string` | —       | Color applied on the animated elements |
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/avatar.md b/docs/skills/cc-flagship-ds/resources/v4/components/avatar.md
new file mode 100644
index 0000000000..6bc22170eb
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/avatar.md
@@ -0,0 +1,13 @@
+# Avatar
+
+Import: `import { Avatar } from "@lifesg/react-design-system/avatar"`
+
+## Props
+
+Inherits `HTMLAttributes<HTMLDivElement>`.
+
+| Prop          | Type                      | Default     | Description                                                                         |
+| ------------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------- |
+| `children`    | `string` \| `JSX.Element` | —           | Content displayed in the avatar — typically an initial or custom element — required |
+| `sizeType`    | `"default"` \| `"small"`  | `"default"` | Size of the avatar                                                                  |
+| `data-testid` | `string`                  | `"avatar"`  | Test identifier                                                                     |
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/badge.md b/docs/skills/cc-flagship-ds/resources/v4/components/badge.md
new file mode 100644
index 0000000000..32d04c1e6d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/badge.md
@@ -0,0 +1,21 @@
+# Badge
+
+Import: `import { Badge } from "@lifesg/react-design-system/badge"`
+
+## Props
+
+Inherits `HTMLAttributes<HTMLDivElement>`.
+
+| Prop          | Type                                                                                        | Default     | Description                                                     |
+| ------------- | ------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------- |
+| `variant`     | `"number"` \| `"number-with-border"` \| `"dot"` \| `"dot-with-border"` \| `"square-number"` | `"number"`  | Visual style of the badge                                       |
+| `color`       | `"default"` \| `"important"`                                                                | `"default"` | Color tone of the badge                                         |
+| `count`       | `number`                                                                                    | —           | Number to display — applies to number-based variants only       |
+| `badgeOffset` | `[string, string]`                                                                          | —           | Offset from top-right corner as `[left, top]` CSS length values |
+| `children`    | `JSX.Element`                                                                               | —           | Content to wrap — badge is positioned in the top-right corner   |
+| `data-testid` | `string`                                                                                    | `"badge"`   | Test identifier                                                 |
+
+## Rules
+
+-   `count` only applies to `"number"`, `"number-with-border"`, and `"square-number"` variants.
+-   When `children` is provided, the badge overlays the top-right corner of the child element.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/box-container.md b/docs/skills/cc-flagship-ds/resources/v4/components/box-container.md
new file mode 100644
index 0000000000..9ed4525216
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/box-container.md
@@ -0,0 +1,54 @@
+# BoxContainer
+
+Import: `import { BoxContainer } from "@lifesg/react-design-system/box-container"`
+
+## When to use
+
+Use for a single collapsible panel displaying form data or structured content — typically a named section within a form or detail view. Supports an optional header action and a status indicator to flag section-level errors or warnings.
+
+## Sub-components
+
+### BoxContainerSubComponentTestIds
+
+| Prop               | Type     | Description                            |
+| ------------------ | -------- | -------------------------------------- |
+| `title`            | `string` | Test id for the header title           |
+| `displayStateIcon` | `string` | Test id for the display state icon     |
+| `handle`           | `string` | Test id for the expand/collapse handle |
+
+## Variants
+
+| `displayState` | When to use                                |
+| -------------- | ------------------------------------------ |
+| `"default"`    | Normal state — no icon                     |
+| `"error"`      | Section has validation errors              |
+| `"warning"`    | Section has a warning that needs attention |
+
+## Props
+
+| Prop                    | Type                                    | Default     | Description                                                       |
+| ----------------------- | --------------------------------------- | ----------- | ----------------------------------------------------------------- |
+| `title`                 | `string` \| `JSX.Element`               | —           | Header title — required                                           |
+| `children`              | `JSX.Element` \| `JSX.Element[]`        | —           | Panel content — required                                          |
+| `collapsible`           | `boolean`                               | `true`      | Allow the panel to be collapsed                                   |
+| `expanded`              | `boolean`                               | `false`     | Controlled expand state (only valid when `collapsible` is `true`) |
+| `displayState`          | `"default"` \| `"error"` \| `"warning"` | `"default"` | Icon shown alongside title to indicate status                     |
+| `callToActionComponent` | `JSX.Element`                           | —           | Custom action rendered in the header                              |
+| `clickableHeader`       | `boolean`                               | —           | Make the entire header clickable to toggle expand/collapse        |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds`       | —           | Test ids for sub-elements                                         |
+| `id`                    | `string`                                | —           | Unique id of the component                                        |
+| `className`             | `string`                                | —           | Class selector                                                    |
+| `data-testid`           | `string`                                | —           | Test identifier                                                   |
+
+## Rules
+
+-   Use `displayState` to indicate section-level status — not as a substitute for inline field errors.
+-   Use `callToActionComponent` for section-level actions only — not for form submission buttons.
+-   Use `collapsible={false}` when the content must always be visible.
+-   Use `clickableHeader` to make the full header row the expand/collapse trigger — improves usability for dense layouts.
+
+## Anti-patterns
+
+-   Using `displayState="error"` instead of inline form field errors — `displayState` signals section-level status only.
+-   Using `callToActionComponent` for form submission — use a dedicated submit button outside the container.
+-   Nesting BoxContainer inside another BoxContainer.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/breadcrumb.md b/docs/skills/cc-flagship-ds/resources/v4/components/breadcrumb.md
new file mode 100644
index 0000000000..da62443b36
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/breadcrumb.md
@@ -0,0 +1,69 @@
+# Breadcrumb
+
+Import: `import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb"`
+
+## When to use
+
+Use on pages within a multi-level hierarchy to help users navigate to parent pages.
+
+Do not use on:
+
+-   The home page
+-   Pages with no parent
+-   Focused flows such as forms or wizards
+
+## Variants
+
+| `separatorStyle`      | When to use              |
+| --------------------- | ------------------------ |
+| `"chevron"` (default) | Standard pages           |
+| `"slash"`             | Alternative visual style |
+
+## Usage
+
+```tsx
+import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
+
+<Breadcrumb
+    links={[
+        { children: "Home", href: "/" },
+        { children: "Services", href: "/services" },
+        { children: "Apply" },
+    ]}
+/>;
+```
+
+## Props
+
+| Prop             | Type                          | Default     | Description                                                                                              |
+| ---------------- | ----------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
+| `links`          | `HTMLAnchorElement[]`         | —           | Breadcrumb items — **required**. Each item accepts standard anchor attributes (`children`, `href`, etc.) |
+| `separatorStyle` | `"chevron" \| "slash"`        | `"chevron"` | Separator style between items                                                                            |
+| `fadeColor`      | `string[] \| FadeColorSet`    | —           | Gradient color for scroll fade on overflow; set to match page background                                 |
+| `fadePosition`   | `"left" \| "right" \| "both"` | `"both"`    | Which edges show the scroll fade                                                                         |
+| `itemStyle`      | `CSS-JS string`               | —           | Custom style applied to each breadcrumb item                                                             |
+| `id`             | `string`                      | —           | Unique identifier                                                                                        |
+| `className`      | `string`                      | —           | Class selector                                                                                           |
+| `data-testid`    | `string`                      | —           | Test identifier                                                                                          |
+
+### FadeColorSet
+
+| Prop    | Type       | Description                 |
+| ------- | ---------- | --------------------------- |
+| `left`  | `string[]` | Color(s) for the left fade  |
+| `right` | `string[]` | Color(s) for the right fade |
+
+## Rules
+
+-   Always place the current page last in `links` — omit `href` on the last item.
+-   Keep breadcrumb trails to 4 items or fewer; 5 or more items automatically collapse the middle into an overflow menu.
+-   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
+-   The last item in `links` is rendered as the current page (non-clickable, `aria-current="page"`). Omit `href` on the last item.
+-   When 5 or more items are present, middle items automatically collapse into an overflow menu.
+-   On mobile, breadcrumbs scroll horizontally with a fade effect at the edges controlled by `fadeColor` and `fadePosition`.
+
+## Anti-patterns
+
+-   Do not add `href` to the last breadcrumb item — it represents the current page and must not be clickable.
+-   Do not use breadcrumbs on single-level or flat navigation structures.
+-   Do not use breadcrumbs inside forms or wizard flows.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/button.md b/docs/skills/cc-flagship-ds/resources/v4/components/button.md
new file mode 100644
index 0000000000..49537ab075
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/button.md
@@ -0,0 +1,78 @@
+# Button
+
+Import: `import { Button } from "@lifesg/react-design-system/button"`
+
+## When to use
+
+```
+┌─ "Which button component?"
+│
+├─ Icon only (no text)?
+│  └─ IconButton — aria-label required
+│
+├─ Text + icon together?
+│  └─ ButtonWithIcon — icon left (default) or right for directional actions
+│
+└─ Text only?
+   └─ Button
+```
+
+## Size variants
+
+| Usage                                       | When to use                                             |
+| ------------------------------------------- | ------------------------------------------------------- |
+| `<Button>` or `<Button sizeType="default">` | Standard size — use for all buttons including hero CTAs |
+| `<Button sizeType="small">`                 | Dense layouts, toolbars                                 |
+| `<Button sizeType="large">`                 | Only when explicitly specified — do not use by default  |
+
+> **Deprecated:** `Button.Default`, `Button.Small`, `Button.Large` sub-components are deprecated in v4. Use `<Button sizeType="...">` instead.
+
+## Variants
+
+| `styleType`   | When to use                           |
+| ------------- | ------------------------------------- |
+| `"default"`   | Main action on the page               |
+| `"secondary"` | Cancel, go back, alternative option   |
+| `"light"`     | On colored or dark backgrounds        |
+| `"link"`      | Tertiary, de-emphasized inline action |
+
+Add `danger` for destructive actions (delete, remove) — applies to any `styleType`.
+
+## Usage
+
+```tsx
+import { Button } from "@lifesg/react-design-system/button";
+
+<Button styleType="default" onClick={() => {}}>
+    Save changes
+</Button>;
+```
+
+## Props
+
+| Prop                    | Type                                                  | Default     | Description                                        |
+| ----------------------- | ----------------------------------------------------- | ----------- | -------------------------------------------------- |
+| `styleType`             | `"default"` \| `"secondary"` \| `"light"` \| `"link"` | `"default"` | Visual style of the button                         |
+| `loading`               | `boolean`                                             | `false`     | Displays a loading spinner                         |
+| `danger`                | `boolean`                                             | `false`     | Applies a red color scheme for destructive actions |
+| `focusableWhenDisabled` | `boolean`                                             | `false`     | Keeps button focusable when disabled               |
+
+Also inherits all props from `HTMLButtonElement` (e.g. `disabled`, `type`, `onClick`, `children`).
+
+## Rules
+
+-   `styleType` is mandatory.
+-   Use sentence case for all labels — "Save changes" not "Save Changes".
+-   Use concise verb + noun labels — avoid "OK", "Yes", "Click here".
+-   Do not use `sizeType="large"` unless explicitly required — default size is correct for hero CTAs.
+-   Combine `loading` and `disabled` during async operations to prevent double-submission.
+-   Never use raw `<button>` elements — always use design system button components.
+-   Do not nest buttons inside buttons or links.
+-   `danger` applies to any `styleType`.
+
+## Anti-patterns
+
+-   Do not use `sizeType="large"` as a default choice — it is a special case only.
+-   Do not use `Button.Default`, `Button.Small`, or `Button.Large` — these sub-components are deprecated in v4.
+-   Do not use vague labels like "OK" or "Yes" — labels must describe the action.
+-   Do not use `loading` alone without also setting `disabled`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/calendar.md b/docs/skills/cc-flagship-ds/resources/v4/components/calendar.md
new file mode 100644
index 0000000000..f3340e089f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/calendar.md
@@ -0,0 +1,109 @@
+# Calendar
+
+Import: `import { Calendar } from "@lifesg/react-design-system/calendar"`
+
+## When to use
+
+-   Displaying an inline date picker when a full-page or panel calendar is preferable over a dropdown.
+-   Use `variant="single"` for standard single-date selection.
+-   Use `variant="multi"` when the user must pick multiple non-contiguous dates (e.g. recurring appointments).
+
+## Usage
+
+### variant="single" — single date selection
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "@lifesg/react-design-system/calendar";
+
+const AppointmentCalendar = () => {
+    const [date, setDate] = useState("2024-06-15");
+
+    return (
+        <Calendar
+            variant="single"
+            value={date}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            onChange={(selected) => setDate(selected)}
+        />
+    );
+};
+```
+
+### variant="multi" — multiple date selection
+
+Note `values` (plural) and `onChange` receives the full updated array.
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "@lifesg/react-design-system/calendar";
+
+const MultiDateCalendar = () => {
+    const [dates, setDates] = useState<string[]>([]);
+
+    return (
+        <Calendar
+            variant="multi"
+            values={dates}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            maxSelectable={5}
+            onChange={(selected) => setDates(selected)}
+        />
+    );
+};
+```
+
+## Props — shared
+
+| Prop                       | Type                                | Default      | Description                                                          |
+| -------------------------- | ----------------------------------- | ------------ | -------------------------------------------------------------------- |
+| `variant`                  | `"single" \| "multi"`               | `"single"`   | Calendar selection mode                                              |
+| `styleType`                | `"bordered" \| "no-border"`         | `"bordered"` | Whether a border is rendered                                         |
+| `disabledDates`            | `string[]`                          | —            | Dates to disable, in `YYYY-MM-DD` format                             |
+| `minDate`                  | `string`                            | —            | Minimum selectable date in `YYYY-MM-DD` format (inclusive)           |
+| `maxDate`                  | `string`                            | —            | Maximum selectable date in `YYYY-MM-DD` format (inclusive)           |
+| `showActiveMonthDaysOnly`  | `boolean`                           | `false`      | Show only the selected month's dates                                 |
+| `onHover`                  | `(value: string) => void`           | —            | Called with hovered date (`YYYY-MM-DD`) or empty string when leaving |
+| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void` | —            | Called when visible month/year changes                               |
+| `id`                       | `string`                            | —            | Unique identifier of the component                                   |
+| `className`                | `string`                            | —            | Class selector of the component                                      |
+| `data-testid`              | `string`                            | —            | Test identifier of the component                                     |
+
+## Props — variant="single"
+
+| Prop       | Type                      | Default | Description                           |
+| ---------- | ------------------------- | ------- | ------------------------------------- |
+| `value`    | `string`                  | —       | Selected date in `YYYY-MM-DD` format  |
+| `onChange` | `(value: string) => void` | —       | Called when the selected date changes |
+
+## Props — variant="multi"
+
+| Prop            | Type                         | Default | Description                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------ |
+| `values`        | `string[]`                   | —       | Array of selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                     | —       | Minimum number of dates required for a valid selection |
+| `maxSelectable` | `number`                     | —       | Maximum number of dates that can be selected           |
+| `onChange`      | `(values: string[]) => void` | —       | Called when the selection changes                      |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                           |
+| ------- | -------- | ------------------------------------- |
+| `year`  | `number` | Current visible year in `YYYY` format |
+| `month` | `number` | Current visible month, 1–12           |
+
+## Rules
+
+-   `variant="single"` uses `value: string` and `onChange: (date: string) => void`.
+-   `variant="multi"` uses `values: string[]` and `onChange: (dates: string[]) => void` — note the plural prop names.
+-   All dates must be in `YYYY-MM-DD` format.
+-   Use `minDate`/`maxDate` to constrain selectable range.
+-   Use `disabledDates` for specific non-selectable dates within the allowed range.
+
+## Anti-patterns
+
+-   Do not pass `value` to `variant="multi"` — the prop is `values` (plural).
+-   Do not pass `values` to `variant="single"` — the prop is `value` (singular).
+-   Do not use Calendar inside a form for simple date entry — prefer `Form.DateInput` for that pattern.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/card.md b/docs/skills/cc-flagship-ds/resources/v4/components/card.md
new file mode 100644
index 0000000000..c2f93560c8
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/card.md
@@ -0,0 +1,51 @@
+# Card
+
+Import: `import { Card } from "@lifesg/react-design-system/card"`
+
+## When to use
+
+Use to visually group related content — information panels, form sections, list items, or grid tiles.
+
+## Usage
+
+```tsx
+import styles from "./Card.module.css";
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+
+<Card>
+    <div className={styles.cardBody}>
+        <Typography.HeadingSM>Card title</Typography.HeadingSM>
+        <Typography.BodyMD>Card content goes here.</Typography.BodyMD>
+    </div>
+</Card>;
+```
+
+```css
+/* Card.module.css */
+.cardBody {
+    padding: var(--fds-spacing-24);
+}
+```
+
+## Props
+
+Inherits all standard `HTMLDivElement` attributes.
+
+| Prop          | Type     | Default | Description                       |
+| ------------- | -------- | ------- | --------------------------------- |
+| `data-testid` | `string` | —       | Test identifier for the component |
+
+## Rules
+
+-   Card has no default padding — use `spacing-24` internal padding and `spacing-16` gap between content items as the standard.
+-   Shadow (`Shadow["md-subtle"]`) is applied automatically — do not add `box-shadow` manually.
+-   Do not nest cards inside cards.
+-   Use Typography components for all text inside Card — not raw HTML elements.
+-   Combine with `Layout.Container` and `Layout.ColDiv` for responsive card grids.
+
+## Anti-patterns
+
+-   Adding `box-shadow` via CSS — the Card component already applies the correct elevation shadow.
+-   Using raw `<div>` with custom styling instead of Card when the DS Card fits the use case.
+-   Nesting `<Card>` inside another `<Card>`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/checkbox.md b/docs/skills/cc-flagship-ds/resources/v4/components/checkbox.md
new file mode 100644
index 0000000000..cf2bb2ad68
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/checkbox.md
@@ -0,0 +1,56 @@
+# Checkbox
+
+Import: `import { Checkbox } from "@lifesg/react-design-system/checkbox"`
+
+## When to use
+
+-   Simple boolean selections where a compact tick-box is sufficient.
+-   Table row selection (single or "select all").
+-   Filter lists with multiple independent options.
+-   "Select all" patterns using the `indeterminate` state.
+
+Prefer `Toggle` over `Checkbox` when building form inputs that need a visible card-style label container.
+
+## Variants
+
+| `displaySize` | When to use                    |
+| ------------- | ------------------------------ |
+| `"default"`   | Standard use                   |
+| `"small"`     | Dense layouts, inline controls |
+
+## Usage
+
+```tsx
+import { Checkbox } from "@lifesg/react-design-system/checkbox";
+
+<label>
+    <Checkbox checked={agreed} onChange={(e) => {}} />I agree to the terms and
+    conditions
+</label>;
+```
+
+## Props
+
+| Prop                    | Type                                               | Default     | Description                                                                  |
+| ----------------------- | -------------------------------------------------- | ----------- | ---------------------------------------------------------------------------- |
+| `displaySize`           | `"default"` \| `"small"`                           | `"default"` | Display size of the component                                                |
+| `checked`               | `boolean`                                          | —           | Controlled checked state                                                     |
+| `indeterminate`         | `boolean`                                          | —           | Indeterminate state — use for "select all" when only some items are selected |
+| `focusableWhenDisabled` | `boolean`                                          | —           | Keeps component focusable when disabled, preventing all user interaction     |
+| `onChange`              | `(e: React.ChangeEvent<HTMLInputElement>) => void` | —           | Called when the checked state changes — inherited from `InputHTMLAttributes` |
+
+Also inherits all props from `React.InputHTMLAttributes<HTMLInputElement>` (e.g. `name`, `value`, `disabled`, `aria-*`).
+
+## Rules
+
+-   Always pair with a visible label — wrap in `<label>` or use `aria-label`.
+-   Use `indeterminate` for "select all" controls when only some items in a list are selected — not as a permanent state.
+-   Use the same `name` attribute when grouping checkboxes in a form.
+-   No dedicated `disabled` prop — use the inherited `disabled` from `InputHTMLAttributes`, or `focusableWhenDisabled` to retain focus while blocking interaction.
+-   `indeterminate` is a visual state; manage controlled `checked` separately.
+
+## Anti-patterns
+
+-   Do not use `indeterminate` as a permanent or final state — it is a transitional indicator only.
+-   Do not use `Checkbox` alone without a label — always provide accessible text.
+-   Do not use `Checkbox` when only one option from a set can be selected — use `RadioButton` instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/countdown-timer.md b/docs/skills/cc-flagship-ds/resources/v4/components/countdown-timer.md
new file mode 100644
index 0000000000..81c701bb60
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/countdown-timer.md
@@ -0,0 +1,24 @@
+# CountdownTimer
+
+Import: `import { CountdownTimer } from "@lifesg/react-design-system/countdown-timer"`
+
+## Props
+
+| Prop               | Type                                            | Default        | Description                                                                          |
+| ------------------ | ----------------------------------------------- | -------------- | ------------------------------------------------------------------------------------ |
+| `show` \*          | `boolean`                                       | —              | Starts the countdown timer when true                                                 |
+| `timer` \*         | `number`                                        | —              | Countdown duration in seconds                                                        |
+| `timestamp`        | `number`                                        | —              | Unix timestamp (ms) at which the countdown ends; required if `timer` is not provided |
+| `notifyTimer`      | `number`                                        | —              | Notification threshold in seconds                                                    |
+| `offset`           | `{ top: number; left: number; right: number; }` | `{ top: 168 }` | Sticky position on desktop/tablet (px)                                               |
+| `mobileOffset`     | `{ top: number; }`                              | `{ top: 80 }`  | Sticky position on mobile (px)                                                       |
+| `align`            | `"left" \| "right"`                             | `"right"`      | Horizontal alignment of the sticky component                                         |
+| `fixed`            | `boolean`                                       | `true`         | Whether the component is sticky when scrolled out of view                            |
+| `reminderInterval` | `number`                                        | `120`          | Interval in seconds for polite screen reader reminders                               |
+| `onTick`           | `(seconds: number) => void`                     | —              | Called every second when value ≤ `notifyTimer` (not guaranteed to be precise)        |
+| `onNotify`         | `() => void`                                    | —              | Called once when the timer value drops below `notifyTimer`                           |
+| `onFinish`         | `() => void`                                    | —              | Called when the timer reaches zero                                                   |
+| `className`        | `string`                                        | —              | Class selector of the component                                                      |
+| `data-testid`      | `string`                                        | —              | Test identifier of the component                                                     |
+
+`*` = required
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/data-table.md b/docs/skills/cc-flagship-ds/resources/v4/components/data-table.md
new file mode 100644
index 0000000000..85afc4b459
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/data-table.md
@@ -0,0 +1,145 @@
+# DataTable
+
+Import: `import { DataTable } from "@lifesg/react-design-system/data-table"`
+
+## When to use
+
+-   Displaying tabular data with optional sorting, row selection, and custom cell rendering.
+-   Use `enableMultiSelect` + `enableSelectAll` when users need to act on multiple rows at once.
+
+## Usage
+
+### Column definitions, sorting, selection, and custom cell rendering
+
+```tsx
+import { useState, useMemo } from "react";
+import {
+    DataTable,
+    SortIndicatorsProps,
+} from "@lifesg/react-design-system/data-table";
+import { Pill } from "@lifesg/react-design-system/pill";
+
+const rows = [
+    { id: "1", name: "Alice", status: "active", score: 90 },
+    { id: "2", name: "Bob", status: "inactive", score: 72 },
+    { id: "3", name: "Carol", status: "active", score: 85 },
+];
+
+const Example = () => {
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [sortState, setSortState] = useState<SortIndicatorsProps>({
+        score: "desc",
+    });
+
+    // onSelect: toggle a single row id
+    const handleSelect = (rowId: string, isSelected: boolean) => {
+        setSelectedIds((prev) =>
+            isSelected ? [...prev, rowId] : prev.filter((id) => id !== rowId)
+        );
+    };
+
+    // onSelectAll: isAllSelected=true means "clear all"; false means "select all"
+    const handleSelectAll = (isAllSelected: boolean) => {
+        setSelectedIds(isAllSelected ? [] : rows.map((r) => r.id));
+    };
+
+    const handleHeaderClick = (fieldKey: string) => {
+        if (fieldKey === "score") {
+            setSortState({ score: sortState.score === "asc" ? "desc" : "asc" });
+        }
+    };
+
+    const sorted = useMemo(
+        () =>
+            [...rows].sort((a, b) =>
+                sortState.score === "asc"
+                    ? a.score - b.score
+                    : b.score - a.score
+            ),
+        [sortState]
+    );
+
+    return (
+        <DataTable
+            headers={[
+                { fieldKey: "name", label: "Name", keyColumn: true },
+                { fieldKey: "status", label: "Status" },
+                { fieldKey: "score", label: "Score", clickable: true },
+            ]}
+            rows={sorted.map((row) => ({
+                ...row,
+                // custom cell: render status as a Pill
+                status: <Pill type="outline">{row.status}</Pill>,
+            }))}
+            selectedIds={selectedIds}
+            disabledIds={["2"]}
+            sortIndicators={sortState}
+            enableMultiSelect
+            enableSelectAll
+            onSelect={handleSelect}
+            onSelectAll={handleSelectAll}
+            onHeaderClick={handleHeaderClick}
+        />
+    );
+};
+```
+
+## Props
+
+| Prop                    | Type                                           | Default     | Description                                               |
+| ----------------------- | ---------------------------------------------- | ----------- | --------------------------------------------------------- |
+| `headers` \*            | `(string \| HeaderItemProps)[]`                | —           | Configuration for each header column                      |
+| `rows`                  | `RowProps[]`                                   | —           | The list of data                                          |
+| `selectedIds`           | `string[]`                                     | —           | The ids of selected items                                 |
+| `disabledIds`           | `string[]`                                     | —           | The ids of disabled items                                 |
+| `sortIndicators`        | `{ [fieldKey]: "asc" \| "desc" }`              | —           | Sort indicator display state for each column              |
+| `alternatingRows`       | `boolean`                                      | —           | Every alternate row gets a different background colour    |
+| `loadState`             | `"success" \| "loading"`                       | `"success"` | Table load state; shows animation while loading           |
+| `renderCustomEmptyView` | `() => React.ReactNode`                        | —           | Custom view rendered when the table is empty              |
+| `emptyView`             | `ErrorDisplayAttributes`                       | —           | Override props for the empty view display                 |
+| `enableMultiSelect`     | `boolean`                                      | —           | Enables a checkbox in each row for multi-selection        |
+| `enableSelectAll`       | `boolean`                                      | —           | Enables a header checkbox to select all / clear selection |
+| `enableStickyHeader`    | `boolean`                                      | —           | Fixes the header to the top                               |
+| `enableActionBar`       | `boolean`                                      | —           | Shows an action bar when one or more rows are selected    |
+| `actionBarContent`      | `React.ReactNode`                              | —           | Custom content rendered within the action bar             |
+| `onClearSelectionClick` | `() => void`                                   | —           | Called when the clear button in the action bar is clicked |
+| `onSelect`              | `(rowId: string, isSelected: boolean) => void` | —           | Called when a row is selected                             |
+| `onSelectAll`           | `(isAllSelected: boolean) => void`             | —           | Called when all rows are selected                         |
+| `onHeaderClick`         | `(fieldKey: string) => void`                   | —           | Called with the column field key when a header is clicked |
+| `id`                    | `string`                                       | —           | Unique identifier of the component                        |
+| `className`             | `string`                                       | —           | Class selector of the component                           |
+| `data-testid`           | `string`                                       | —           | Test identifier of the component                          |
+
+`*` = required
+
+## HeaderItemProps
+
+| Prop          | Type                        | Default | Description                                                            |
+| ------------- | --------------------------- | ------- | ---------------------------------------------------------------------- |
+| `fieldKey` \* | `string`                    | —       | Key name in the row item object                                        |
+| `label` \*    | `string \| React.ReactNode` | —       | Display label for the column header                                    |
+| `clickable`   | `boolean`                   | —       | If true, `onHeaderClick` is called when the cell is clicked            |
+| `style`       | `CSSProperties`             | —       | Custom styles for the column header cell                               |
+| `keyColumn`   | `boolean`                   | —       | Marks this column as descriptive for screen reader row checkbox labels |
+
+## RowProps
+
+| Prop         | Type                                                                           | Default | Description                             |
+| ------------ | ------------------------------------------------------------------------------ | ------- | --------------------------------------- |
+| `id` \*      | `string`                                                                       | —       | Row id                                  |
+| `[fieldKey]` | `string \| number \| React.ReactNode \| (row, renderProps) => React.ReactNode` | —       | Other properties on the row item object |
+
+## Rules
+
+-   Each row object must have a unique `id: string` field.
+-   `selectedIds` and `disabledIds` are arrays of row `id` strings — manage them in external state.
+-   `onSelect(rowId, isSelected)` fires per row; toggle the id into/out of your `selectedIds` array.
+-   `onSelectAll(isAllSelected)` fires when the header checkbox is clicked; `isAllSelected` is `true` when the action should clear all selections (the parameter name is inverted — see example).
+-   For sortable columns, set `clickable: true` on the header and handle `onHeaderClick(fieldKey)`.
+-   Custom cell rendering: set a row field to a `ReactNode` or a render function `(row, renderProps) => ReactNode`.
+
+## Anti-patterns
+
+-   Do not derive `selectedIds` from row data alone without external state — the table is uncontrolled for selection without it.
+-   Do not omit `id` on row objects — selection and disabled logic will break silently.
+-   Do not add `clickable: true` to a header without wiring `onHeaderClick` — clicks will silently do nothing.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/date-navigator.md b/docs/skills/cc-flagship-ds/resources/v4/components/date-navigator.md
new file mode 100644
index 0000000000..bbaa0c0f5e
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/date-navigator.md
@@ -0,0 +1,27 @@
+# DateNavigator
+
+Import: `import { DateNavigator } from "@lifesg/react-design-system/date-navigator"`
+
+## Props
+
+| Prop                     | Type                            | Default         | Description                                                            |
+| ------------------------ | ------------------------------- | --------------- | ---------------------------------------------------------------------- |
+| `selectedDate` \*        | `string`                        | —               | Current displayed date in `YYYY-MM-DD` format                          |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void` | —               | Called on left arrow navigation button click                           |
+| `onRightArrowClick` \*   | `(currentDate: string) => void` | —               | Called on right arrow navigation button click                          |
+| `minDate`                | `string`                        | —               | Minimum date allowed for navigation in `YYYY-MM-DD` format (inclusive) |
+| `maxDate`                | `string`                        | —               | Maximum date allowed for navigation in `YYYY-MM-DD` format (inclusive) |
+| `loading`                | `boolean`                       | —               | Disables navigation buttons while loading                              |
+| `showDateAsShortForm`    | `boolean`                       | —               | Shows the date in short form                                           |
+| `showCurrentDateAsToday` | `boolean`                       | —               | Shows today's system date as "Today"                                   |
+| `onCalendarDateSelect`   | `(currentDate: string) => void` | —               | Called on a calendar date selection                                    |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`        | `document body` | Root element that hosts the calendar dropdown                          |
+| `id`                     | `string`                        | —               | Identifier of the component                                            |
+| `className`              | `string`                        | —               | Class selector of the component                                        |
+| `data-testid`            | `string`                        | —               | Test identifier of the component                                       |
+
+`*` = required
+
+## Rules
+
+-   Only override `dropdownRootNode` if you need the dropdown to share a stacking context with a scroll container — may cause z-index issues.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/divider.md b/docs/skills/cc-flagship-ds/resources/v4/components/divider.md
new file mode 100644
index 0000000000..2603aed8a3
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/divider.md
@@ -0,0 +1,21 @@
+# Divider
+
+Import: `import { Divider } from "@lifesg/react-design-system/divider"`
+
+## Props
+
+Inherits all props from `HTMLElement`.
+
+| Prop          | Type                                           | Default   | Description                                                   |
+| ------------- | ---------------------------------------------- | --------- | ------------------------------------------------------------- |
+| `thickness`   | `number`                                       | `1`       | Height of the Divider in px                                   |
+| `lineStyle`   | `"solid" \| "dashed"`                          | `"solid"` | Style of the divider line                                     |
+| `layoutType`  | `"flex" \| "grid"`                             | `"flex"`  | Layout type context                                           |
+| `color`       | `string \| (props: ThemeStyleProps) => string` | —         | Color of the divider line                                     |
+| `mobileCols`  | `number \| number[]`                           | `4`       | Column span on mobile; only applies with `layoutType="grid"`  |
+| `tabletCols`  | `number \| number[]`                           | `8`       | Column span on tablet; only applies with `layoutType="grid"`  |
+| `desktopCols` | `number \| number[]`                           | `12`      | Column span on desktop; only applies with `layoutType="grid"` |
+
+## Rules
+
+-   `mobileCols`, `tabletCols`, `desktopCols` follow the same semantics as `Layout.ColDiv` — see ColDiv docs for details.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/drawer.md b/docs/skills/cc-flagship-ds/resources/v4/components/drawer.md
new file mode 100644
index 0000000000..f2b3ced59e
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/drawer.md
@@ -0,0 +1,80 @@
+# Drawer
+
+Import: `import { Drawer } from "@lifesg/react-design-system/drawer"`
+
+## When to use
+
+Use to show supplementary content or actions without navigating away from the current page — for example, filter panels or detail views.
+
+Do not use for:
+
+-   Primary forms that require focused attention
+-   Flows that need the full viewport
+
+## Usage
+
+```tsx
+import { useState } from "react";
+import { Drawer } from "@lifesg/react-design-system/drawer";
+import { Button } from "@lifesg/react-design-system/button";
+import { Text } from "@lifesg/react-design-system/text";
+
+const FilterDrawer = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+
+    return (
+        <>
+            <Button.Default onClick={() => setShow(true)}>
+                Open filters
+            </Button.Default>
+
+            <Drawer
+                show={show}
+                heading="Filter options"
+                onClose={handleClose}
+                onOverlayClick={handleClose}
+            >
+                <div style={{ padding: "1.5rem" }}>
+                    <Text.H4 style={{ marginBottom: "0.75rem" }}>
+                        Category
+                    </Text.H4>
+                    <Text.Body style={{ marginBottom: "2rem" }}>
+                        Filter content goes here.
+                    </Text.Body>
+                    <Button.Default styleType="secondary" onClick={handleClose}>
+                        Close
+                    </Button.Default>
+                </div>
+            </Drawer>
+        </>
+    );
+};
+```
+
+## Props
+
+| Prop             | Type              | Default | Description                                 |
+| ---------------- | ----------------- | ------- | ------------------------------------------- |
+| `show`           | `boolean`         | —       | Controls visibility                         |
+| `heading`        | `string`          | —       | Header text of the drawer panel             |
+| `onClose`        | `() => void`      | —       | Called when the close button is clicked     |
+| `onOverlayClick` | `() => void`      | —       | Called when the backdrop overlay is clicked |
+| `children`       | `React.ReactNode` | —       | Panel content                               |
+| `id`             | `string`          | —       | Unique identifier                           |
+| `className`      | `string`          | —       | Class selector                              |
+| `data-testid`    | `string`          | —       | Test identifier                             |
+
+## Rules
+
+-   Always provide `onClose` so users can dismiss the panel via the close button.
+-   Provide `onOverlayClick` to allow dismissal by clicking outside the panel; set it to the same handler as `onClose` unless the overlay should not close the panel.
+-   Use `heading` to give the drawer a descriptive title for the user and for screen readers.
+-   The drawer slides in from the right edge of the viewport.
+-   Content scrolls independently within the panel when it exceeds the panel height.
+
+## Anti-patterns
+
+-   Do not use the Drawer for full forms — use a dedicated page or Modal instead.
+-   Do not omit `onClose` — users must have a way to dismiss the panel.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/error-display.md b/docs/skills/cc-flagship-ds/resources/v4/components/error-display.md
new file mode 100644
index 0000000000..c605f4904d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/error-display.md
@@ -0,0 +1,114 @@
+# ErrorDisplay
+
+Import: `import { ErrorDisplay } from "@lifesg/react-design-system/error-display"`
+
+## When to use
+
+Use for full-page or full-section states where the primary content cannot be shown — HTTP errors, empty results, session states, and system messages. It handles illustration, title, description, and action button as a unit.
+
+Do not build custom error pages with raw Typography + Button — always use `ErrorDisplay` so illustrations and copy stay consistent across products.
+
+## Variants
+
+| `type`                          | When to use                                                      |
+| ------------------------------- | ---------------------------------------------------------------- |
+| `"no-item-found"`               | Search or filter returned no results                             |
+| `"404"`                         | Page not found                                                   |
+| `"403"`                         | Access denied / permission error                                 |
+| `"500"`                         | Internal server error                                            |
+| `"400"`                         | Bad request                                                      |
+| `"408"`                         | Request timeout                                                  |
+| `"502"`                         | Bad gateway                                                      |
+| `"503"`                         | Service unavailable                                              |
+| `"504"`                         | Gateway timeout                                                  |
+| `"maintenance"`                 | Planned downtime — requires `additionalProps.dateString`         |
+| `"inactivity"`                  | Session timeout warning — requires `additionalProps.secondsLeft` |
+| `"logout"`                      | User has been logged out                                         |
+| `"warning"`                     | General warning state                                            |
+| `"confirmation"`                | Action confirmed (e.g. submission complete)                      |
+| `"link-error"`                  | Broken or expired link                                           |
+| `"insufficient-credits"`        | User lacks credits to proceed                                    |
+| `"payment-unsuccessful"`        | Payment failed                                                   |
+| `"transfer-unsuccessful"`       | Transfer failed                                                  |
+| `"unsupported-browser"`         | Browser not supported                                            |
+| `"partially-supported-browser"` | Browser partially supported                                      |
+
+## Usage
+
+```tsx
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+
+{
+    /* No search results */
+}
+<ErrorDisplay
+    type="no-item-found"
+    title="No results found"
+    description="Try adjusting your search or filters."
+    actionButton={{ children: "Clear filters", onClick: handleClear }}
+/>;
+
+{
+    /* Page not found */
+}
+<ErrorDisplay type="404" />;
+
+{
+    /* Maintenance with scheduled date */
+}
+<ErrorDisplay
+    type="maintenance"
+    additionalProps={{ dateString: "1 Jan 2025, 8:00am to 10:00am" }}
+/>;
+
+{
+    /* Session inactivity warning */
+}
+<ErrorDisplay
+    type="inactivity"
+    additionalProps={{ secondsLeft: 60, reminderInterval: 30 }}
+/>;
+```
+
+## Props
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                           | Default               | Description                                        |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | -------------------------------------------------- |
+| `type` \*            | `"400" \| "403" \| "404" \| "408" \| "500" \| "502" \| "503" \| "504" \| "confirmation" \| "inactivity" \| "insufficient-credits" \| "link-error" \| "logout" \| "warning" \| "maintenance" \| "no-item-found" \| "payment-unsuccessful" \| "transfer-unsuccessful" \| "unsupported-browser" \| "partially-supported-browser"` | —                     | The type of error                                  |
+| `img`                | `HTMLImageElement`                                                                                                                                                                                                                                                                                                             | —                     | Error image properties                             |
+| `title`              | `string`                                                                                                                                                                                                                                                                                                                       | —                     | Title of the ErrorDisplay                          |
+| `description`        | `string \| JSX.Element`                                                                                                                                                                                                                                                                                                        | —                     | Description of the ErrorDisplay                    |
+| `actionButton`       | `HTMLButtonElement`                                                                                                                                                                                                                                                                                                            | `children: "Proceed"` | Action button at the bottom                        |
+| `illustrationScheme` | `"base" \| "bookingsg" \| "rbs"`                                                                                                                                                                                                                                                                                               | —                     | Use a resource scheme instead of the default theme |
+| `additionalProps`    | `MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes`                                                                                                                                                                                                                                                            | —                     | Additional properties for certain error types      |
+| `imageOnly`          | `boolean`                                                                                                                                                                                                                                                                                                                      | —                     | Renders only the image                             |
+
+`*` = required
+
+## MaintenanceAdditionalAttributes
+
+| Prop            | Type     | Default | Description                            |
+| --------------- | -------- | ------- | -------------------------------------- |
+| `dateString` \* | `string` | —       | Date display for the maintenance error |
+
+## InactivityAdditionalAttributes
+
+| Prop             | Type     | Default | Description                                          |
+| ---------------- | -------- | ------- | ---------------------------------------------------- |
+| `secondsLeft` \* | `number` | —       | Time remaining in seconds for the inactivity display |
+
+## Rules
+
+-   Always use `ErrorDisplay` for error/empty states — never build custom error pages with raw components.
+-   `type` is required — it determines the default illustration, title, and description.
+-   Override `title` and `description` only when the defaults don't fit your context.
+-   `actionButton` accepts standard `ButtonProps` — label and `onClick` are the common fields.
+-   `"maintenance"` requires `additionalProps.dateString` to render the scheduled date in the description.
+-   `"inactivity"` requires `additionalProps.secondsLeft` for the countdown display.
+-   For listing pages use `type="no-item-found"` — it has the correct "empty results" illustration.
+
+## Anti-patterns
+
+-   Do not use `imageOnly` unless rendering inside a constrained space where text would overflow.
+-   Do not hardcode error page titles/descriptions that duplicate what `ErrorDisplay` already provides by default.
+-   Do not use `type="warning"` as a generic placeholder — it implies a system-level warning, not a validation message (use `Alert` for that).
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/feedback-rating.md b/docs/skills/cc-flagship-ds/resources/v4/components/feedback-rating.md
new file mode 100644
index 0000000000..92bb2f0851
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/feedback-rating.md
@@ -0,0 +1,64 @@
+# FeedbackRating
+
+Import: `import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating"`
+
+## When to use
+
+Use at the end of a flow or session to collect a star rating and an optional submission action from the user.
+
+## Usage
+
+### Complete controlled pattern
+
+```tsx
+import { useState } from "react";
+import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating";
+
+const RatingWidget = () => {
+    // Track rating separately — onSubmit does NOT receive it
+    const [rating, setRating] = useState(0);
+
+    const handleSubmit = () => {
+        // Read from state, not from onSubmit arguments (there are none)
+        submitFeedback({ stars: rating });
+    };
+
+    return (
+        <FeedbackRating
+            rating={rating}
+            onRatingChange={(value) => setRating(value)}
+            onSubmit={handleSubmit}
+            description="How was your experience?"
+            buttonLabel="Send feedback"
+        />
+    );
+};
+```
+
+**Key gotcha:** `onSubmit` has the signature `() => void` — it carries no payload. The rating value is only available through the `rating` state you control via `onRatingChange`.
+
+## Props
+
+| Prop                | Type                      | Default                  | Description                                        |
+| ------------------- | ------------------------- | ------------------------ | -------------------------------------------------- |
+| `rating` \*         | `number`                  | —                        | Current selected rating state                      |
+| `onRatingChange` \* | `(value: number) => void` | —                        | Called when a star is clicked                      |
+| `onSubmit` \*       | `() => void`              | —                        | Called when the submit button is clicked           |
+| `imgSrc`            | `string`                  | Default banner image     | Banner image src; pass empty string to hide banner |
+| `description`       | `string`                  | `"Rate your experience"` | Description text displayed above the stars         |
+| `buttonLabel`       | `string`                  | `"Submit"`               | Submit button label                                |
+| `id`                | `string`                  | —                        | Unique id of the component                         |
+| `className`         | `string`                  | —                        | Class selector of the component                    |
+| `data-testid`       | `string`                  | —                        | Test identifier of the component                   |
+
+`*` = required
+
+## Rules
+
+-   All three props — `rating`, `onRatingChange`, `onSubmit` — are required.
+-   `onSubmit` does **not** receive the rating value. Track the rating separately via `onRatingChange` state and read it inside `onSubmit`.
+-   `rating` must be controlled state; the component does not manage selection internally.
+
+## Anti-patterns
+
+-   Do not try to read the rating from inside `onSubmit`'s arguments — it receives none. Always use the state value set by `onRatingChange`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/file-download.md b/docs/skills/cc-flagship-ds/resources/v4/components/file-download.md
new file mode 100644
index 0000000000..504a7851cc
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/file-download.md
@@ -0,0 +1,41 @@
+# FileDownload
+
+Import: `import { FileDownload } from "@lifesg/react-design-system/file-download"`
+
+## Sub-components
+
+-   `FileItemProps` — shape of each item in `fileItems`
+
+## Props
+
+| Prop            | Type                                                     | Default      | Description                               |
+| --------------- | -------------------------------------------------------- | ------------ | ----------------------------------------- |
+| `fileItems` \*  | `FileItemProps[]`                                        | —            | The files to be rendered                  |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —            | Called when a file item is clicked        |
+| `title`         | `string \| JSX.Element`                                  | —            | A title to be displayed for the component |
+| `description`   | `string \| JSX.Element`                                  | —            | The description to be displayed           |
+| `styleType`     | `"bordered" \| "no-border"`                              | `"bordered"` | The style type for the component          |
+| `id`            | `string`                                                 | —            | The unique id of the component            |
+| `className`     | `string`                                                 | —            | The class selector of the component       |
+| `data-testid`   | `string`                                                 | —            | The test identifier for the component     |
+
+`*` = required
+
+## FileItemProps
+
+| Prop                    | Type                        | Default | Description                                   |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------- |
+| `id` \*                 | `string`                    | —       | The unique identifier of the file             |
+| `name` \*               | `string`                    | —       | The name of the file                          |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file                     |
+| `filePath` \*           | `string`                    | —       | The remote path of the file                   |
+| `size`                  | `number`                    | —       | The size of the file in bytes                 |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Custom error message when file download fails |
+| `thumbnailImageDataUrl` | `string`                    | —       | The thumbnail of the file                     |
+| `truncateText`          | `boolean`                   | `true`  | Indicates if text should be truncated         |
+| `ready`                 | `boolean`                   | `true`  | Indicates if the file is ready for download   |
+
+## Rules
+
+-   `fileItems` and `onDownload` are required.
+-   On `FileItemProps`: `id`, `name`, `mimeType`, and `filePath` are required.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/file-upload.md b/docs/skills/cc-flagship-ds/resources/v4/components/file-upload.md
new file mode 100644
index 0000000000..8c1f2d6e3c
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/file-upload.md
@@ -0,0 +1,91 @@
+# FileUpload
+
+Import: `import { FileUpload } from "@lifesg/react-design-system/file-upload"`
+
+## When to use
+
+-   Forms that require users to attach one or more files (e.g. supporting documents, ID scans, images).
+-   Use `sortable` when file order matters for downstream processing.
+-   Use `editableFileItems` when image files need alt-text or descriptions.
+-   Use `readOnly` on review or summary screens to display uploaded files without allowing changes.
+
+## Usage
+
+```tsx
+import { FileUpload } from "@lifesg/react-design-system/file-upload";
+
+<FileUpload
+    title="Upload supporting documents"
+    description="PDF, JPG, or PNG. Max 5 MB each."
+    accept=".pdf,.jpg,.png"
+    fileItems={fileItems}
+    onChange={(files) => {}}
+    onDelete={(item) => {}}
+/>;
+```
+
+## Props
+
+| Prop                       | Type                                   | Default      | Description                                                             |
+| -------------------------- | -------------------------------------- | ------------ | ----------------------------------------------------------------------- |
+| `fileItems`                | `FileItemProps[]`                      | —            | Files currently displayed in the list                                   |
+| `title`                    | `string \| JSX.Element`                | —            | Title displayed above the upload area                                   |
+| `description`              | `string \| JSX.Element`                | —            | Supporting text inside the upload area                                  |
+| `styleType`                | `"bordered" \| "no-border"`            | `"bordered"` | Visual style of the component                                           |
+| `maxFiles`                 | `number`                               | —            | Maximum number of files allowed                                         |
+| `warning`                  | `string \| JSX.Element`                | —            | Warning message shown below the upload area                             |
+| `errorMessage`             | `string \| JSX.Element`                | —            | General error message for the component                                 |
+| `editableFileItems`        | `boolean`                              | —            | Allows users to edit descriptions on image file items                   |
+| `fileDescriptionMaxLength` | `number`                               | —            | Maximum length of the image file description                            |
+| `descriptionRequired`      | `boolean`                              | `true`       | When `false`, the save button is enabled even with an empty description |
+| `descriptionLabel`         | `FormLabelProps`                       | —            | Overrides the default label and subtext for the description field       |
+| `sortable`                 | `boolean`                              | —            | Allows users to reorder file items via drag                             |
+| `readOnly`                 | `boolean`                              | —            | Shows uploaded files without the upload area                            |
+| `disabled`                 | `boolean`                              | —            | Disables the component                                                  |
+| `id`                       | `string`                               | —            | Unique identifier of the component                                      |
+| `name`                     | `string`                               | —            | Name attribute of the component                                         |
+| `className`                | `string`                               | —            | Class selector of the component                                         |
+| `onChange`                 | `(files: File[]) => void`              | —            | Called when files are added via drag-drop or click                      |
+| `onEdit`                   | `(fileItem: FileItemProps) => void`    | —            | Called when a file item description is updated                          |
+| `onDelete`                 | `(fileItem: FileItemProps) => void`    | —            | Called when a file item's delete button is clicked                      |
+| `onSort`                   | `(fileItems: FileItemProps[]) => void` | —            | Called when files are reordered via drag                                |
+
+Also inherits additional props from the HTML `<input type="file">` element (e.g. `accept`).
+
+## Custom labels
+
+| Prop                             | Type     | Default          | Description                                       |
+| -------------------------------- | -------- | ---------------- | ------------------------------------------------- |
+| `customLabels.uploadButtonLabel` | `string` | `"Upload files"` | Label of the button that triggers the file dialog |
+
+## FileItemProps
+
+| Prop                    | Type                        | Required | Description                              |
+| ----------------------- | --------------------------- | -------- | ---------------------------------------- |
+| `id`                    | `string`                    | Yes      | Unique identifier for the file           |
+| `name`                  | `string`                    | Yes      | File name displayed in the list          |
+| `type`                  | `string`                    | Yes      | MIME type of the file                    |
+| `size`                  | `number`                    | Yes      | File size in bytes                       |
+| `description`           | `string`                    | —        | Alt text or description for the file     |
+| `progress`              | `number`                    | —        | Upload progress from 0 to 1              |
+| `errorMessage`          | `string \| React.ReactNode` | —        | Per-file error message                   |
+| `thumbnailImageDataUrl` | `string`                    | —        | Thumbnail data URL rendered for the file |
+| `truncateText`          | `boolean`                   | `true`   | Truncates long file names                |
+
+## Rules
+
+-   Always manage `fileItems` state in the parent — the component does not store files internally.
+-   Always handle `onChange` to convert incoming `File[]` into `FileItemProps[]` and add them to state.
+-   Always handle `onDelete` to remove the corresponding item from state.
+-   Use `maxFiles` to enforce the maximum number of attachments allowed by the backend.
+-   Use `progress` on individual `FileItemProps` to show per-file upload progress.
+-   Use `errorMessage` on individual `FileItemProps` to surface per-file upload errors.
+-   Use the component-level `errorMessage` for overall validation errors (e.g. "At least one file is required").
+-   Use `accept` (inherited from `<input type="file">`) to restrict file types to what the backend accepts.
+
+## Anti-patterns
+
+-   Do not use without wiring `onChange` and `onDelete` — the list will not update.
+-   Do not store files in component state inside the same component that renders `FileUpload` — hoist state to the form level.
+-   Do not skip `id`, `name`, `type`, and `size` in `FileItemProps` — they are required fields.
+-   Do not use `editableFileItems` for non-image files — description editing only applies to images.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/filter.md b/docs/skills/cc-flagship-ds/resources/v4/components/filter.md
new file mode 100644
index 0000000000..c97de982d0
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/filter.md
@@ -0,0 +1,211 @@
+# Filter
+
+Import: `import { Filter } from "@lifesg/react-design-system/filter"`
+
+## When to use
+
+Use on listing pages to narrow a result set. `Filter` automatically switches between a desktop sidebar and a mobile modal at the `lg-max` breakpoint.
+
+## Composition
+
+```
+Filter                                  ← recommended: auto-switches sidebar ↔ modal at lg breakpoint
+├── Filter.Item title="Sort by"         ← section header + collapsible wrapper
+│   └── {RadioButton group}             ← sort options use RadioButton, not Filter.Checkbox
+├── Filter.Item title="Category"
+│   └── Filter.Checkbox                 ← multi-select filter options
+└── Filter.Item title="..."
+    └── Filter.Checkbox
+```
+
+Manual variants (bypass auto-responsive):
+
+```
+Filter.Sidebar                          ← desktop sidebar only
+Filter.Modal                            ← mobile modal only
+Filter.Page                             ← full-page filter (mobile-only flows)
+```
+
+`Filter.Item` is the only valid direct child of `Filter`, `Filter.Sidebar`, or `Filter.Modal`. Use `RadioButton` for sort (single-select); use `Filter.Checkbox` for multi-select filters.
+
+## Variants
+
+| Variant                  | When to use                                                     |
+| ------------------------ | --------------------------------------------------------------- |
+| `<Filter>` (recommended) | Auto-responsive — desktop sidebar + mobile modal                |
+| `<Filter.Sidebar>`       | Desktop sidebar only — when bypassing auto-responsive behaviour |
+| `<Filter.Modal>`         | Mobile modal only — when bypassing auto-responsive behaviour    |
+
+## Usage
+
+### Auto-responsive Filter (recommended)
+
+`Filter` renders a sidebar on desktop and a modal on mobile automatically. Pass children as a function to receive `mode` (`"desktop" | "mobile"`) when you need to render differently per viewport.
+
+```tsx
+import { useState } from "react";
+import { Filter } from "@lifesg/react-design-system/filter";
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+const ListingFilter = () => {
+    const [category, setCategory] = useState("all");
+    const [activeCount, setActiveCount] = useState(0);
+
+    const handleClear = () => {
+        setCategory("all");
+        setActiveCount(0);
+    };
+
+    return (
+        <Filter
+            count={activeCount}
+            onClear={handleClear}
+            onDone={() => {
+                /* commit draft state */
+            }}
+            onDismiss={() => {
+                /* discard draft state */
+            }}
+        >
+            {(mode) => (
+                <>
+                    <Filter.Item title="Category">
+                        <RadioButton
+                            name="category"
+                            value="all"
+                            checked={category === "all"}
+                            onChange={() => setCategory("all")}
+                        >
+                            All
+                        </RadioButton>
+                        <RadioButton
+                            name="category"
+                            value="news"
+                            checked={category === "news"}
+                            onChange={() => setCategory("news")}
+                        >
+                            News
+                        </RadioButton>
+                    </Filter.Item>
+                    <Filter.Item title="Sort by" collapsible={false}>
+                        <RadioButton name="sort" value="newest" defaultChecked>
+                            Newest first
+                        </RadioButton>
+                        <RadioButton name="sort" value="oldest">
+                            Oldest first
+                        </RadioButton>
+                    </Filter.Item>
+                </>
+            )}
+        </Filter>
+    );
+};
+```
+
+Key points:
+
+-   `onDone` and `onDismiss` are mobile-only callbacks; they are ignored on desktop.
+-   `collapsible={false}` on sort sections keeps them always expanded.
+-   `count` drives the active-filter badge in the header.
+
+## Props
+
+### Filter
+
+Auto-responsive: renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile at the `lg-max` breakpoint.
+
+| Prop                      | Type                                                               | Default   | Description                                                      |
+| ------------------------- | ------------------------------------------------------------------ | --------- | ---------------------------------------------------------------- |
+| `children`                | `React.ReactNode \| (mode: Mode) => React.ReactNode`               | —         | `Filter.Item` children — **required**                            |
+| `onClear`                 | `() => void`                                                       | —         | Called when the Clear button is pressed                          |
+| `clearButtonDisabled`     | `boolean`                                                          | `false`   | Disable the Clear button                                         |
+| `count`                   | `number`                                                           | —         | Selected filter count shown in the header when greater than zero |
+| `customLabels`            | `FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps`     | —         | Override built-in label strings                                  |
+| `onDismiss`               | `() => void`                                                       | —         | Mobile only — called when the modal is dismissed                 |
+| `onDone`                  | `() => void`                                                       | —         | Mobile only — called when Done is tapped                         |
+| `onModalOpen`             | `() => void`                                                       | —         | Mobile only — called when the modal opens                        |
+| `toggleFilterButtonStyle` | `"default" \| "secondary" \| "light" \| "link"`                    | `"light"` | Mobile only — style of the "Filters" toggle button               |
+| `insets`                  | `{ top?: number, bottom?: number, left?: number, right?: number }` | —         | Mobile only — safe-area insets for notched devices               |
+| `id`                      | `string`                                                           | —         | Unique identifier                                                |
+| `className`               | `string`                                                           | —         | Class selector                                                   |
+| `data-testid`             | `string`                                                           | —         | Test identifier                                                  |
+
+### Custom labels (Filter / Filter.Modal)
+
+| Key                       | Default                   |
+| ------------------------- | ------------------------- |
+| `headerTitle`             | `"Filters"`               |
+| `clearButtonLabel`        | `"Clear"`                 |
+| `toggleFilterButtonLabel` | `"Filters"` (mobile only) |
+| `doneButtonLabel`         | `"Done"` (mobile only)    |
+
+### Filter.Sidebar
+
+| Prop                  | Type                                                  | Default | Description                             |
+| --------------------- | ----------------------------------------------------- | ------- | --------------------------------------- |
+| `children`            | `React.ReactNode`                                     | —       | `Filter.Item` components — **required** |
+| `onClear`             | `() => void`                                          | —       | Called when the Clear button is pressed |
+| `clearButtonDisabled` | `boolean`                                             | `false` | Disable the Clear button                |
+| `count`               | `number`                                              | —       | Selected filter count                   |
+| `customLabels`        | `{ headerTitle?: string, clearButtonLabel?: string }` | —       | Override label strings                  |
+| `id`                  | `string`                                              | —       | Unique identifier                       |
+| `className`           | `string`                                              | —       | Class selector                          |
+| `data-testid`         | `string`                                              | —       | Test identifier                         |
+
+### Filter.Modal
+
+Inherits Filter.Sidebar props, plus:
+
+| Prop                      | Type                                                               | Default   | Description                                       |
+| ------------------------- | ------------------------------------------------------------------ | --------- | ------------------------------------------------- |
+| `onDismiss`               | `() => void`                                                       | —         | Called when the modal is dismissed                |
+| `onDone`                  | `() => void`                                                       | —         | Called when Done is tapped                        |
+| `onModalOpen`             | `() => void`                                                       | —         | Called when the modal opens                       |
+| `toggleFilterButtonStyle` | `"default" \| "secondary" \| "light" \| "link"`                    | `"light"` | Style of the "Filters" toggle button              |
+| `insets`                  | `{ top?: number, bottom?: number, left?: number, right?: number }` | —         | Safe-area insets for notched devices              |
+| `customLabels`            | `FilterModalCustomLabelProps`                                      | —         | Override label strings including mobile-only keys |
+
+### Filter.Item
+
+| Prop                | Type                                                 | Default | Description                                     |
+| ------------------- | ---------------------------------------------------- | ------- | ----------------------------------------------- |
+| `children`          | `React.ReactNode \| (mode: Mode) => React.ReactNode` | —       | Filter controls — **required**                  |
+| `title`             | `string`                                             | —       | Section heading                                 |
+| `collapsible`       | `boolean`                                            | `true`  | Allow collapsing the section (desktop only)     |
+| `initialExpanded`   | `boolean`                                            | `false` | Initial expand state (uncontrolled)             |
+| `expanded`          | `boolean`                                            | —       | Controlled expand state                         |
+| `onExpandChange`    | `(expanded: boolean) => void`                        | —       | Called when expand state changes (desktop only) |
+| `showDivider`       | `boolean`                                            | `true`  | Show header divider in desktop mode             |
+| `showMobileDivider` | `boolean`                                            | `true`  | Show divider in mobile mode                     |
+| `id`                | `string`                                             | —       | Unique identifier                               |
+| `className`         | `string`                                             | —       | Class selector                                  |
+| `data-testid`       | `string`                                             | —       | Test identifier                                 |
+
+### Filter.Page
+
+| Prop        | Type              | Description                          |
+| ----------- | ----------------- | ------------------------------------ |
+| `children`  | `React.ReactNode` | Page content — **required**          |
+| `onDismiss` | `() => void`      | Called when the back arrow is tapped |
+| `onDone`    | `() => void`      | Called when Done is tapped           |
+
+`Mode` is `"desktop" | "mobile"`.
+
+## Rules
+
+-   `Filter` is the recommended entry point — it automatically renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile.
+-   Always provide `onClear` to reset all filter state in a single handler.
+-   Set `collapsible={false}` on sort sections — sort options should always be visible.
+-   Pass children as a function `(mode) => ReactNode` to render different content on desktop vs mobile.
+-   `Filter.Modal` has a built-in Done button — do not add an external Apply button; use `onDone` to react to it.
+-   Add a keyword search input (`Form.Input`) above the `Filter` component — search is not built into `Filter`.
+-   Use `count` to show the number of active filters in the header.
+-   Use `Filter.Sidebar` or `Filter.Modal` directly only when overriding the responsive behaviour.
+-   `Filter.Page` is used inside `Filter.Modal` only, for drill-down sub-pages.
+
+## Anti-patterns
+
+-   Do not pass `viewport`, `showSearch`, or `searchText` — these props do not exist.
+-   Do not use `headerTitle`, `toggleFilterButtonLabel`, or `doneButtonLabel` directly on `Filter` — these are deprecated. Use `customLabels` instead.
+-   Do not add an external Apply button when using `Filter.Modal` — the built-in Done button handles it.
+-   Do not use `Filter.Sidebar` and `Filter.Modal` separately unless you need to override responsive behaviour — use `Filter` instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/footer.md b/docs/skills/cc-flagship-ds/resources/v4/components/footer.md
new file mode 100644
index 0000000000..3454193946
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/footer.md
@@ -0,0 +1,95 @@
+# Footer
+
+Import: `import { Footer } from "@lifesg/react-design-system/footer"`
+
+## When to use
+
+Place at the bottom of every page. Required on all pages.
+
+## Variants
+
+| Variant                 | When to use                                                      |
+| ----------------------- | ---------------------------------------------------------------- |
+| `<Footer />` (no props) | Standard pages — disclaimer links and copyright are theme-driven |
+| `links`                 | Pages with navigational footer links (max 2 columns)             |
+| `copyrightInfo`         | Custom copyright text required                                   |
+| `layout="stretch"`      | Full-width layout — pair with `Navbar layout="stretch"`          |
+
+## Usage
+
+```tsx
+import { Footer } from "@lifesg/react-design-system/footer";
+
+{
+    /* Standard footer — no props required */
+}
+<Footer />;
+
+{
+    /* Footer with navigation links */
+}
+<Footer
+    links={[
+        [
+            { children: "About us", href: "/about" },
+            { children: "Contact", href: "/contact" },
+        ],
+    ]}
+    lastUpdated={new Date("2025-01-01")}
+/>;
+```
+
+## Props
+
+| Prop                | Type                                 | Default       | Description                                                                                   |
+| ------------------- | ------------------------------------ | ------------- | --------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`             | —             | Navigation links in the top section — array of columns                                        |
+| `children`          | `JSX.Element \| JSX.Element[]`       | —             | Custom content for the top section; overrides `links` and addons                              |
+| `showDownloadAddon` | `boolean`                            | —             | Show app store download buttons                                                               |
+| `showResourceAddon` | `boolean`                            | —             | Show theme-specific resource links; `showDownloadAddon` takes precedence when both are `true` |
+| `disclaimerLinks`   | `DisclaimerLinks`                    | —             | Override href/onClick for mandatory disclaimer links                                          |
+| `copyrightInfo`     | `string`                             | —             | Custom copyright text; overrides auto-generated text and makes `lastUpdated` irrelevant       |
+| `logoSrc`           | `string`                             | theme default | Logo image source                                                                             |
+| `logoAlt`           | `string`                             | `""`          | Logo image alt text                                                                           |
+| `lastUpdated`       | `Date`                               | —             | Date shown in "Last updated" text (ignored when `copyrightInfo` is set)                       |
+| `hideLogo`          | `boolean`                            | —             | Hide the logo; links align to the leftmost area                                               |
+| `layout`            | `"default" \| "stretch"`             | `"default"`   | Layout type — must match Navbar `layout`                                                      |
+| `onFooterLinkClick` | `(link: FooterLinkProps<T>) => void` | —             | Called when a footer link is clicked                                                          |
+| `id`                | `string`                             | —             | Unique identifier                                                                             |
+| `className`         | `string`                             | —             | Class selector                                                                                |
+| `data-testid`       | `string`                             | —             | Test identifier                                                                               |
+
+## FooterLinkProps\<T\>
+
+Inherits `TypographyLinkProps`, plus:
+
+| Prop           | Type     | Description                                 |
+| -------------- | -------- | ------------------------------------------- |
+| `data-options` | `T`      | Custom attributes passed to the link object |
+| `data-testid`  | `string` | Test identifier                             |
+
+## DisclaimerLinks
+
+| Prop                  | Type                  | Default    | Description                                                         |
+| --------------------- | --------------------- | ---------- | ------------------------------------------------------------------- |
+| `privacy`             | `TypographyLinkProps` | predefined | Privacy Statement link — text is fixed to "Privacy Statement"       |
+| `termsOfUse`          | `TypographyLinkProps` | predefined | Terms of Use link — text is fixed to "Terms of Use"                 |
+| `reportVulnerability` | `TypographyLinkProps` | predefined | Report Vulnerability link — text is fixed to "Report Vulnerability" |
+
+## Rules
+
+-   Use `<Footer />` with no props for standard pages — do not add unnecessary props.
+-   `layout` must match the Navbar `layout` prop; do not mix `"default"` and `"stretch"`.
+-   Wrap the app in a flex column layout so the footer stays pinned to the bottom on short pages:
+    -   Outer wrapper: `display: flex; flex-direction: column; min-height: 100vh`
+    -   Page content area: `flex: 1`
+-   Disclaimer link text cannot be customised — only `href` and event handlers can be overridden via `disclaimerLinks`.
+-   `copyrightInfo` overrides `lastUpdated` — do not set both.
+-   When `showDownloadAddon` and `showResourceAddon` are both `true`, download takes precedence.
+-   `links` is a 2D array: each inner array is one column of links.
+
+## Anti-patterns
+
+-   Do not omit the flex layout wrapper — the footer will not stick to the bottom on short pages.
+-   Do not pass `children` and `links` together — `children` replaces the top section entirely.
+-   Do not customise disclaimer link labels — they are legally fixed strings.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-date-input.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-date-input.md
new file mode 100644
index 0000000000..b7ccb20db7
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-date-input.md
@@ -0,0 +1,92 @@
+# Form.DateInput
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a single date from the user (e.g. date of birth, appointment date, submission deadline).
+-   Any form field that requires calendar-based date selection.
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.DateInput className={styles.dateInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .dateInput {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class — `max-width` constrains the component without conflicting with its internal `width: 100%`.
+
+## Props
+
+| Prop                       | Type                                | Default         | Description                                                                      |
+| -------------------------- | ----------------------------------- | --------------- | -------------------------------------------------------------------------------- |
+| `value`                    | `string`                            | —               | Selected date in `YYYY-MM-DD` format                                             |
+| `disabled`                 | `boolean`                           | —               | Disables the component; entry not allowed                                        |
+| `readOnly`                 | `boolean`                           | —               | Read-only state; selection not allowed                                           |
+| `error`                    | `boolean`                           | —               | Sets error display (not needed if `errorMessage` is set)                         |
+| `id`                       | `string`                            | —               | Unique identifier of the component                                               |
+| `className`                | `string`                            | —               | Class selector of the component                                                  |
+| `data-testid`              | `string`                            | —               | Test identifier of the component                                                 |
+| `minDate`                  | `string`                            | —               | Minimum selectable date in `YYYY-MM-DD` format (inclusive)                       |
+| `maxDate`                  | `string`                            | —               | Maximum selectable date in `YYYY-MM-DD` format (inclusive)                       |
+| `disabledDates`            | `string[]`                          | —               | Specific dates to disable, each in `YYYY-MM-DD` format                           |
+| `allowDisabledSelection`   | `boolean`                           | —               | If true, dates disabled by `minDate`/`maxDate`/`disabledDates` remain selectable |
+| `hideInputKeyboard`        | `boolean`                           | —               | Hides the input keyboard when the field is focused                               |
+| `withButton`               | `boolean`                           | `true`          | Renders Done/Cancel action buttons                                               |
+| `zIndex`                   | `number`                            | `50`            | z-index of the calendar dropdown                                                 |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`            | `document.body` | Root element hosting the calendar dropdown                                       |
+| `onChange`                 | `(date: string) => void`            | —               | Called when a date is selected; returns `YYYY-MM-DD`                             |
+| `onBlur`                   | `() => void`                        | —               | Called on field defocus                                                          |
+| `onFocus`                  | `() => void`                        | —               | Called when field is focused                                                     |
+| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void` | —               | Called when the displayed month/year changes                                     |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                       |
+| ------- | -------- | --------------------------------- |
+| `year`  | `number` | Currently displayed year (`YYYY`) |
+| `month` | `number` | Currently displayed month (1–12)  |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## FormLabelProps
+
+| Prop       | Type                    | Default | Description                           |
+| ---------- | ----------------------- | ------- | ------------------------------------- |
+| `addon`    | `FormLabelAddonProps`   | —       | Tooltip or popover addon on the label |
+| `subtitle` | `string \| JSX.Element` | —       | Subtitle text for the label           |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `YYYY-MM-DD` string.
+-   Use `minDate`/`maxDate` to constrain selectable dates to valid business ranges.
+-   Use `disabledDates` for known blackout dates (e.g. public holidays).
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
+-   Use `readOnly` on review or summary screens where the value should be visible but not editable.
+-   Specify `dropdownRootNode` if the component is inside a scrollable container to prevent the calendar from clipping.
+-   Date strings use `YYYY-MM-DD` format throughout (value, minDate, maxDate, disabledDates, onChange return).
+
+## Anti-patterns
+
+-   Do not use a plain text input for date collection — the picker enforces valid date formats automatically.
+-   Do not set `allowDisabledSelection` unless there is a specific UX reason to allow out-of-range dates.
+-   Do not rely on `error` prop alone without an `errorMessage`; users need descriptive feedback.
+-   Do not use for date-range selection — use `Form.DateRangeInput` instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-date-range-input.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-date-range-input.md
new file mode 100644
index 0000000000..5fbb1eafce
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-date-range-input.md
@@ -0,0 +1,146 @@
+# Form.DateRangeInput
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a start and end date from the user (e.g. leave period, booking period, date range filter).
+-   Use `variant="week"` when the selection must always be a full calendar week.
+-   Use `variant="fixed-range"` when the duration is predetermined (e.g. always 7 days).
+
+## Usage
+
+`onChange` always receives both start and end as `YYYY-MM-DD` strings, even for week and fixed-range variants.
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const LeavePeriodField = () => {
+    const [start, setStart] = useState("");
+    const [end, setEnd] = useState("");
+
+    return (
+        <Form.DateRangeInput
+            label="Leave period"
+            value={start}
+            valueEnd={end}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            onChange={(s, e) => {
+                setStart(s);
+                setEnd(e);
+            }}
+        />
+    );
+};
+```
+
+```tsx
+{
+    /* variant="week" — whole-week selection */
+}
+<Form.DateRangeInput
+    label="Select week"
+    variant="week"
+    value={start}
+    valueEnd={end}
+    onChange={(s, e) => {
+        setStart(s);
+        setEnd(e);
+    }}
+/>;
+
+{
+    /* variant="fixed-range" — valueEnd derived automatically; only store start */
+}
+<Form.DateRangeInput
+    label="14-day quarantine period"
+    variant="fixed-range"
+    numberOfDays={14}
+    value={start}
+    valueEnd={end}
+    onChange={(s, e) => {
+        setStart(s);
+        setEnd(e);
+    }}
+/>;
+```
+
+Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class:
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.DateRangeInput className={styles.dateRangeInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .dateRangeInput {
+    max-width: 24rem;
+}
+```
+
+## Props
+
+| Prop                       | Type                                           | Default         | Description                                                                      |
+| -------------------------- | ---------------------------------------------- | --------------- | -------------------------------------------------------------------------------- |
+| `value`                    | `string`                                       | —               | Start date in `YYYY-MM-DD` format                                                |
+| `valueEnd`                 | `string`                                       | —               | End date in `YYYY-MM-DD` format (range/fixed-range only)                         |
+| `variant`                  | `"range" \| "week" \| "fixed-range"`           | `"range"`       | Selection type                                                                   |
+| `numberOfDays`             | `number`                                       | `7`             | Days to select when `variant="fixed-range"`                                      |
+| `disabled`                 | `boolean`                                      | —               | Disables the component; entry not allowed                                        |
+| `readOnly`                 | `boolean`                                      | —               | Read-only state; selection not allowed                                           |
+| `error`                    | `boolean`                                      | —               | Sets error display (not needed if `errorMessage` is set)                         |
+| `id`                       | `string`                                       | —               | Unique identifier of the component                                               |
+| `className`                | `string`                                       | —               | Class selector of the component                                                  |
+| `data-testid`              | `string`                                       | —               | Test identifier of the component                                                 |
+| `minDate`                  | `string`                                       | —               | Minimum selectable date in `YYYY-MM-DD` format (inclusive)                       |
+| `maxDate`                  | `string`                                       | —               | Maximum selectable date in `YYYY-MM-DD` format (inclusive)                       |
+| `disabledDates`            | `string[]`                                     | —               | Specific dates to disable, each in `YYYY-MM-DD` format                           |
+| `allowDisabledSelection`   | `boolean`                                      | —               | If true, dates disabled by `minDate`/`maxDate`/`disabledDates` remain selectable |
+| `hideInputKeyboard`        | `boolean`                                      | —               | Hides the input keyboard when the field is focused                               |
+| `withButton`               | `boolean`                                      | `true`          | Renders Done/Cancel action buttons                                               |
+| `zIndex`                   | `number`                                       | `50`            | z-index of the calendar dropdown                                                 |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                       | `document.body` | Root element hosting the calendar dropdown                                       |
+| `onChange`                 | `(startDate: string, endDate: string) => void` | —               | Called when a selection is made; returns start and end dates in `YYYY-MM-DD`     |
+| `onBlur`                   | `() => void`                                   | —               | Called on field defocus                                                          |
+| `onFocus`                  | `() => void`                                   | —               | Called when field is focused                                                     |
+| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void`            | —               | Called when displayed month/year changes                                         |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                       |
+| ------- | -------- | --------------------------------- |
+| `year`  | `number` | Currently displayed year (`YYYY`) |
+| `month` | `number` | Currently displayed month (1–12)  |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` (start) and `valueEnd` (end) for controlled usage; `onChange` receives both as `YYYY-MM-DD` strings.
+-   Use `minDate`/`maxDate` to restrict selection to valid business date ranges.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
+-   Use `readOnly` on review screens where the range should be visible but not editable.
+-   Specify `dropdownRootNode` if the component is inside a scrollable container.
+-   `valueEnd` is only relevant for `variant="range"` and `variant="fixed-range"`.
+-   `numberOfDays` only applies when `variant="fixed-range"`.
+
+## Anti-patterns
+
+-   Do not use for single-date selection — use `Form.DateInput` instead.
+-   Do not set `numberOfDays` unless `variant="fixed-range"` is also set.
+-   Do not rely on `error` alone without an `errorMessage`.
+-   Do not allow end date before start date — validate in `onChange` before updating state.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-e-signature.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-e-signature.md
new file mode 100644
index 0000000000..436e42c585
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-e-signature.md
@@ -0,0 +1,46 @@
+# Form.ESignature
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Forms that legally require a handwritten signature from the user (e.g. consent forms, declarations, agreements).
+-   Use `description` to guide the user on how to sign (e.g. "Sign within the box using your mouse or touchscreen").
+
+## Props
+
+| Prop              | Type                              | Default          | Description                                                                            |
+| ----------------- | --------------------------------- | ---------------- | -------------------------------------------------------------------------------------- |
+| `value`           | `string`                          | —                | Pre-filled signature as a base64-encoded PNG data URL                                  |
+| `description`     | `string`                          | —                | Helper text displayed below the signature canvas                                       |
+| `disabled`        | `boolean`                         | —                | Disables the signature canvas                                                          |
+| `loadingProgress` | `number`                          | —                | Upload progress between 0 and 1; shows a progress indicator                            |
+| `loadingLabel`    | `string`                          | `"Uploading..."` | Text above the progress indicator (requires `loadingProgress`)                         |
+| `id`              | `string`                          | —                | Unique identifier of the component                                                     |
+| `className`       | `string`                          | —                | Class selector of the component                                                        |
+| `data-testid`     | `string`                          | —                | Test identifier of the component                                                       |
+| `onChange`        | `(value: string \| null) => void` | —                | Called when the signature changes; returns base64 PNG data URL, or `null` when cleared |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; the value is a base64-encoded PNG string.
+-   Use `loadingProgress` and `loadingLabel` to indicate server upload progress after the signature is submitted.
+-   Set `errorMessage` when signature validation fails (e.g. canvas is empty on submit).
+-   Use `disabled` when the signature field should be locked (e.g. after submission or in a locked step).
+-   `value` and the `onChange` return value are both base64-encoded PNG strings.
+-   `loadingProgress` and `loadingLabel` are used to show upload progress after the signature is captured.
+
+## Anti-patterns
+
+-   Do not use for typed signatures or checkbox confirmations — this component is for handwritten drawing input only.
+-   Do not store the raw base64 string in a URL parameter or cookie — it is large; use server-side storage.
+-   Do not omit `description` — users need guidance on where and how to draw their signature.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-input.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-input.md
new file mode 100644
index 0000000000..4a1eaedb9e
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-input.md
@@ -0,0 +1,88 @@
+# Form.Input
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use for any single-line text entry inside a form. Always prefer `Form.Input` over the bare `Input` component when a label or error message is required.
+
+## Variants
+
+| `styleType`            | When to use                                                                                 |
+| ---------------------- | ------------------------------------------------------------------------------------------- |
+| `"bordered"` (default) | Standard form fields — provides clear affordance                                            |
+| `"no-border"`          | Inline editing or contexts where a surrounding container already provides visual separation |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+<Form.Input
+    label="Full name"
+    placeholder="Enter your name"
+    value={value}
+    onChange={(e) => {}}
+/>;
+```
+
+## Props
+
+### Input specific props
+
+| Prop          | Type                          | Default      | Description                                                         |
+| ------------- | ----------------------------- | ------------ | ------------------------------------------------------------------- |
+| `spacing`     | `number`                      | —            | Number of characters before a space is inserted — `type="tel"` only |
+| `error`       | `boolean`                     | —            | Show error styling — not needed if `errorMessage` is set            |
+| `allowClear`  | `boolean`                     | `false`      | Show clear icon button inside the field                             |
+| `onClear`     | `() => void`                  | —            | Called when clear icon is clicked                                   |
+| `styleType`   | `"no-border"` \| `"bordered"` | `"bordered"` | Border style variant                                                |
+| `data-testid` | `string`                      | —            | Test identifier for the component                                   |
+
+Also inherits all props from `HTMLInputElement`.
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+### FormLabelProps
+
+| Prop       | Type                      | Default | Description                              |
+| ---------- | ------------------------- | ------- | ---------------------------------------- |
+| `addon`    | `FormLabelAddonProps`     | —       | Tooltip or popover attached to the label |
+| `disabled` | `string`                  | —       | Greyed-out label state                   |
+| `subtitle` | `string` \| `JSX.Element` | —       | Secondary text beneath the main label    |
+
+### FormLabelAddonProps
+
+| Prop          | Type                       | Default               | Description                                               |
+| ------------- | -------------------------- | --------------------- | --------------------------------------------------------- |
+| `content`     | `string` \| `JSX.Element`  | —                     | **Required.** Content shown in the tooltip/popover bubble |
+| `type`        | `"tooltip"` \| `"popover"` | `"popover"`           | Addon display type                                        |
+| `icon`        | `JSX.Element`              | `<ICircleFillIcon />` | Icon used for the addon trigger                           |
+| `id`          | `string`                   | —                     | Unique identifier for the addon                           |
+| `zIndex`      | `number`                   | —                     | Custom z-index for the popover                            |
+| `data-testid` | `string`                   | —                     | Test identifier for the addon                             |
+
+## Rules
+
+-   Set `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
+-   Use `readOnly` on review or summary screens — not `disabled`. Disabled implies interaction is unavailable; read-only implies the field is intentionally non-editable in context.
+-   Use `allowClear` for optional fields and search-like inputs; pair with `onClear` to reset controlled value.
+-   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
+-   Provide `errorMessage` rather than `error` alone — the string drives both the visual state and the accessible error text.
+-   Use `label` as a plain string for simple labels; use `FormLabelProps` (with `subtitle` or `addon`) only when additional context is needed.
+-   `error` is redundant when `errorMessage` is provided — `errorMessage` implies the error state automatically.
+-   `spacing` only has effect when `type="tel"`.
+-   `styleType="no-border"` removes the visible border — use only in contexts with a background that provides visual separation.
+
+## Anti-patterns
+
+-   Do not use `disabled` on review screens — use `readOnly`.
+-   Do not set both `error` and `errorMessage` — `errorMessage` is sufficient.
+-   Do not use `spacing` with input types other than `"tel"`.
+-   Do not use `styleType="no-border"` in a form context without a containing element that visually distinguishes the field.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-masked-input.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-masked-input.md
new file mode 100644
index 0000000000..4f863977e3
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-masked-input.md
@@ -0,0 +1,55 @@
+# Form.MaskedInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Displaying sensitive data that should be partially hidden by default with a user-controlled reveal toggle (e.g. NRIC, FIN, passport number, bank account number).
+-   Read-only fields that are loaded asynchronously and should show a loading / error state.
+
+## Props
+
+Inherits all props from `Form.Input`. Additional props:
+
+| Prop                | Type                               | Default            | Description                                                                                    |
+| ------------------- | ---------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------- |
+| `maskRange`         | `number[]`                         | —                  | `[startIndex, endIndex]` — character index range to mask                                       |
+| `unmaskRange`       | `number[]`                         | —                  | `[startIndex, endIndex]` — character index range to NOT mask                                   |
+| `maskRegex`         | `RegExp`                           | —                  | Regex matched characters are replaced with `maskChar`                                          |
+| `maskTransformer`   | `(value: string) => string`        | —                  | Custom function to transform the masked value                                                  |
+| `maskChar`          | `string`                           | `"•"`              | Character used for masking                                                                     |
+| `iconMask`          | `string`                           | `<EyeSlashIcon />` | Icon shown when the field is masked                                                            |
+| `iconUnmask`        | `string`                           | `<EyeIcon />`      | Icon shown when the field is unmasked                                                          |
+| `iconActiveColor`   | `string`                           | `Color.Primary`    | Color of the mask icon in active state                                                         |
+| `iconInactiveColor` | `string`                           | `Color.Neutral[3]` | Color of the mask icon in inactive state                                                       |
+| `transformInput`    | `"uppercase" \| "lowercase"`       | —                  | Auto-transforms input casing                                                                   |
+| `loadState`         | `"loading" \| "fail" \| "success"` | —                  | Async load state — only applies in `readOnly` mode                                             |
+| `onMask`            | `() => void`                       | —                  | Called when the field becomes masked                                                           |
+| `onUnmask`          | `() => void`                       | —                  | Called when the field becomes unmasked                                                         |
+| `onTryAgain`        | `() => void`                       | —                  | Called when the "Try again" button is clicked in `loadState="fail"` mode (requires `readOnly`) |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Choose one masking strategy per instance: `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer`.
+-   Use `maskRange` for fixed-position sensitive segments (e.g. `[1, 4]` for NRIC middle characters).
+-   Use `maskRegex` when the characters to mask follow a pattern rather than a fixed range.
+-   Use `transformInput="uppercase"` for identifiers that are conventionally uppercase (e.g. NRIC, passport).
+-   Use `loadState` only when `readOnly` is also `true` — for fields that are fetched asynchronously.
+-   Provide `onTryAgain` when `loadState="fail"` so users can retry the fetch.
+-   `loadState` only takes effect when `readOnly` is also `true`.
+-   Provide only one of `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer` per instance.
+
+## Anti-patterns
+
+-   Do not use for non-sensitive fields — masking adds friction and should be reserved for data that genuinely requires it.
+-   Do not set `loadState` without `readOnly` — it has no effect in editable mode.
+-   Do not combine multiple masking strategies (`maskRange` + `maskRegex`) on the same instance.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-multi-select.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-multi-select.md
new file mode 100644
index 0000000000..d8cfb1d42f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-multi-select.md
@@ -0,0 +1,112 @@
+# Form.MultiSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users can select more than one option from a predefined list. For single selections use `Form.Select`. For hierarchical options use `Form.NestedMultiSelect`.
+
+## Variants
+
+| `variant`   | When to use                                              |
+| ----------- | -------------------------------------------------------- |
+| `"default"` | Standard form context                                    |
+| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+const options = [
+    { value: "doc", label: "Document" },
+    { value: "img", label: "Image" },
+    { value: "pdf", label: "PDF" },
+];
+
+<Form.MultiSelect
+    label="File types"
+    options={options}
+    selectedOptions={selected}
+    valueExtractor={(opt) => opt.value}
+    listExtractor={(opt) => opt.label}
+    displayValueExtractor={(opt) => opt.label}
+    onSelectOptions={(opts) => {}}
+/>;
+```
+
+## Props
+
+### MultiSelect specific props
+
+| Prop                    | Type                                     | Default         | Description                                                              |
+| ----------------------- | ---------------------------------------- | --------------- | ------------------------------------------------------------------------ |
+| `options`               | `T[]`                                    | —               | **Required.** List of option objects                                     |
+| `selectedOptions`       | `T[]`                                    | —               | Controlled array of selected options                                     |
+| `valueExtractor`        | `(option: T) => V`                       | —               | Derives the value from an option                                         |
+| `listExtractor`         | `(option: T) => string`                  | —               | Derives the display text for dropdown list items                         |
+| `displayValueExtractor` | `(option: T) => string`                  | —               | Derives the display text shown in the selector when options are selected |
+| `name`                  | `string`                                 | —               | Name attribute of the component                                          |
+| `placeholder`           | `string`                                 | `"Select"`      | Placeholder text                                                         |
+| `disabled`              | `boolean`                                | —               | Disables selection                                                       |
+| `error`                 | `boolean`                                | —               | Show error styling — not needed if `errorMessage` is set                 |
+| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"` | `"success"`     | Visual state for async option loading                                    |
+| `optionTruncationType`  | `"end"` \| `"middle"`                    | `"end"`         | Truncation style for long option text                                    |
+| `enableSearch`          | `boolean`                                | `false`         | Enable text-based search in the dropdown                                 |
+| `searchFunction`        | `(searchValue: string) => T[]`           | —               | Custom search function                                                   |
+| `maxSelectable`         | `number`                                 | —               | Maximum number of options that can be selected                           |
+| `onSelectOptions`       | `(options: T[]) => void`                 | —               | Called when selection changes, or Select all / Unselect all is clicked   |
+| `onShowOptions`         | `() => void`                             | —               | Called when the dropdown opens                                           |
+| `onHideOptions`         | `() => void`                             | —               | Called when the dropdown closes                                          |
+| `onRetry`               | `() => void`                             | —               | Called when retry is clicked after a failed load                         |
+| `onSearch`              | `() => void`                             | —               | Called when a search is executed                                         |
+| `hideNoResultsDisplay`  | `boolean`                                | —               | Suppress the default no-results UI                                       |
+| `customLabels`          | `DropdownCustomLabelProps`               | —               | Override default dropdown label strings                                  |
+| `variant`               | `"default"` \| `"small"`                 | `"default"`     | Size variant                                                             |
+| `alignment`             | `"left"` \| `"right"`                    | `"left"`        | Dropdown alignment relative to the trigger                               |
+| `dropdownZIndex`        | `number`                                 | `50`            | Custom z-index for the dropdown                                          |
+| `dropdownWidth`         | `string`                                 | —               | Fixed width for the dropdown                                             |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                 | `document.body` | Root element that hosts the dropdown                                     |
+| `data-testid`           | `string`                                 | —               | Test identifier for the component                                        |
+
+### DropdownCustomLabelProps
+
+| Prop                   | Type                    | Description                                                        |
+| ---------------------- | ----------------------- | ------------------------------------------------------------------ |
+| `searchPlaceholder`    | `string`                | Placeholder for the search field                                   |
+| `noResultsLabel`       | `string`                | Replaces the default no-results label                              |
+| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label                      |
+| `selectAllButtonLabel` | `string`                | Label for the Select all button                                    |
+| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                                     |
+| `allSelectedLabel`     | `string`                | Label shown when all options are selected                          |
+| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected (e.g. "X selected") |
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
+
+## Rules
+
+-   Always provide `options` — the component has no meaning without it.
+-   Provide `valueExtractor` and `listExtractor` for typed option arrays — treat as required.
+-   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing raw values instead of labels in the closed selector.
+-   Use `maxSelectable` when there is a business rule limiting how many options can be chosen; the component enforces it automatically.
+-   Use `enableSearch` when the list exceeds ~10 items.
+-   Provide `customLabels` to localise or contextualise "Select all", "Clear all", and count labels.
+-   Use `optionsLoadState` to communicate async loading states.
+-   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
+-   `onSelectOptions` receives the complete updated selection array — not a delta.
+-   Unlike `Form.Select`, there is no `readOnly` prop — use `disabled` for non-editable states.
+
+## Anti-patterns
+
+-   Do not use `Form.MultiSelect` when only one option can be selected — use `Form.Select`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
+-   Do not set both `error` and `errorMessage`.
+-   Do not manage selection capping manually in `onSelectOptions` — use `maxSelectable` instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-nested-multi-select.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-nested-multi-select.md
new file mode 100644
index 0000000000..7c83b83154
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-nested-multi-select.md
@@ -0,0 +1,173 @@
+# Form.NestedMultiSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users can select multiple options from a hierarchically organised list of up to 3 levels. For hierarchical single-select use `Form.NestedSelect`. For flat multi-select use `Form.MultiSelect`.
+
+## Variants
+
+| `variant`   | When to use           |
+| ----------- | --------------------- |
+| `"default"` | Standard form context |
+| `"small"`   | Compact layouts       |
+
+| `mode`       | When to use                                                                              |
+| ------------ | ---------------------------------------------------------------------------------------- |
+| `"default"`  | System decides initial expand state                                                      |
+| `"expand"`   | Expand all categories on open — for short, browsable lists                               |
+| `"collapse"` | Collapse all categories on open — for long lists where search is the primary interaction |
+
+## Usage
+
+### Multi-select with parallel keyPaths / values arrays
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
+
+interface SkillValue {
+    id: string;
+    name: string;
+}
+
+const options: L1OptionProps<SkillValue, SkillValue, SkillValue>[] = [
+    {
+        key: "design",
+        label: "Design",
+        subItems: [
+            {
+                key: "design-ux",
+                label: "UX Design",
+                value: { id: "ux", name: "UX Design" },
+            },
+            {
+                key: "design-ui",
+                label: "UI Design",
+                value: { id: "ui", name: "UI Design" },
+            },
+        ],
+    },
+    {
+        key: "engineering",
+        label: "Engineering",
+        subItems: [
+            {
+                key: "eng-fe",
+                label: "Frontend",
+                value: { id: "fe", name: "Frontend" },
+            },
+            {
+                key: "eng-be",
+                label: "Backend",
+                value: { id: "be", name: "Backend" },
+            },
+        ],
+    },
+];
+
+const NestedMultiSelectExample = () => {
+    // keyPaths[i] and values[i] always refer to the same selection — keep them in sync
+    const [keyPaths, setKeyPaths] = useState<string[][]>([
+        ["design", "design-ux"], // pre-selected: UX Design
+    ]);
+    const [values, setValues] = useState<SkillValue[]>([
+        { id: "ux", name: "UX Design" },
+    ]);
+
+    return (
+        <Form.NestedMultiSelect<SkillValue, SkillValue, SkillValue>
+            label="Skills"
+            options={options}
+            selectedKeyPaths={keyPaths}
+            // onSelectOptions provides the NEXT full selection state — replace, don't merge
+            onSelectOptions={(nextKeyPaths, nextValues) => {
+                setKeyPaths(nextKeyPaths);
+                setValues(nextValues as SkillValue[]);
+            }}
+            valueToStringFunction={(val) => val.name}
+            enableSearch
+        />
+    );
+};
+```
+
+**The parallel-array contract:** index `i` in `keyPaths` and index `i` in `values` always describe the same selected item. `onSelectOptions` delivers the complete next state — replace both arrays together, never splice one independently. Initialise both arrays with matching entries when pre-populating selections.
+
+## Props
+
+### NestedMultiSelect specific props
+
+| Prop                    | Type                                                            | Default         | Description                                                                                                            |
+| ----------------------- | --------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `options`               | `L1OptionProps<V1, V2, V3>[]`                                   | —               | **Required.** Nested option array (up to 3 levels)                                                                     |
+| `selectedKeyPaths`      | `string[][]`                                                    | —               | Array of key paths for all selected options                                                                            |
+| `placeholder`           | `string`                                                        | `"Select"`      | Placeholder text                                                                                                       |
+| `disabled`              | `boolean`                                                       | —               | Disables selection                                                                                                     |
+| `readOnly`              | `boolean`                                                       | —               | Read-only state — selection not allowed                                                                                |
+| `error`                 | `boolean`                                                       | —               | Show error styling — not needed if `errorMessage` is set                                                               |
+| `mode`                  | `"default"` \| `"expand"` \| `"collapse"`                       | `"default"`     | Initial expand/collapse state of categories when the dropdown opens                                                    |
+| `valueToStringFunction` | `(value: V1 \| V2 \| V3) => string`                             | —               | Converts values to display strings. Single function used for all levels — assumes values are homogeneous across levels |
+| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"`                        | `"success"`     | Visual state for async option loading                                                                                  |
+| `optionTruncationType`  | `"end"` \| `"middle"`                                           | `"end"`         | Truncation style for long option text                                                                                  |
+| `enableSearch`          | `boolean`                                                       | `false`         | Enable text-based search in the dropdown                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                       | `false`         | Suppress the default no-results UI                                                                                     |
+| `customLabels`          | `DropdownCustomLabelProps`                                      | —               | Override default dropdown label strings                                                                                |
+| `onSelectOptions`       | `(keyPaths: string[][], values: Array<V1 \| V2 \| V3>) => void` | —               | Called when selections change                                                                                          |
+| `onShowOptions`         | `() => void`                                                    | —               | Called when the dropdown opens                                                                                         |
+| `onHideOptions`         | `() => void`                                                    | —               | Called when the dropdown closes                                                                                        |
+| `onRetry`               | `() => void`                                                    | —               | Called when retry is clicked after a failed load                                                                       |
+| `onSearch`              | `() => void`                                                    | —               | Called when a search is executed                                                                                       |
+| `onBlur`                | `() => void`                                                    | —               | Called when the field loses focus                                                                                      |
+| `variant`               | `"default"` \| `"small"`                                        | `"default"`     | Size variant                                                                                                           |
+| `alignment`             | `"left"` \| `"right"`                                           | `"left"`        | Dropdown alignment relative to the trigger                                                                             |
+| `dropdownZIndex`        | `number`                                                        | `50`            | Custom z-index for the dropdown                                                                                        |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                        | `document.body` | Root element that hosts the dropdown                                                                                   |
+| `dropdownWidth`         | `string`                                                        | —               | Fixed width for the dropdown                                                                                           |
+| `className`             | `string`                                                        | —               | Class selector for the component                                                                                       |
+| `data-testid`           | `string`                                                        | —               | Test identifier for the component                                                                                      |
+
+### DropdownCustomLabelProps
+
+| Prop                   | Type                    | Description                                    |
+| ---------------------- | ----------------------- | ---------------------------------------------- |
+| `searchPlaceholder`    | `string`                | Placeholder for the search field               |
+| `noResultsLabel`       | `string`                | Replaces the default no-results label          |
+| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label  |
+| `selectAllButtonLabel` | `string`                | Label for the Select all button                |
+| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                 |
+| `allSelectedLabel`     | `string`                | Label shown when all options are selected      |
+| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected |
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
+
+## Rules
+
+-   Every option node must have a unique `key` string — key paths are used for controlled state.
+-   Provide `valueToStringFunction` when values are not plain strings. The same function is applied to values at all nesting levels — ensure values are homogeneous across levels, or that the function handles all types.
+-   Use `enableSearch` when the total option count across all levels is large.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Provide `customLabels` to localise "Select all", "Clear all", and count labels.
+-   `options` is the only mandatory component-specific prop.
+-   Options follow the same nested structure as `Form.NestedSelect`: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
+-   `selectedKeyPaths` is an array of key-path arrays — one per selected item.
+-   `onSelectOptions` receives the complete updated `keyPaths` and `values` arrays on every change.
+-   `valueToStringFunction` uses a single callback for all nesting levels — values across levels must be the same type or handled uniformly.
+
+## Anti-patterns
+
+-   Do not use `Form.NestedMultiSelect` for flat option lists — use `Form.MultiSelect`.
+-   Do not use when only one option can be selected — use `Form.NestedSelect`.
+-   Do not use duplicate `key` values across options — selection state will break.
+-   Do not set both `error` and `errorMessage`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-nested-select.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-nested-select.md
new file mode 100644
index 0000000000..e36a12a655
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-nested-select.md
@@ -0,0 +1,165 @@
+# Form.NestedSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when options are organised in a hierarchy of up to 3 levels — e.g. industry → sector → role, or country → state → city. For flat single-select use `Form.Select`. For hierarchical multi-select use `Form.NestedMultiSelect`.
+
+## Variants
+
+| `variant`   | When to use           |
+| ----------- | --------------------- |
+| `"default"` | Standard form context |
+| `"small"`   | Compact layouts       |
+
+| `mode`       | When to use                                                                            |
+| ------------ | -------------------------------------------------------------------------------------- |
+| `"default"`  | System decides initial expand state based on selected path                             |
+| `"expand"`   | Expand all categories on open — useful when the list is short and browsing is expected |
+| `"collapse"` | Collapse all categories on open — useful for long lists where search is primary        |
+
+## Usage
+
+### Three-level hierarchy with controlled keyPath
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
+
+interface RoleValue {
+    id: string;
+    label: string;
+}
+
+const options: L1OptionProps<RoleValue, RoleValue, RoleValue>[] = [
+    {
+        key: "engineering",
+        label: "Engineering",
+        subItems: [
+            {
+                key: "engineering-frontend",
+                label: "Frontend",
+                subItems: [
+                    {
+                        key: "engineering-frontend-react",
+                        label: "React Developer",
+                        value: { id: "fe-react", label: "React Developer" },
+                    },
+                    {
+                        key: "engineering-frontend-vue",
+                        label: "Vue Developer",
+                        value: { id: "fe-vue", label: "Vue Developer" },
+                    },
+                ],
+            },
+            {
+                key: "engineering-backend",
+                label: "Backend",
+                value: { id: "be", label: "Backend Developer" },
+            },
+        ],
+    },
+];
+
+const NestedSelectExample = () => {
+    // keyPath is the path of keys from root to selected node
+    const [keyPath, setKeyPath] = useState<string[]>([]);
+    const [value, setValue] = useState<RoleValue | undefined>();
+
+    return (
+        <Form.NestedSelect<RoleValue, RoleValue, RoleValue>
+            label="Job role"
+            options={options}
+            selectedKeyPath={keyPath}
+            // onChange receives the full key path and the node's value
+            onChange={(path, val) => {
+                setKeyPath(path);
+                setValue(val);
+            }}
+            valueToStringFunction={(val) => val.label}
+            selectableCategory // intermediate nodes (e.g. "Backend") are also selectable
+            enableSearch
+        />
+    );
+};
+```
+
+**keyPath explains the selection:** `["engineering", "engineering-frontend", "engineering-frontend-react"]` means the user drilled through Engineering → Frontend → React Developer. An empty array means nothing is selected.
+
+## Props
+
+### NestedSelect specific props
+
+| Prop                    | Type                                                 | Default         | Description                                                         |
+| ----------------------- | ---------------------------------------------------- | --------------- | ------------------------------------------------------------------- |
+| `options`               | `L1OptionProps<V1, V2, V3>[]`                        | —               | **Required.** Nested option array (up to 3 levels)                  |
+| `selectedKeyPath`       | `string[]`                                           | —               | Key path of the selected option (e.g. `["1", "1-2"]`)               |
+| `placeholder`           | `string`                                             | `"Select"`      | Placeholder text                                                    |
+| `disabled`              | `boolean`                                            | —               | Disables selection                                                  |
+| `readOnly`              | `boolean`                                            | —               | Read-only state — selection not allowed                             |
+| `error`                 | `boolean`                                            | —               | Show error styling — not needed if `errorMessage` is set            |
+| `mode`                  | `"default"` \| `"expand"` \| `"collapse"`            | `"default"`     | Initial expand/collapse state of categories when the dropdown opens |
+| `valueToStringFunction` | `(value: V1 \| V2 \| V3) => string`                  | —               | Converts the selected value to a display string                     |
+| `selectableCategory`    | `boolean`                                            | —               | Allow selecting a parent category node directly                     |
+| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"`             | `"success"`     | Visual state for async option loading                               |
+| `optionTruncationType`  | `"end"` \| `"middle"`                                | `"end"`         | Truncation style for long option text                               |
+| `enableSearch`          | `boolean`                                            | —               | Enable text-based search in the dropdown                            |
+| `customLabels`          | `DropdownCustomLabelProps`                           | —               | Override default dropdown label strings                             |
+| `hideNoResultsDisplay`  | `boolean`                                            | —               | Suppress the default no-results UI                                  |
+| `onSelectOption`        | `(keyPath: string[], value: V1 \| V2 \| V3) => void` | —               | Called when an option is selected                                   |
+| `onShowOptions`         | `() => void`                                         | —               | Called when the dropdown opens                                      |
+| `onHideOptions`         | `() => void`                                         | —               | Called when the dropdown closes                                     |
+| `onRetry`               | `() => void`                                         | —               | Called when retry is clicked after a failed load                    |
+| `onSearch`              | `() => void`                                         | —               | Called when a search is executed                                    |
+| `onBlur`                | `() => void`                                         | —               | Called when the field loses focus                                   |
+| `variant`               | `"default"` \| `"small"`                             | `"default"`     | Size variant                                                        |
+| `alignment`             | `"left"` \| `"right"`                                | `"left"`        | Dropdown alignment relative to the trigger                          |
+| `dropdownZIndex`        | `number`                                             | `50`            | Custom z-index for the dropdown                                     |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                             | `document.body` | Root element that hosts the dropdown                                |
+| `dropdownWidth`         | `string`                                             | —               | Fixed width for the dropdown                                        |
+| `className`             | `string`                                             | —               | Class selector for the component                                    |
+| `data-testid`           | `string`                                             | —               | Test identifier for the component                                   |
+
+### DropdownCustomLabelProps
+
+| Prop                   | Type                    | Description                                    |
+| ---------------------- | ----------------------- | ---------------------------------------------- |
+| `searchPlaceholder`    | `string`                | Placeholder for the search field               |
+| `noResultsLabel`       | `string`                | Replaces the default no-results label          |
+| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label  |
+| `selectAllButtonLabel` | `string`                | Label for the Select all button                |
+| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                 |
+| `allSelectedLabel`     | `string`                | Label shown when all options are selected      |
+| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected |
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
+
+## Rules
+
+-   Every option node must have a unique `key` string — the key path is used for controlled state.
+-   Provide `valueToStringFunction` when values are not plain strings and the selected display needs to be derived from the value.
+-   Enable `selectableCategory` only when selecting a parent category is a valid business outcome — otherwise category nodes serve as navigational groupings only.
+-   Use `enableSearch` when the total option count across all levels is large.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
+-   `options` is the only mandatory component-specific prop.
+-   Options follow a nested structure: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
+-   `selectedKeyPath` is an array of keys tracing the path to the selected leaf (e.g. `["parent-key", "child-key"]`).
+-   `selectableCategory` enables selection of non-leaf (parent category) nodes.
+
+## Anti-patterns
+
+-   Do not use `Form.NestedSelect` for flat option lists — use `Form.Select`.
+-   Do not use when multiple selections are needed — use `Form.NestedMultiSelect`.
+-   Do not use duplicate `key` values across options — selection state will break.
+-   Do not set both `error` and `errorMessage`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-otp-verification.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-otp-verification.md
new file mode 100644
index 0000000000..6fd2e5f9c5
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-otp-verification.md
@@ -0,0 +1,164 @@
+# Form.OtpVerification
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Flows that require identity verification via a one-time password sent to a phone number or email address.
+-   The component manages the full multi-step UI: input contact → send OTP → enter OTP → verify.
+
+## Usage
+
+### Email variant
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
+
+const EmailOtpExample = () => {
+    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
+    const [email, setEmail] = useState("");
+
+    return (
+        <Form.OtpVerification
+            label="Verify your email"
+            type="email"
+            emailValue={email}
+            onEmailChange={setEmail}
+            otpState={otpState}
+            onOtpStateChange={setOtpState}
+            onSendOtp={async () => {
+                // Throw to surface the error inline — do NOT return an error string
+                const res = await api.sendEmailOtp(email);
+                if (!res.ok) throw new Error("Invalid email address");
+            }}
+            onVerifyOtp={async (otpInput) => {
+                const res = await api.verifyOtp(otpInput);
+                if (!res.ok)
+                    throw new Error("Incorrect OTP. Please try again.");
+            }}
+            onResendOtp={async () => {
+                const res = await api.sendEmailOtp(email);
+                if (!res.ok) throw new Error("Could not resend OTP");
+            }}
+            verifyOtpCountdownTimer={300}
+        />
+    );
+};
+```
+
+### Phone variant (`fixedCountry` required)
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
+import { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input";
+
+const PhoneOtpExample = () => {
+    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
+    const [phone, setPhone] = useState<PhoneNumberInputValue>({ number: "" });
+
+    return (
+        <Form.OtpVerification
+            label="Verify your mobile number"
+            type="phone-number"
+            phoneNumberValue={phone}
+            onPhoneNumberChange={setPhone}
+            fixedCountry // required when type="phone-number"; hides country selector
+            otpState={otpState}
+            onOtpStateChange={setOtpState}
+            onSendOtp={async () => {
+                const res = await api.sendSmsOtp(phone.number);
+                if (!res.ok) throw new Error("Invalid phone number");
+            }}
+            onVerifyOtp={async (otpInput) => {
+                const res = await api.verifyOtp(otpInput);
+                if (!res.ok)
+                    throw new Error("Incorrect OTP. Please try again.");
+            }}
+            onResendOtp={async () => {
+                const res = await api.sendSmsOtp(phone.number);
+                if (!res.ok) throw new Error("Could not resend OTP");
+            }}
+            verifyOtpCountdownTimer={180}
+        />
+    );
+};
+```
+
+**Key gotcha — callbacks must throw, not return error strings.**
+The component catches the thrown error and displays `error.message` inline.
+Returning a value (or nothing) always signals success and advances the state machine.
+
+## Props
+
+| Prop                      | Type                                                      | Default | Description                                                    |
+| ------------------------- | --------------------------------------------------------- | ------- | -------------------------------------------------------------- |
+| `type`                    | `"phone-number" \| "email"`                               | —       | Verification channel                                           |
+| `otpState`                | `"default" \| "sent" \| "verified"`                       | —       | Controlled state of the OTP flow                               |
+| `onOtpStateChange`        | `(otpState: OtpVerificationState) => void`                | —       | Called when the flow state changes                             |
+| `onSendOtp`               | `() => Promise<void>`                                     | —       | Called when the user requests an OTP; throw to show error      |
+| `onVerifyOtp`             | `(otp: string) => Promise<void>`                          | —       | Called when the user submits the OTP; throw to show error      |
+| `onResendOtp`             | `() => Promise<void>`                                     | —       | Called when the user requests a resend; throw to show error    |
+| `sendOtpError`            | `string`                                                  | —       | Error message shown if OTP send fails                          |
+| `sendOtpPlaceholder`      | `string`                                                  | —       | Placeholder for the contact input field                        |
+| `verifyOtpError`          | `string`                                                  | —       | Error message shown if OTP verification fails                  |
+| `verifyOtpTitle`          | `string`                                                  | —       | Title for the verify OTP section                               |
+| `verifyOtpMessage`        | `string`                                                  | —       | Description for the verify OTP section                         |
+| `verifyOtpCountdownTimer` | `number`                                                  | `60`    | Seconds before the resend button is re-enabled                 |
+| `otpReminderInterval`     | `number`                                                  | `120`   | Seconds between accessibility reminder announcements           |
+| `otpValue`                | `{ prefix?: string; separator?: string; value?: string }` | —       | Current OTP input value with optional display prefix/separator |
+| `onOtpChange`             | `(value: string) => void`                                 | —       | Called when the OTP input value changes                        |
+| `showVerifyOtpThumbnail`  | `boolean`                                                 | `false` | Shows a thumbnail in the verify OTP section                    |
+| `verifyOtpIcon`           | `React.ReactNode`                                         | —       | Custom icon for the verify OTP section                         |
+| `id`                      | `string`                                                  | —       | Unique identifier of the component                             |
+| `className`               | `string`                                                  | —       | Class selector of the component                                |
+| `data-testid`             | `string`                                                  | —       | Test identifier of the component                               |
+
+## Phone-number-specific props
+
+| Prop                  | Type                                     | Description                                            |
+| --------------------- | ---------------------------------------- | ------------------------------------------------------ |
+| `phoneNumberValue`    | `PhoneNumberInputValue`                  | Controlled phone number value                          |
+| `onPhoneNumberChange` | `(value: PhoneNumberInputValue) => void` | Called when phone input changes                        |
+| `fixedCountry`        | `true`                                   | Locks the country code; required for phone-number type |
+
+## Email-specific props
+
+| Prop            | Type                      | Description                     |
+| --------------- | ------------------------- | ------------------------------- |
+| `emailValue`    | `string`                  | Controlled email value          |
+| `onEmailChange` | `(value: string) => void` | Called when email input changes |
+
+## PhoneNumberInputValue
+
+| Prop          | Type     | Description                 |
+| ------------- | -------- | --------------------------- |
+| `number`      | `string` | Phone number                |
+| `countryCode` | `string` | Country code (e.g. `"+65"`) |
+
+## Form-specific props
+
+| Prop    | Type                       | Description |
+| ------- | -------------------------- | ----------- |
+| `label` | `string \| FormLabelProps` | Field label |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Control `otpState` externally and update it via `onOtpStateChange` — the component does not manage its own state.
+-   `onSendOtp`, `onVerifyOtp`, and `onResendOtp` must be async functions; throw an error inside them to trigger the corresponding error display (`sendOtpError`, `verifyOtpError`).
+-   Always pass `fixedCountry` when `type="phone-number"` — the prop is required to lock the country selector.
+-   Set `verifyOtpCountdownTimer` to match the actual OTP expiry window from your backend.
+-   Pass `sendOtpError` and `verifyOtpError` from server responses so users receive actionable feedback.
+-   `otpState` is externally controlled — the component does not manage its own flow state.
+-   `fixedCountry` is required when `type="phone-number"`.
+
+## Anti-patterns
+
+-   Do not try to manage the step sequence manually — use `otpState` and let `onOtpStateChange` drive transitions.
+-   Do not use for non-identity-verification scenarios — for simple code inputs, use a plain `Form.Input`.
+-   Do not omit `fixedCountry` for `type="phone-number"` — the country selector will be shown unexpectedly.
+-   Do not use synchronous functions for `onSendOtp`, `onVerifyOtp`, or `onResendOtp` — they must return Promises.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-phone-number-input.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-phone-number-input.md
new file mode 100644
index 0000000000..6772ccecc1
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-phone-number-input.md
@@ -0,0 +1,87 @@
+# Form.PhoneNumberInput
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+Type import: `import type { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input"`
+
+## When to use
+
+-   Collecting a phone number that requires a country code prefix.
+-   International forms where users may have numbers from different countries.
+-   Use `fixedCountry` when the service only accepts numbers from one country (e.g. Singapore-only services).
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.PhoneNumberInput className={styles.phoneNumberInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .phoneNumberInput {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
+
+## Props
+
+| Prop                      | Type                                     | Default    | Description                                                             |
+| ------------------------- | ---------------------------------------- | ---------- | ----------------------------------------------------------------------- |
+| `value`                   | `PhoneNumberInputValue`                  | —          | Controlled value containing country code and number                     |
+| `allowClear`              | `boolean`                                | —          | Shows a clear icon button inside the input                              |
+| `noBorder`                | `boolean`                                | `false`    | Removes the border wrapper                                              |
+| `disabled`                | `boolean`                                | —          | Disables the component; selection not allowed                           |
+| `readOnly`                | `boolean`                                | —          | Read-only state; input not allowed                                      |
+| `error`                   | `boolean`                                | —          | Sets error display (not needed if `errorMessage` is set)                |
+| `enableSearch`            | `boolean`                                | `false`    | Enables text search within the country code dropdown                    |
+| `fixedCountry`            | `boolean`                                | `false`    | Locks the country code; hides the dropdown selector                     |
+| `id`                      | `string`                                 | —          | Unique identifier of the component                                      |
+| `name`                    | `string`                                 | —          | Name attribute of the component                                         |
+| `className`               | `string`                                 | —          | Class selector of the component                                         |
+| `data-testid`             | `string`                                 | —          | Test identifier of the component                                        |
+| `optionPlaceholder`       | `string`                                 | —          | Placeholder for the country code dropdown                               |
+| `optionSearchPlaceholder` | `string`                                 | —          | Placeholder for the country code search field (requires `enableSearch`) |
+| `pattern`                 | `string`                                 | —          | Regex the input value should match                                      |
+| `placeholder`             | `string`                                 | `"Select"` | Placeholder for the number input                                        |
+| `autoComplete`            | `string`                                 | —          | `autocomplete` attribute for the input field                            |
+| `onChange`                | `(value: PhoneNumberInputValue) => void` | —          | Called on number input change or country code selection                 |
+| `onClear`                 | `() => void`                             | —          | Called when the clear icon is clicked                                   |
+| `onBlur`                  | `() => void`                             | —          | Called on defocus                                                       |
+| `onShowOptions`           | `() => void`                             | —          | Called when the country code dropdown expands                           |
+| `onHideOptions`           | `() => void`                             | —          | Called when the country code dropdown collapses                         |
+
+## PhoneNumberInputValue
+
+| Prop          | Type     | Description                                                                                                             |
+| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `number`      | `string` | The phone number                                                                                                        |
+| `countryCode` | `string` | The country code (e.g. `"+65"`). The `+` prefix is optional on input but always included in the `onChange` return value |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` returns `{ countryCode, number }`.
+-   Use `enableSearch` when the country list is long and users need to find their country quickly.
+-   Use `fixedCountry` together with a pre-set `value.countryCode` so the locked code is visible.
+-   Use `allowClear` when the field can be optionally cleared by the user.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+
+## Anti-patterns
+
+-   Do not use a plain text input for international phone numbers — formatting and country code handling must be consistent.
+-   Do not use without `fixedCountry` when only one country is supported — it creates unnecessary friction.
+-   Do not omit `value.countryCode` when `fixedCountry` is true — the locked code won't render without it.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-predictive-text-input.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-predictive-text-input.md
new file mode 100644
index 0000000000..2be04e574f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-predictive-text-input.md
@@ -0,0 +1,102 @@
+# Form.PredictiveTextInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   The option set is too large for a static dropdown and must be fetched dynamically (e.g. address lookup, postal code search, product search, large dataset autocomplete).
+-   Users need to type to narrow down results before selecting.
+
+## Usage
+
+### Location search — three extractors working together
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+interface Location {
+    id: string;
+    name: string;
+    address: string;
+}
+
+const LocationSearchExample = () => {
+    const [selected, setSelected] = useState<Location | undefined>();
+
+    const fetchOptions = async (input: string): Promise<Location[]> => {
+        const res = await api.searchLocations(input);
+        return res.results;
+    };
+
+    return (
+        <Form.PredictiveTextInput<Location, string>
+            label="Search location"
+            minimumCharacters={3} // fetch only after 3 chars typed
+            fetchOptions={fetchOptions}
+            // Populates the text field when an option is selected
+            valueExtractor={(item) => item.name}
+            // Populates each row in the dropdown list
+            listExtractor={(item) => `${item.name} — ${item.address}`}
+            // Displays the chosen value as a chip / confirmation label
+            displayValueExtractor={(item) => item.name}
+            selectedOption={selected}
+            onSelectOption={(item) => setSelected(item ?? undefined)}
+        />
+    );
+};
+```
+
+**How the three extractors divide responsibility:**
+
+| Extractor               | When it runs               | What it renders                  |
+| ----------------------- | -------------------------- | -------------------------------- |
+| `listExtractor`         | While the dropdown is open | Each option row in the list      |
+| `valueExtractor`        | After selection            | The text field value             |
+| `displayValueExtractor` | After selection            | The chip / confirmed-value label |
+
+Debounce `fetchOptions` internally (e.g. with `setTimeout` or a library) — the component calls it on every character change.
+
+## Props
+
+| Prop                    | Type                                          | Default           | Description                                                      |
+| ----------------------- | --------------------------------------------- | ----------------- | ---------------------------------------------------------------- |
+| `fetchOptions`          | `(input: string) => Promise<T[]>`             | —                 | **Required.** Async function called to populate dropdown options |
+| `selectedOption`        | `T`                                           | —                 | Controlled selected option object                                |
+| `valueExtractor`        | `(option: T) => V`                            | —                 | Extracts the stored value from an option                         |
+| `listExtractor`         | `(option: T) => string`                       | —                 | Extracts the display text shown in the dropdown list             |
+| `displayValueExtractor` | `(option: T) => string`                       | —                 | Extracts the display text shown in the input after selection     |
+| `onSelectOption`        | `(option: T, extractedValue: T \| V) => void` | —                 | Called when the user selects an option                           |
+| `minimumCharacters`     | `number`                                      | `3`               | Minimum characters typed before options are fetched              |
+| `placeholder`           | `string`                                      | `"Enter here..."` | Placeholder text of the input                                    |
+| `disabled`              | `boolean`                                     | —                 | Disables the component; selection not allowed                    |
+| `readOnly`              | `boolean`                                     | —                 | Read-only state; selection not allowed                           |
+| `error`                 | `boolean`                                     | —                 | Sets error display (not needed if `errorMessage` is set)         |
+| `className`             | `string`                                      | —                 | Class selector of the component                                  |
+| `data-testid`           | `string`                                      | —                 | Test identifier of the component                                 |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   `fetchOptions` is required — it must be async and return an array of option objects.
+-   Debounce inside `fetchOptions` to avoid flooding the API on every keystroke.
+-   Set `minimumCharacters` to a value that produces useful results — `3` is the default, but adjust for your data source.
+-   Always provide `valueExtractor`, `listExtractor`, and `displayValueExtractor` — omitting any of these produces inconsistent display behaviour.
+-   Use `selectedOption` and `onSelectOption` for controlled selection.
+-   Set `errorMessage` when the selected option fails validation.
+-   `fetchOptions` is called on every keystroke after `minimumCharacters` is reached — debounce inside the function if needed.
+-   Generic type `T` is the option object shape; `V` is the extracted value type.
+
+## Anti-patterns
+
+-   Do not use when the full option list is small and known upfront — use `Form.Select` or `Form.MultiSelect` instead.
+-   Do not use `fetchOptions` without debouncing — each keystroke fires a new call.
+-   Do not omit extractor functions — the component cannot determine what to display without them.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-select.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-select.md
new file mode 100644
index 0000000000..961b15c28a
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-select.md
@@ -0,0 +1,122 @@
+# Form.Select
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users must select exactly one option from a predefined list. For multiple selections use `Form.MultiSelect`. For hierarchical options use `Form.NestedSelect`.
+
+## Variants
+
+| `variant`   | When to use                                              |
+| ----------- | -------------------------------------------------------- |
+| `"default"` | Standard form context                                    |
+| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+const options = [
+    { value: "sg", label: "Singapore" },
+    { value: "my", label: "Malaysia" },
+];
+
+<Form.Select
+    label="Country"
+    options={options}
+    selectedOption={selected}
+    valueExtractor={(opt) => opt.value}
+    listExtractor={(opt) => opt.label}
+    displayValueExtractor={(opt) => opt.label}
+    onSelectOption={(opt) => {}}
+/>;
+```
+
+## Props
+
+### Select specific props
+
+| Prop                         | Type                                                     | Default         | Description                                                               |
+| ---------------------------- | -------------------------------------------------------- | --------------- | ------------------------------------------------------------------------- |
+| `options`                    | `T[]`                                                    | —               | **Required.** List of option objects                                      |
+| `selectedOption`             | `T`                                                      | —               | Controlled selected option                                                |
+| `valueExtractor`             | `(option: T) => V`                                       | —               | Derives the value from an option                                          |
+| `listExtractor`              | `(option: T) => string`                                  | —               | Derives the display text for dropdown list items                          |
+| `displayValueExtractor`      | `(option: T) => string`                                  | —               | Derives the display text shown in the selector when an option is selected |
+| `valueToStringFunction`      | `(value: V) => string`                                   | —               | Converts a value to a string                                              |
+| `name`                       | `string`                                                 | —               | Name attribute of the component                                           |
+| `placeholder`                | `string`                                                 | `"Select"`      | Placeholder text                                                          |
+| `disabled`                   | `boolean`                                                | —               | Disables selection                                                        |
+| `readOnly`                   | `boolean`                                                | —               | Read-only state — selection not allowed                                   |
+| `error`                      | `boolean`                                                | —               | Show error styling — not needed if `errorMessage` is set                  |
+| `optionsLoadState`           | `"success"` \| `"loading"` \| `"failed"`                 | `"success"`     | Visual state for async option loading                                     |
+| `optionTruncationType`       | `"end"` \| `"middle"`                                    | `"end"`         | Truncation style for long option text                                     |
+| `enableSearch`               | `boolean`                                                | `false`         | Enable text-based search in the dropdown                                  |
+| `searchFunction`             | `(searchValue: string) => T[]`                           | —               | Custom search function                                                    |
+| `renderListItem`             | `(item: T, args: ListItemRenderArgs) => JSX.Element`     | —               | Custom list item renderer                                                 |
+| `renderCustomSelectedOption` | `(option: T) => JSX.Element`                             | —               | Custom renderer for the selected option display in the selector           |
+| `onSelectOption`             | `(option: T, extractedValue: T \| V) => void`            | —               | Called when an option is selected                                         |
+| `onShowOptions`              | `() => void`                                             | —               | Called when the dropdown opens                                            |
+| `onHideOptions`              | `() => void`                                             | —               | Called when the dropdown closes                                           |
+| `onRetry`                    | `() => void`                                             | —               | Called when retry is clicked after a failed load                          |
+| `onSearch`                   | `() => void`                                             | —               | Called when a search is executed                                          |
+| `hideNoResultsDisplay`       | `boolean`                                                | —               | Suppress the default no-results UI                                        |
+| `customLabels`               | `DropdownCustomLabelProps`                               | —               | Override default dropdown label strings                                   |
+| `renderCustomCallToAction`   | `(hideOptions: () => void, options: T[]) => JSX.Element` | —               | Render a custom CTA at the bottom of the dropdown                         |
+| `variant`                    | `"default"` \| `"small"`                                 | `"default"`     | Size variant                                                              |
+| `alignment`                  | `"left"` \| `"right"`                                    | `"left"`        | Dropdown alignment relative to the trigger                                |
+| `dropdownZIndex`             | `number`                                                 | `50`            | Custom z-index for the dropdown                                           |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                 | `document.body` | Root element that hosts the dropdown                                      |
+| `dropdownWidth`              | `string`                                                 | —               | Fixed width for the dropdown (overrides matching the trigger width)       |
+| `data-testid`                | `string`                                                 | —               | Test identifier for the component                                         |
+
+### ListItemRenderArgs
+
+| Prop       | Type      | Description                                 |
+| ---------- | --------- | ------------------------------------------- |
+| `selected` | `boolean` | Whether the list item is currently selected |
+
+### DropdownCustomLabelProps
+
+| Prop                   | Type                    | Description                                                        |
+| ---------------------- | ----------------------- | ------------------------------------------------------------------ |
+| `searchPlaceholder`    | `string`                | Placeholder for the search field                                   |
+| `noResultsLabel`       | `string`                | Replaces the default no-results label                              |
+| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label                      |
+| `selectAllButtonLabel` | `string`                | Label for the Select all button                                    |
+| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                                     |
+| `allSelectedLabel`     | `string`                | Label shown when all options are selected                          |
+| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected (e.g. "X selected") |
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
+
+## Rules
+
+-   Always provide `options` — the component has no meaning without it.
+-   Provide `valueExtractor` and `listExtractor` when the option objects are not plain strings — these are effectively required for typed option arrays.
+-   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing the raw value (e.g. "sg") in the closed selector instead of the label (e.g. "Singapore").
+-   Use `optionsLoadState` to communicate async loading states — set to `"loading"` while fetching, `"failed"` on error (triggers retry UI).
+-   Use `enableSearch` when the list exceeds ~10 items.
+-   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
+-   Use `dropdownWidth` when the dropdown must be wider than the trigger (e.g. long option text).
+-   `options` is the only mandatory component-specific prop.
+-   Only specify `dropdownRootNode` when the default `body` rendering causes scroll or z-index conflicts.
+
+## Anti-patterns
+
+-   Do not use `Form.Select` when users can choose more than one option — use `Form.MultiSelect`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
+-   Do not set both `error` and `errorMessage`.
+-   Do not use `disabled` on review screens — use `readOnly`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-slider.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-slider.md
new file mode 100644
index 0000000000..e8349b26d7
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-slider.md
@@ -0,0 +1,115 @@
+# Form.Slider
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Selecting a single numeric value within a bounded range (e.g. budget, age, percentage, rating).
+-   When the relative position of a value matters more than typing an exact number.
+
+## Usage
+
+### Basic slider with display-only `onChange` and API-safe `onChangeEnd`
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const BudgetSlider = () => {
+    const [displayValue, setDisplayValue] = useState(500);
+
+    const handleChange = (value: number) => {
+        // Safe: fires continuously during drag — update display only
+        setDisplayValue(value);
+    };
+
+    const handleChangeEnd = (value: number) => {
+        // Safe: fires once on mouse/touch release — trigger API calls here
+        fetchResults({ maxBudget: value });
+    };
+
+    return (
+        <Form.Slider
+            label={`Budget: $${displayValue}`}
+            min={0}
+            max={2000}
+            step={100}
+            value={displayValue}
+            onChange={handleChange}
+            onChangeEnd={handleChangeEnd}
+            showSliderLabels
+            sliderLabelPrefix="$"
+            showIndicatorLabel
+            indicatorLabelPrefix="$"
+        />
+    );
+};
+```
+
+**Never put API calls or expensive state updates in `onChange`** — it fires on every pixel of drag movement. Use `onChangeEnd` instead.
+
+### Custom track colours
+
+`colors` takes a two-element array: `[leftTrackColor, rightTrackColor]`.
+
+```tsx
+<Form.Slider
+    label="Risk level"
+    min={0}
+    max={10}
+    colors={["#4caf50", "#e0e0e0"]}
+    showSliderLabels
+    sliderLabelSuffix=" / 10"
+/>
+```
+
+## Props
+
+| Prop                   | Type                                                              | Default | Description                                                   |
+| ---------------------- | ----------------------------------------------------------------- | ------- | ------------------------------------------------------------- |
+| `value`                | `number`                                                          | —       | Controlled value                                              |
+| `min`                  | `number`                                                          | `0`     | Start of the range                                            |
+| `max`                  | `number`                                                          | `100`   | End of the range                                              |
+| `step`                 | `number`                                                          | `1`     | Interval between values                                       |
+| `disabled`             | `boolean`                                                         | —       | Disables the slider; selection not allowed                    |
+| `readOnly`             | `boolean`                                                         | —       | Read-only state                                               |
+| `id`                   | `string`                                                          | —       | Unique identifier of the component                            |
+| `className`            | `string`                                                          | —       | Class selector of the component                               |
+| `data-testid`          | `string`                                                          | —       | Test identifier of the component                              |
+| `colors`               | `(string \| ((props: ThemeStyleProps) => string \| undefined))[]` | —       | Custom colors for track segments `[leftTrack, rightTrack]`    |
+| `showSliderLabels`     | `boolean`                                                         | —       | Shows min and max labels                                      |
+| `sliderLabelPrefix`    | `string`                                                          | —       | Text prepended to min/max labels                              |
+| `sliderLabelSuffix`    | `string`                                                          | —       | Text appended to min/max labels                               |
+| `renderSliderLabel`    | `(value: number) => React.ReactNode`                              | —       | Custom renderer for min/max labels                            |
+| `showIndicatorLabel`   | `boolean`                                                         | —       | Shows the current value as an indicator label above the thumb |
+| `indicatorLabelPrefix` | `string`                                                          | —       | Text prepended to the indicator label                         |
+| `indicatorLabelSuffix` | `string`                                                          | —       | Text appended to the indicator label                          |
+| `ariaLabel`            | `string`                                                          | —       | Accessible label for screen readers                           |
+| `onChange`             | `(value: number) => void`                                         | —       | Called on every value change (fires continuously during drag) |
+| `onChangeEnd`          | `(value: number) => void`                                         | —       | Called when the thumb is released after a change              |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Always set `min` and `max` to meaningful bounds for the use case.
+-   Use `step` to restrict values to meaningful increments (e.g. `step={500}` for a budget slider).
+-   Use `onChangeEnd` for expensive operations (API calls, heavy computations) — `onChange` fires on every pixel of movement.
+-   Enable `showSliderLabels` so users know the range bounds.
+-   Enable `showIndicatorLabel` so users can see the current value while dragging.
+-   Provide `ariaLabel` when the label alone does not fully describe the slider's purpose to screen readers.
+-   `onChange` fires continuously during drag; use `onChangeEnd` for expensive operations such as API calls.
+-   `colors` array format is `[leftTrack, rightTrack]`.
+
+## Anti-patterns
+
+-   Do not use `onChange` to trigger API calls — use `onChangeEnd` to avoid flooding the network.
+-   Do not use when the user needs to enter a precise value — prefer a number input in that case.
+-   Do not omit `min` and `max` — the defaults (0–100) may not be appropriate for the domain.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-textarea.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-textarea.md
new file mode 100644
index 0000000000..de67735bf1
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-textarea.md
@@ -0,0 +1,122 @@
+# Form.Textarea
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use for freeform long-text entry — descriptions, comments, reasons, or any field where users need more than one line. Use `Form.Input` for single-line text.
+
+## Usage
+
+### 1. Basic controlled textarea
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const [value, setValue] = useState("");
+
+<Form.Textarea
+    label="Description"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    placeholder="Enter a description..."
+    rows={4}
+/>;
+```
+
+### 2. With `maxLength` — auto-renders a character counter
+
+```tsx
+<Form.Textarea
+    label="Comments"
+    maxLength={200}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+/>;
+{
+    /* A counter "0 / 200" appears below automatically — no extra code needed */
+}
+```
+
+### 3. With `renderCustomCounter`
+
+The prop signature is `(maxLength: number, currentValueLength: number) => JSX.Element`. Note the argument order: `maxLength` first, then `currentValueLength`.
+
+```tsx
+<Form.Textarea
+    label="Comments"
+    maxLength={200}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    renderCustomCounter={(maxLength, currentValueLength) => (
+        <span
+            style={{
+                color: currentValueLength > maxLength * 0.9 ? "red" : "inherit",
+            }}
+        >
+            {currentValueLength} of {maxLength} characters used
+        </span>
+    )}
+/>
+```
+
+### 4. With `transformValue`
+
+`transformValue` runs on every input event and replaces the raw value before it is applied. Do not duplicate this logic in `onChange`.
+
+```tsx
+<Form.Textarea
+    label="Reference code"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    transformValue={(raw) => raw.toUpperCase()}
+    maxLength={50}
+/>;
+{
+    /* User types "abc" → stored value becomes "ABC" */
+}
+```
+
+## Props
+
+### Textarea specific props
+
+| Prop                  | Type                                                             | Default | Description                                              |
+| --------------------- | ---------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `error`               | `boolean`                                                        | —       | Show error styling — not needed if `errorMessage` is set |
+| `renderCustomCounter` | `(maxLength: number, currentValueLength: number) => JSX.Element` | —       | Render a custom character counter label                  |
+| `transformValue`      | `(value: string) => string`                                      | —       | Transform the value on change before it is applied       |
+| `prefix`              | `string`                                                         | —       | Prefix string displayed inside the textarea              |
+| `data-testid`         | `string`                                                         | —       | Test identifier for the component                        |
+
+Also inherits all props from `HTMLTextareaElement` — including `rows`, `maxLength`, `placeholder`, `disabled`, `readOnly`, `value`, `onChange`, `resize`.
+
+### Form specific props
+
+| Prop                | Type                          | Default | Description                            |
+| ------------------- | ----------------------------- | ------- | -------------------------------------- |
+| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
+| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
+| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
+
+See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
+
+## Rules
+
+-   Set `rows` to match the expected content length — a short reason field needs fewer rows than a free-text description.
+-   Set `resize="none"` when the textarea height is fixed by design to prevent layout disruption.
+-   Provide `maxLength` when a character limit must be enforced — the built-in counter appears automatically.
+-   Use `renderCustomCounter` only when the default counter format does not meet content requirements.
+-   Use `transformValue` for on-the-fly normalisation (e.g. forced capitalisation) — do not replicate this in `onChange`.
+-   Provide `errorMessage` rather than `error` alone.
+-   Setting native `maxLength` renders a character counter below the textarea automatically.
+-   `renderCustomCounter` overrides the default counter UI when `maxLength` is set.
+-   `error` is redundant when `errorMessage` is provided.
+-   `transformValue` runs on every input event — use for normalisation (e.g. uppercase conversion).
+
+## Anti-patterns
+
+-   Do not use `Form.Textarea` for single-line inputs — use `Form.Input`.
+-   Do not implement a manual character counter in consumer code when `maxLength` is set — the built-in counter handles it.
+-   Do not set both `error` and `errorMessage`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-time-range-picker.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-time-range-picker.md
new file mode 100644
index 0000000000..0e9f27f36e
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-time-range-picker.md
@@ -0,0 +1,91 @@
+# Form.TimeRangePicker
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a start and end time from the user (e.g. operating hours, meeting slot, booking window).
+-   Use `variant="combobox"` with `interval` when users should pick from fixed time slots (e.g. every 30 minutes).
+-   Use `variant="dial"` (default) for freeform time selection.
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.TimeRangePicker className={styles.timeRangePicker} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .timeRangePicker {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
+
+## Props
+
+| Prop               | Type                                    | Default         | Description                                              |
+| ------------------ | --------------------------------------- | --------------- | -------------------------------------------------------- |
+| `value`            | `TimeRangePickerValue`                  | —               | Selected time range                                      |
+| `format`           | `"12hr" \| "24hr"`                      | `"24hr"`        | Time input format                                        |
+| `variant`          | `"dial" \| "combobox"`                  | `"dial"`        | Picker UI variant                                        |
+| `disabled`         | `boolean`                               | —               | Disables the component; entry not allowed                |
+| `readOnly`         | `boolean`                               | —               | Read-only state; selection not allowed                   |
+| `error`            | `boolean`                               | —               | Sets error display (not needed if `errorMessage` is set) |
+| `id`               | `string`                                | —               | Unique identifier of the component                       |
+| `className`        | `string`                                | —               | Class selector of the component                          |
+| `style`            | `React.CSSProperties`                   | —               | Inline styles for the component                          |
+| `data-testid`      | `string`                                | —               | Test identifier of the component                         |
+| `alignment`        | `"left" \| "right"`                     | `"left"`        | Dropdown alignment relative to the field                 |
+| `dropdownZIndex`   | `number`                                | `50`            | z-index of the dropdown                                  |
+| `dropdownRootNode` | `React.RefObject<HTMLElement>`          | `document.body` | Root element containing the dropdown                     |
+| `onChange`         | `(value: TimeRangePickerValue) => void` | —               | Called when user confirms the time range                 |
+| `onBlur`           | `() => void`                            | —               | Called on defocus                                        |
+| `onFocus`          | `() => void`                            | —               | Called when field is focused                             |
+
+## Combobox-variant-specific props
+
+| Prop                     | Type     | Default | Description                                                  |
+| ------------------------ | -------- | ------- | ------------------------------------------------------------ |
+| `interval`               | `number` | `15`    | Minutes between each dropdown option                         |
+| `startLimit`             | `string` | —       | Earliest time shown in the dropdown                          |
+| `endLimit`               | `string` | —       | Latest time shown in the dropdown                            |
+| `initialScrollStartTime` | `string` | —       | Time the start dropdown scrolls to when start field is empty |
+| `initialScrollEndTime`   | `string` | —       | Time the end dropdown scrolls to when end field is empty     |
+
+## TimeRangePickerValue
+
+| Prop    | Type     | Description                                                                                                 |
+| ------- | -------- | ----------------------------------------------------------------------------------------------------------- |
+| `start` | `string` | Start time. Dial 24hr: `"HH:mm"`, dial 12hr: `"hh:mmA"`. Combobox 24hr: `"HH:mm"`, combobox 12hr: `"h:mma"` |
+| `end`   | `string` | End time, same format as `start`                                                                            |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `TimeRangePickerValue`.
+-   Match `format` to the expected string format in `TimeRangePickerValue`.
+-   Use `startLimit`/`endLimit` with `combobox` variant to restrict available options to valid business hours.
+-   Set `errorMessage` rather than `error` alone.
+-   Use `dropdownRootNode` when inside a modal or scrollable container.
+-   Time string format differs between `dial` and `combobox` variants — see `TimeRangePickerValue` above.
+-   `interval`, `startLimit`, `endLimit`, and `initialScroll*` props only apply when `variant="combobox"`.
+
+## Anti-patterns
+
+-   Do not use for single time selection — use `Form.TimePicker` instead.
+-   Do not mix dial and combobox time string formats — the format differs between variants.
+-   Do not set combobox-specific props (`interval`, `startLimit`, `endLimit`, `initialScroll*`) when `variant="dial"`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-timepicker.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-timepicker.md
new file mode 100644
index 0000000000..b5dd71055d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-timepicker.md
@@ -0,0 +1,75 @@
+# Form.Timepicker
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+> **Casing:** the export is `Form.Timepicker` (lowercase `p`), not `Form.TimePicker`.
+
+## When to use
+
+-   Collecting a single time value from the user (e.g. appointment time, start time, notification time).
+-   Use `format="12hr"` for consumer-facing forms where AM/PM is more intuitive.
+-   Use `format="24hr"` (default) for operational or technical contexts.
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.Timepicker className={styles.timepicker} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .timepicker {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
+
+## Props
+
+| Prop               | Type                           | Default         | Description                                                                          |
+| ------------------ | ------------------------------ | --------------- | ------------------------------------------------------------------------------------ |
+| `value`            | `string`                       | —               | Selected time. 24hr: `"HH:mm"` (e.g. `"13:00"`); 12hr: `"hh:mmA"` (e.g. `"01:00PM"`) |
+| `format`           | `"12hr" \| "24hr"`             | `"24hr"`        | Time input format                                                                    |
+| `placeholder`      | `string`                       | —               | Placeholder text in the field                                                        |
+| `alignment`        | `"left" \| "right"`            | `"left"`        | Alignment of the dropdown relative to the field                                      |
+| `disabled`         | `boolean`                      | —               | Disables the component; entry not allowed                                            |
+| `error`            | `boolean`                      | —               | Sets error display (not needed if `errorMessage` is set)                             |
+| `id`               | `string`                       | —               | Unique identifier of the component                                                   |
+| `className`        | `string`                       | —               | Class selector of the component                                                      |
+| `style`            | `React.CSSProperties`          | —               | Inline styles for the component                                                      |
+| `data-testid`      | `string`                       | —               | Test identifier of the component                                                     |
+| `dropdownZIndex`   | `number`                       | —               | z-index of the dropdown popover                                                      |
+| `dropdownRootNode` | `React.RefObject<HTMLElement>` | `document.body` | Root element containing the dropdown popover                                         |
+| `onChange`         | `(value: string) => void`      | —               | Called when user confirms a time selection                                           |
+| `onBlur`           | `() => void`                   | —               | Called on defocus; pending changes are not applied                                   |
+| `onFocus`          | `() => void`                   | —               | Called when field is focused                                                         |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage.
+-   Match `format` to the expected string format: `"HH:mm"` for 24hr, `"hh:mmA"` for 12hr.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `dropdownRootNode` when the picker is inside a modal or fixed container to avoid z-index issues.
+-   Use `alignment="right"` when the picker is near the right edge of the viewport.
+-   `onChange` fires only after the user clicks the Confirm button, not on every dial interaction.
+-   `onBlur` does not apply any in-progress selection — use `onChange` for committed values.
+
+## Anti-patterns
+
+-   Do not use for time-range selection — use `Form.TimeRangePicker` instead.
+-   Do not mix 12hr format strings with `format="24hr"` or vice versa.
+-   Do not rely on `onBlur` to capture the selected value — it does not commit the selection.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-unit-number-input.md b/docs/skills/cc-flagship-ds/resources/v4/components/form-unit-number-input.md
new file mode 100644
index 0000000000..22e4e4305f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/form-unit-number-input.md
@@ -0,0 +1,139 @@
+# Form.UnitNumberInput
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a Singapore unit number in `#floor-unit` format (e.g. `#01-234`).
+-   Any address form that includes a unit number field for Singapore addresses.
+
+## Usage
+
+### Basic controlled usage with validation guard
+
+`onChange` returns a `floor-unit` string (e.g. `"03-12"`) or the sentinel string `"Invalid unit number"` for malformed input. Always check before persisting.
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const UnitField = () => {
+    const [value, setValue] = useState("");
+    const [error, setError] = useState("");
+
+    const handleChange = (val: string) => {
+        if (val === "Invalid unit number") {
+            setError("Please enter a valid unit number.");
+            // Do not persist — keep previous valid value in state
+        } else {
+            setError("");
+            setValue(val); // e.g. "03-12"
+        }
+    };
+
+    return (
+        <Form.UnitNumberInput
+            label="Unit number"
+            value={value}
+            onChange={handleChange}
+            errorMessage={error}
+        />
+    );
+};
+```
+
+### `onBlur` zero-pads automatically
+
+After the user tabs away, `onBlur` fires with the formatted value. The displayed value may change without any user input — update state accordingly.
+
+```tsx
+<Form.UnitNumberInput
+    label="Unit number"
+    value={value}
+    onChange={handleChange}
+    onBlur={(formatted) => {
+        // e.g. user typed "3-2" → formatted is "03-02"
+        setValue(formatted);
+    }}
+/>
+```
+
+### `onChangeRaw` — separate floor and unit
+
+Use `onChangeRaw` when downstream code needs floor and unit as distinct values, regardless of validity.
+
+```tsx
+<Form.UnitNumberInput
+    label="Unit number"
+    onChangeRaw={(parts: string[]) => {
+        const [floor, unit] = parts; // e.g. ["03", "12"]
+        setFloor(floor);
+        setUnit(unit);
+    }}
+/>
+```
+
+Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class:
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.UnitNumberInput className={styles.unitNumberInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .unitNumberInput {
+    max-width: 24rem;
+}
+```
+
+## Props
+
+| Prop           | Type                        | Default     | Description                                                                                              |
+| -------------- | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
+| `value`        | `string`                    | —           | Controlled value in `floor-unit` format (e.g. `"00-8888"`)                                               |
+| `name`         | `string`                    | —           | Name attribute of the component                                                                          |
+| `error`        | `boolean`                   | —           | Sets error display (not needed if `errorMessage` is set)                                                 |
+| `id`           | `string`                    | —           | Unique identifier of the component                                                                       |
+| `className`    | `string`                    | —           | Class selector of the component                                                                          |
+| `style`        | `React.CSSProperties`       | —           | Inline styles for the component                                                                          |
+| `role`         | `React.AriaRole`            | —           | ARIA role of the component                                                                               |
+| `data-testid`  | `string`                    | —           | Test identifier of the component                                                                         |
+| `placeholder`  | `string`                    | `"00-8888"` | Placeholder text; recommended to use `<floor>-<unit>` format                                             |
+| `disabled`     | `boolean`                   | —           | Disables the component; entry not allowed                                                                |
+| `readOnly`     | `boolean`                   | —           | Read-only state; entry not allowed                                                                       |
+| `tabIndex`     | `number`                    | —           | Tab order of the component                                                                               |
+| `autoComplete` | `string`                    | —           | `autocomplete` attribute for the input field                                                             |
+| `onChange`     | `(value: string) => void`   | —           | Called on value change; returns `floor-unit` string. Returns `"Invalid unit number"` if value is invalid |
+| `onChangeRaw`  | `(value: string[]) => void` | —           | Called on value change; returns `[floor, unit]` array regardless of validity                             |
+| `onBlur`       | `(value: string) => void`   | —           | Called on defocus; returns formatted `floor-unit` string (e.g. `"11-2"` → `"11-02"`)                     |
+| `onBlurRaw`    | `(value: string[]) => void` | —           | Called on defocus; returns `[floor, unit]` array                                                         |
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage.
+-   Check the return value of `onChange` for `"Invalid unit number"` and handle it before persisting the value.
+-   Use `onChangeRaw` if you need floor and unit as separate values for downstream processing.
+-   Use `onBlur` to get the zero-padded, formatted value after the user finishes typing.
+-   Set `errorMessage` to explain validation failures.
+-   `onChange` returns `"Invalid unit number"` for malformed input — check for this string before saving.
+-   `onBlur` zero-pads the unit part (e.g. `"11-2"` → `"11-02"`).
+-   Use `onChangeRaw` / `onBlurRaw` when you need floor and unit as separate values.
+
+## Anti-patterns
+
+-   Do not use a plain text input for unit numbers — the component enforces the correct format automatically.
+-   Do not persist the value returned from `onChange` without first checking it is not `"Invalid unit number"`.
+-   Do not use for non-Singapore address formats — the component enforces the `floor-unit` structure.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/fullscreen-image-carousel.md b/docs/skills/cc-flagship-ds/resources/v4/components/fullscreen-image-carousel.md
new file mode 100644
index 0000000000..bc10fceddb
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/fullscreen-image-carousel.md
@@ -0,0 +1,123 @@
+# FullscreenImageCarousel
+
+Import: `import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel"`
+
+## When to use
+
+Use to display a fullscreen overlay carousel of images or custom content (e.g. PDFs, videos) with thumbnail navigation, zoom, and optional delete controls.
+
+## Sub-components
+
+-   `FullscreenImageCarouselItemProps` — union of `FullscreenImageCarouselImageItemProps` and `FullscreenImageCarouselCustomItemProps`
+
+## Usage
+
+### Mixed image and custom items
+
+Items use a discriminated union on `type`. Image items may omit `type` (defaults to image); custom items **must** set `type: "custom"` and provide `renderContent`.
+
+```tsx
+import { useState } from "react";
+import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel";
+
+const DocViewer = () => {
+    const [show, setShow] = useState(false);
+
+    const items = [
+        // Image item — type may be omitted
+        {
+            src: "https://example.com/photo.jpg",
+            alt: "Site photo",
+            fileName: "photo.jpg",
+            fileSize: "1.2 MB",
+        },
+        // Custom item — type is required
+        {
+            type: "custom" as const,
+            itemLabel: "PDF",
+            thumbnailSrc: "https://example.com/pdf-thumb.svg",
+            renderContent: () => (
+                <iframe
+                    src="https://example.com/document.pdf"
+                    title="PDF preview"
+                    style={{ width: "100%", height: "100%", border: "none" }}
+                />
+            ),
+        },
+    ];
+
+    const handleDelete = (item, index) => {
+        // Remove the item from your state; the delete button only appears
+        // because onDelete is provided.
+        removeItem(index);
+    };
+
+    return (
+        <>
+            <button onClick={() => setShow(true)}>View files</button>
+            <FullscreenImageCarousel
+                show={show}
+                items={items}
+                onClose={() => setShow(false)}
+                onDelete={handleDelete} // omit to hide delete button
+                showFirstAndLastNav
+            />
+        </>
+    );
+};
+```
+
+## Props
+
+| Prop                     | Type                                                               | Default    | Description                                                                               |
+| ------------------------ | ------------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------- |
+| `show` \*                | `boolean`                                                          | `false`    | Toggles the visibility of the Modal                                                       |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                               | —          | List of carousel items                                                                    |
+| `animationFrom`          | `"top" \| "bottom" \| "left" \| "right"`                           | `"bottom"` | The animation direction the Modal will appear from                                        |
+| `zIndex`                 | `number`                                                           | —          | Custom z-index for modal stacking                                                         |
+| `initialActiveItemIndex` | `number`                                                           | `0`        | The initial image that will be displayed                                                  |
+| `hideThumbnail`          | `boolean`                                                          | —          | Specifies if the bottom thumbnail row is visible                                          |
+| `hideNavigation`         | `boolean`                                                          | —          | Specifies if the left and right navigation buttons are visible                            |
+| `hideCounter`            | `boolean`                                                          | —          | Specifies if the pagination counter pill is visible                                       |
+| `hideMagnifier`          | `boolean`                                                          | —          | Specifies if the magnifier/zoom button is visible                                         |
+| `onDelete`               | `(item: FullscreenImageCarouselItemProps, index: number) => void`  | —          | Called when the delete button is clicked; showing the button requires providing this prop |
+| `onClose`                | `() => void`                                                       | —          | Called when the overlay is dismissed via close button or Esc key                          |
+| `insets`                 | `{ top?: number; bottom?: number; left?: number; right?: number }` | —          | Safe-area insets from viewport edges                                                      |
+
+`*` = required
+
+## FullscreenImageCarouselItemProps (shared)
+
+| Prop       | Type     | Default | Description                                      |
+| ---------- | -------- | ------- | ------------------------------------------------ |
+| `fileName` | `string` | —       | File name displayed in the info bar at the top   |
+| `fileSize` | `string` | —       | Pre-formatted file size string (e.g. `"2.4 MB"`) |
+
+## FullscreenImageCarouselImageItemProps
+
+| Prop           | Type      | Default | Description                                   |
+| -------------- | --------- | ------- | --------------------------------------------- |
+| `type`         | `"image"` | —       | Discriminant; may be omitted for image items  |
+| `src` \*       | `string`  | —       | The image src                                 |
+| `alt`          | `string`  | —       | Descriptive text for screen readers           |
+| `thumbnailSrc` | `string`  | —       | Thumbnail src; falls back to `src` if omitted |
+
+## FullscreenImageCarouselCustomItemProps
+
+| Prop               | Type                    | Default | Description                                  |
+| ------------------ | ----------------------- | ------- | -------------------------------------------- |
+| `type` \*          | `"custom"`              | —       | Discriminant; must be `"custom"`             |
+| `renderContent` \* | `() => React.ReactNode` | —       | Custom render prop for the full slide area   |
+| `thumbnailSrc`     | `string`                | —       | Thumbnail src; shows placeholder if omitted  |
+| `itemLabel`        | `string`                | —       | Label describing content type (e.g. `"PDF"`) |
+
+## Rules
+
+-   Always provide `show` and `items` — both are required.
+-   Always wire `onClose` to set `show` to `false`; the component does not close itself.
+-   Do not reorder the `items` array while a delete is in flight.
+-   The delete button only appears when `onDelete` is provided — omit the prop to hide the button entirely.
+
+## Anti-patterns
+
+-   Do not use for inline image galleries — this component renders as a fullscreen modal overlay.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/histogram-slider.md b/docs/skills/cc-flagship-ds/resources/v4/components/histogram-slider.md
new file mode 100644
index 0000000000..f05018847b
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/histogram-slider.md
@@ -0,0 +1,40 @@
+# HistogramSlider
+
+Import: `import { HistogramSlider } from "@lifesg/react-design-system/histogram-slider"`
+
+A range slider with a histogram distribution chart above it — used in filter panels where showing the value distribution helps users pick a range (e.g. price range, age range).
+
+## Props
+
+| Prop               | Type                                | Default | Description                                                  |
+| ------------------ | ----------------------------------- | ------- | ------------------------------------------------------------ |
+| `bins`             | `HistogramBinProps[]`               | `[]`    | Histogram data — array of `{ count, minValue }` objects      |
+| `interval`         | `number`                            | —       | **Required.** Width of each bin (e.g. `10` for 0–10, 10–20…) |
+| `value`            | `[number, number]`                  | —       | Selected range as `[start, end]`                             |
+| `onChange`         | `(value: [number, number]) => void` | —       | Fires on every drag movement                                 |
+| `onChangeEnd`      | `(value: [number, number]) => void` | —       | Fires when thumb is released — use for API calls             |
+| `disabled`         | `boolean`                           | `false` | Disables interaction                                         |
+| `readOnly`         | `boolean`                           | `false` | Display only — no interaction                                |
+| `showRangeLabels`  | `boolean`                           | —       | Show min/max value labels below the slider                   |
+| `rangeLabelPrefix` | `string`                            | —       | Prefix for range labels (e.g. `"$"`)                         |
+| `rangeLabelSuffix` | `string`                            | —       | Suffix for range labels (e.g. `" km"`)                       |
+| `renderRangeLabel` | `(value: number) => ReactNode`      | —       | Custom range label renderer — overrides prefix/suffix        |
+| `renderEmptyView`  | `() => ReactNode`                   | —       | Renders when `bins` is empty                                 |
+| `ariaLabels`       | `[string, string]`                  | —       | Accessible labels for `[minThumb, maxThumb]`                 |
+| `aria-labelledby`  | `string`                            | —       | ID of an external label element                              |
+| `aria-describedby` | `string`                            | —       | ID of an external description element                        |
+| `data-testid`      | `string`                            | —       | Test identifier                                              |
+
+## HistogramBinProps
+
+| Prop       | Type     | Description                                         |
+| ---------- | -------- | --------------------------------------------------- |
+| `count`    | `number` | Number of items in this bin — determines bar height |
+| `minValue` | `number` | Starting value of this bin                          |
+
+## Rules
+
+-   `onChange` fires continuously during drag — do not put API calls here; use `onChangeEnd`.
+-   `interval` must match the gap between `minValue` of consecutive bins.
+-   Always provide `ariaLabels` or `aria-labelledby` for accessibility.
+-   Pair with `Filter` in a filter sidebar — `HistogramSlider` is not a `Form.*` component and does not use `label`/`errorMessage`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/icon.md b/docs/skills/cc-flagship-ds/resources/v4/components/icon.md
new file mode 100644
index 0000000000..7fa6d022fe
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/icon.md
@@ -0,0 +1,175 @@
+# Icons
+
+Icons come from `@lifesg/react-icons` — a separate package. Each icon is its own named export.
+
+## Import pattern
+
+Icon names follow `{name}` → component name is `{PascalCase}Icon`:
+
+```tsx
+import { ArrowRightIcon } from "@lifesg/react-icons/arrow-right";
+import { TickCircleFillIcon } from "@lifesg/react-icons/tick-circle-fill";
+import { PersonIcon } from "@lifesg/react-icons/person";
+```
+
+Pattern: `kebab-case` name → import path `@lifesg/react-icons/{name}` → component `{PascalCase}Icon`
+
+## Props
+
+| Prop        | Type     | Default  | Description                      |
+| ----------- | -------- | -------- | -------------------------------- |
+| `size`      | `number` | `24`     | Icon size in px                  |
+| `color`     | `string` | inherits | CSS colour value or token string |
+| `className` | `string` | —        | CSS class                        |
+
+## Available icons
+
+Icons come in two variants: outline (default) and filled (`-fill` suffix).
+
+### Arrows & Navigation
+
+`arrow-up` `arrow-down` `arrow-left` `arrow-right`
+`arrow-up-circle` `arrow-up-circle-fill` `arrow-down-circle` `arrow-down-circle-fill`
+`arrow-left-circle` `arrow-left-circle-fill` `arrow-right-circle` `arrow-right-circle-fill`
+`arrow-left-up` `arrow-left-down` `arrow-right-up` `arrow-right-down`
+`chevron-up` `chevron-down` `chevron-left` `chevron-right`
+`chevron-2-left` `chevron-2-right`
+`chevron-line-left` `chevron-line-right`
+`caret-up` `caret-down` `caret-left` `caret-right`
+`multi-chevron-up-down` `multi-chevron-down-up`
+`navigation` `navigation-fill`
+`external` `return`
+
+### Actions
+
+`plus` `plus-circle` `plus-circle-fill`
+`minus` `minus-circle` `minus-circle-fill` `minus-square` `minus-square-fill`
+`cross` `cross-circle` `cross-circle-fill`
+`tick` `tick-circle` `tick-circle-fill`
+`pencil` `pencil-fill` `pencil-stroke` `pencil-stroke-fill`
+`bin` `bin-fill`
+`copy` `copy-fill`
+`download` `upload`
+`share` `link`
+`login` `logout`
+`refresh` `replay` `retry`
+`drag-handle`
+`filter`
+`sort-ascending` `sort-descending`
+`fullscreen-open` `fullscreen-close`
+`read-more`
+`eraser`
+
+### Status & Feedback
+
+`tick-circle` `tick-circle-fill`
+`cross-circle` `cross-circle-fill`
+`exclamation-circle` `exclamation-circle-fill`
+`exclamation-triangle` `exclamation-triangle-fill`
+`i-circle` `i-circle-fill`
+`questionmark-circle` `questionmark-circle-fill`
+`thumb-up` `thumb-up-fill`
+`star` `star-fill` `star-half`
+
+### People & Identity
+
+`person` `person-fill`
+`person-2` `person-2-fill`
+`person-group` `person-group-fill`
+`person-plus` `person-plus-fill`
+`person-minus` `person-minus-fill`
+`person-2-plus` `person-2-plus-fill`
+`person-2-minus` `person-2-minus-fill`
+`person-gear` `person-gear-fill`
+`person-off` `person-off-fill`
+`id-card` `id-card-fill`
+
+### Communication
+
+`envelope` `envelope-fill`
+`envelope-open` `envelope-open-fill`
+`bell` `bell-fill`
+`phone` `phone-fill`
+`inbox` `inbox-fill`
+`speaker` `speaker-fill`
+
+### Files & Documents
+
+`doc` `doc-fill`
+`doc-pencil` `doc-pencil-fill`
+`album` `album-fill`
+`box` `box-fill`
+`index`
+`text` `text-fill`
+
+### Calendar & Time
+
+`calendar` `calendar-fill`
+`calendar-event` `calendar-event-fill`
+`calendar-plus` `calendar-plus-fill`
+`calendar-cross` `calendar-cross-fill`
+`calendar-dot` `calendar-dot-fill`
+`calendar-pencil` `calendar-pencil-fill`
+`calendar-tick` `calendar-tick-fill`
+`clock` `clock-fill`
+`recurring` `non-recurring`
+
+### Location & Maps
+
+`map` `map-fill`
+`pin` `pin-fill`
+`point`
+`navigation` `navigation-fill`
+`globe`
+`house` `house-fill`
+`building`
+`floor-plan` `floor-plan-fill`
+
+### Devices & Media
+
+`camera` `camera-fill`
+`tablet` `tablet-fill`
+`phone` `phone-fill`
+`cloud` `cloud-fill`
+`cloud-arrow-up` `cloud-arrow-up-fill`
+`cloud-arrow-down` `cloud-arrow-down-fill`
+`cloud-tick` `cloud-tick-fill`
+`qr`
+
+### UI & Layout
+
+`menu`
+`ellipsis-horizontal` `ellipsis-vertical`
+`gear` `gear-fill`
+`lock` `lock-fill`
+`eye` `eye-fill`
+`eye-slash` `eye-slash-fill`
+`list`
+`square` `square-fill`
+`square-2x2` `square-2x2-fill`
+`square-tick` `square-tick-fill`
+`circle` `circle-dot`
+`toggle-on` `toggle-on-fill`
+`toggle-off` `toggle-off-fill`
+`magnifier` `magnifier-plus` `magnifier-minus`
+
+### Misc
+
+`bookmark` `bookmark-fill`
+`chart` `chart-fill`
+`car`
+`dollar`
+`printer` `printer-fill`
+`lightbulb` `lightbulb-fill`
+`language`
+`ticket` `ticket-fill`
+`triangle-forward` `triangle-forward-fill`
+`align-left` `align-center` `align-right` `align-justify`
+`placeholder` `placeholder-image`
+
+## Rules
+
+-   Never guess an icon name — verify it exists in the list above before importing.
+-   `-fill` variants are the solid/filled version; the base name is outline.
+-   Fallback: if no suitable icon exists in `@lifesg/react-icons`, use `@mui/icons-material` as a secondary source.
+-   For `IconButton`, always set `aria-label` — the icon alone is not accessible.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/image-button.md b/docs/skills/cc-flagship-ds/resources/v4/components/image-button.md
new file mode 100644
index 0000000000..9258796aad
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/image-button.md
@@ -0,0 +1,14 @@
+# ImageButton
+
+Import: `import { ImageButton } from "@lifesg/react-design-system/image-button"`
+
+## Props
+
+Inherits all props from `HTMLButtonElement`.
+
+| Prop                    | Type      | Default | Description                              |
+| ----------------------- | --------- | ------- | ---------------------------------------- |
+| `imgSrc`                | `string`  | —       | Image source to be rendered              |
+| `selected`              | `boolean` | —       | Shows the selected state                 |
+| `error`                 | `boolean` | —       | Shows the error state                    |
+| `focusableWhenDisabled` | `boolean` | `false` | Keeps the button focusable when disabled |
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/input.md b/docs/skills/cc-flagship-ds/resources/v4/components/input.md
new file mode 100644
index 0000000000..4810f1eb19
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/input.md
@@ -0,0 +1,45 @@
+# Input
+
+Import: `import { Input } from "@lifesg/react-design-system/input"`
+
+## When to use
+
+Use `Input` for standalone inputs that do not need a label or error message — search bars, inline editing, filter fields, or composition contexts where the form layout is provided externally. For all labelled form fields with validation messages, use `Form.Input` instead.
+
+## Variants
+
+| `styleType`            | When to use                                                                                                      |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `"bordered"` (default) | Standard standalone input — provides clear affordance                                                            |
+| `"no-border"`          | Inline editing or search bars embedded in headers/toolbars where a border would conflict with the surrounding UI |
+
+## Props
+
+| Prop          | Type                          | Default      | Description                                                         |
+| ------------- | ----------------------------- | ------------ | ------------------------------------------------------------------- |
+| `spacing`     | `number`                      | —            | Number of characters before a space is inserted — `type="tel"` only |
+| `error`       | `boolean`                     | —            | Show error state styling                                            |
+| `allowClear`  | `boolean`                     | `false`      | Show clear icon button inside the field                             |
+| `onClear`     | `() => void`                  | —            | Called when clear icon is clicked                                   |
+| `styleType`   | `"no-border"` \| `"bordered"` | `"bordered"` | Border style variant                                                |
+| `data-testid` | `string`                      | —            | Test identifier for the component                                   |
+
+Also inherits all props from `HTMLInputElement` — including `type`, `value`, `onChange`, `placeholder`, `disabled`, `readOnly`, `maxLength`, etc.
+
+## Rules
+
+-   Use `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
+-   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
+-   Use `allowClear` for search inputs and optional fields; pair with `onClear` to reset the controlled value.
+-   Set `error={true}` to communicate an invalid state visually — provide a separate error message element in the surrounding layout.
+-   Use `styleType="no-border"` only when the surrounding container or background provides sufficient visual separation.
+-   `Input` is the bare input field with no label or error message wrapper. Use `Form.Input` when a label or validation message is needed.
+-   `spacing` only has effect when `type="tel"`.
+-   `styleType="no-border"` removes the visible border — use only when the surrounding context provides sufficient visual distinction.
+-   `error` drives error-state styling only; there is no built-in error message — pair with external error text if needed.
+
+## Anti-patterns
+
+-   Do not use `Input` inside a form that needs labels or validation messages — use `Form.Input`.
+-   Do not use `spacing` with input types other than `"tel"`.
+-   Do not rely on `Input` alone to surface error messages — it has no built-in error text slot.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/language-switcher.md b/docs/skills/cc-flagship-ds/resources/v4/components/language-switcher.md
new file mode 100644
index 0000000000..bf6b2852ca
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/language-switcher.md
@@ -0,0 +1,17 @@
+# LanguageSwitcher
+
+Import: `import { LanguageSwitcher } from "@lifesg/react-design-system/language-switcher"`
+
+## Props
+
+| Prop               | Type                                       | Default      | Description                                       |
+| ------------------ | ------------------------------------------ | ------------ | ------------------------------------------------- |
+| `variant`          | `"dropdown" \| "link-container"`           | `"dropdown"` | The display variant of the language switcher      |
+| `className`        | `string`                                   | —            | The className of the component for custom styling |
+| `data-testid`      | `string`                                   | —            | The test identifier of the component              |
+| `selectedLanguage` | `"en" \| "zh" \| "ms" \| "ta"`             | `"en"`       | The currently selected language code              |
+| `onSelectLanguage` | `(language: LanguageSwitcherCode) => void` | —            | Called when a language is selected                |
+
+## Rules
+
+-   `LanguageSwitcherCode` is the union of supported language codes: `"en" | "zh" | "ms" | "ta"`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/layout.md b/docs/skills/cc-flagship-ds/resources/v4/components/layout.md
new file mode 100644
index 0000000000..454ef5e768
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/layout.md
@@ -0,0 +1,143 @@
+# Layout
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Layout } from "@lifesg/react-design-system/layout"`
+
+## Composition
+
+```
+Layout.Container type="grid"        ← responsive 12-col grid (desktop) / 8-col (mobile)
+├── Layout.ColDiv xsCols lgCols     ← column span — always set xsCols
+├── Layout.ColDiv xsCols lgCols
+└── Layout.ColDiv xsCols lgCols
+
+Layout.Container type="flex"        ← horizontal flexbox row
+└── {children}
+
+Layout.Container type="flex-column" ← vertical flexbox column
+└── {children}
+```
+
+`Layout.Section` and `Layout.Content` share the same props as `Layout.Container` and can be used in place of it for semantic HTML structure. Never nest `Layout.Container` inside another `Layout.Container`. Always set `xsCols` on every `Layout.ColDiv` — never set only `lgCols`.
+
+-   `Layout.ColDiv` — responsive grid column div
+
+## Usage
+
+```tsx
+import { Layout } from "@lifesg/react-design-system/layout";
+
+<Layout.Container type="grid">
+    <Layout.ColDiv xsCols={8} lgCols={6}>
+        Content
+    </Layout.ColDiv>
+</Layout.Container>;
+```
+
+| `type`          | Use case                         |
+| --------------- | -------------------------------- |
+| `"grid"`        | Responsive column grid (default) |
+| `"flex"`        | Horizontal flexbox layout        |
+| `"flex-column"` | Vertical flexbox layout          |
+
+## Breakpoints
+
+| Breakpoint | Min width | Columns | Gutter | Device                |
+| ---------- | --------- | ------- | ------ | --------------------- |
+| `xxs`      | 0px       | 8       | 16px   | Smallest mobile       |
+| `xs`       | 321px     | 8       | 16px   | Small mobile          |
+| `sm`       | 376px     | 8       | 16px   | Mobile                |
+| `md`       | 481px     | 8       | 16px   | Large mobile / tablet |
+| `lg`       | 769px     | 12      | 32px   | Desktop               |
+| `xl`       | 1201px    | 12      | 32px   | Large desktop         |
+| `xxl`      | 1441px    | 12      | 32px   | Extra-large           |
+
+### Common column widths
+
+| Use case                             | `xsCols` | `lgCols` | `xlCols` |
+| ------------------------------------ | -------- | -------- | -------- |
+| Full width                           | 8        | 12       | —        |
+| Full width (form progress indicator) | 12       | 12       | —        |
+| Narrow content (forms)               | 12       | 9        | 8        |
+| Half-width (2-up cards)              | 8        | 6        | —        |
+| Third-width (3-up cards)             | 8        | 4        | —        |
+| Quarter-width (4-up metrics)         | 8        | 6        | 3        |
+| Sidebar                              | 8        | 3        | —        |
+| Main + sidebar main                  | 8        | 9        | —        |
+
+## Responsive styles
+
+Use CSS Module classes for responsive styles in v4. The `MediaQuery` breakpoint body classes replace `@media` queries in CSS Modules.
+
+```tsx
+import styles from "./MyComponent.module.css";
+
+<div className={styles.responsiveDiv}>...</div>;
+```
+
+```css
+/* MyComponent.module.css */
+.responsiveDiv {
+    padding: var(--fds-spacing-16);
+}
+
+:global(body.fds-breakpoint-lg-min) .responsiveDiv {
+    padding: var(--fds-spacing-32);
+}
+```
+
+| CSS Module selector                        | Query type          | When it applies                  |
+| ------------------------------------------ | ------------------- | -------------------------------- |
+| `:global(body.fds-breakpoint-md-min) .cls` | `min-width: 481px`  | md and up (tablet+)              |
+| `:global(body.fds-breakpoint-lg-min) .cls` | `min-width: 769px`  | lg and up (desktop+)             |
+| `:global(body.fds-breakpoint-md-max) .cls` | `max-width: 768px`  | md and below (mobile only)       |
+| `:global(body.fds-breakpoint-lg-max) .cls` | `max-width: 1200px` | lg and below (non-large-desktop) |
+
+Design mobile-first — define base styles for mobile, then override with `MinWidth` for larger screens.
+
+## Props
+
+### Layout.Container / Layout.Section / Layout.Content
+
+All three extend `React.HTMLAttributes<HTMLDivElement>`.
+
+| Prop          | Type                                | Default  | Description                                                                                                         |
+| ------------- | ----------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
+| `children`    | `React.ReactNode`                   | —        | Child content                                                                                                       |
+| `type`        | `"flex" \| "flex-column" \| "grid"` | `"flex"` | Display style; use `"flex-column"` for standard vertical page content, `"grid"` for the responsive 12-column layout |
+| `stretch`     | `boolean`                           | —        | Stretch to full viewport height                                                                                     |
+| `data-testid` | `string`                            | —        | Test identifier                                                                                                     |
+
+`Layout.Section` and `Layout.Content` share the same interface as `Layout.Container`.
+
+### Layout.ColDiv
+
+Extends `React.HTMLAttributes<HTMLDivElement>`.
+
+| Prop          | Type                         | Default | Description                         |
+| ------------- | ---------------------------- | ------- | ----------------------------------- |
+| `xxsCols`     | `number \| [number, number]` | —       | Columns at xxs breakpoint (≥0px)    |
+| `xsCols`      | `number \| [number, number]` | —       | Columns at xs breakpoint (≥321px)   |
+| `smCols`      | `number \| [number, number]` | —       | Columns at sm breakpoint (≥376px)   |
+| `mdCols`      | `number \| [number, number]` | —       | Columns at md breakpoint (≥481px)   |
+| `lgCols`      | `number \| [number, number]` | —       | Columns at lg breakpoint (≥769px)   |
+| `xlCols`      | `number \| [number, number]` | —       | Columns at xl breakpoint (≥1201px)  |
+| `xxlCols`     | `number \| [number, number]` | —       | Columns at xxl breakpoint (≥1441px) |
+| `data-testid` | `string`                     | —       | Test identifier                     |
+
+Array form `[startCol, endCol]` specifies explicit grid line positions.
+
+## Rules
+
+-   Use CSS Modules for component-level styles — do not use plain inline styles for layout concerns.
+-   Use `:where(body.fds-breakpoint-{bp}-min)` selectors for responsive styles — never hardcoded pixel breakpoints.
+-   Use CSS custom properties for spacing (e.g. `var(--fds-spacing-16)`) — never hardcode pixel values.
+
+Grid rules:
+
+-   Always use `type="grid"` on Container for responsive column layouts.
+-   Always specify `xsCols` on ColDiv — mobile-first; never only `lgCols`.
+-   Max `xsCols` is 8 (mobile/tablet), max `lgCols` is 12 (desktop).
+-   Never nest `Layout.Container` inside another `Layout.Container`.
+-   A column span applies to all larger viewports until overridden.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/link-list.md b/docs/skills/cc-flagship-ds/resources/v4/components/link-list.md
new file mode 100644
index 0000000000..d93ef99f80
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/link-list.md
@@ -0,0 +1,89 @@
+# LinkList
+
+Import: `import { LinkList } from "@lifesg/react-design-system/link-list"`
+
+## When to use
+
+Use to present a set of related links — related articles, resources, or quick-access shortcuts. Use `style="small"` for compact contexts such as sidebars or footnotes.
+
+## Sub-components
+
+### LinkListItemProps
+
+| Prop                   | Type                                                   | Default | Description                                        |
+| ---------------------- | ------------------------------------------------------ | ------- | -------------------------------------------------- |
+| `title`                | `string`                                               | —       | Link label — required                              |
+| `description`          | `string`                                               | —       | First-level supporting text below the title        |
+| `secondaryDescription` | `string`                                               | —       | Second-level supporting text below the description |
+| `options`              | `T`                                                    | —       | Custom properties to pass to the item              |
+| `onClick`              | `(event: React.MouseEvent<HTMLAnchorElement>) => void` | —       | Per-item click handler — overrides `onItemClick`   |
+| `data-testid`          | `string`                                               | —       | Test identifier for the item                       |
+
+Inherits `HTMLAnchorElement` attributes (e.g. `href`, `target`).
+
+### Custom labels
+
+| Prop       | Type     | Default       | Description                    |
+| ---------- | -------- | ------------- | ------------------------------ |
+| `viewMore` | `string` | `"View more"` | Label for the show-more button |
+| `viewLess` | `string` | `"View less"` | Label for the show-less button |
+
+## Variants
+
+| `style`     | Usage                                                  |
+| ----------- | ------------------------------------------------------ |
+| `"default"` | Standard size — use in main content areas              |
+| `"small"`   | Compact — use in sidebars, footnotes, or dense layouts |
+
+| `loadMode` | Usage                                                         |
+| ---------- | ------------------------------------------------------------- |
+| `"eager"`  | All items loaded upfront; use `maxShown` to collapse the list |
+| `"lazy"`   | Items fetched on demand; requires `loadMore` and `onLoadMore` |
+
+## Usage
+
+```tsx
+import { LinkList } from "@lifesg/react-design-system/link-list";
+
+<LinkList
+    items={[
+        {
+            title: "Apply for a grant",
+            description: "Find out if you qualify.",
+            href: "/grants/apply",
+        },
+        { title: "Check application status", href: "/grants/status" },
+        { title: "Download forms", href: "/grants/forms" },
+    ]}
+    maxShown={2}
+/>;
+```
+
+## Props
+
+| Prop           | Type                                                                               | Default     | Description                                       |
+| -------------- | ---------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |
+| `items`        | `LinkListItemProps<T>[]`                                                           | —           | Array of link items — required                    |
+| `style`        | `"default"` \| `"small"`                                                           | `"default"` | Text size style                                   |
+| `loadMode`     | `"eager"` \| `"lazy"`                                                              | `"eager"`   | Loading mode for items                            |
+| `maxShown`     | `number`                                                                           | —           | Max items shown before collapse (eager mode only) |
+| `loadMore`     | `boolean`                                                                          | —           | Whether more items can be lazy-loaded (lazy mode) |
+| `onLoadMore`   | `() => void \| Promise<void>`                                                      | —           | Callback when "View more" is clicked (lazy mode)  |
+| `onItemClick`  | `(item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement>) => void` | —           | Component-level click handler for all items       |
+| `customLabels` | `object`                                                                           | —           | Override "View more" / "View less" button labels  |
+| `className`    | `string`                                                                           | —           | Class selector                                    |
+| `data-testid`  | `string`                                                                           | —           | Test identifier                                   |
+
+## Rules
+
+-   Use `maxShown` when the list has many items to avoid overwhelming the user on first load (eager mode).
+-   In `"lazy"` mode, both `loadMore` and `onLoadMore` are required.
+-   `onItemClick` applies to all items; per-item `onClick` in `LinkListItemProps` overrides it for that item.
+-   Use per-item `onClick` when individual items need different handling; use `onItemClick` for a uniform handler across all items.
+-   Use `description` to give users enough context to choose the right link without clicking.
+
+## Anti-patterns
+
+-   Using lazy mode without providing `onLoadMore` — the "View more" button will be non-functional.
+-   Omitting `description` when link titles are ambiguous.
+-   Using LinkList for non-link content — use a list or table instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/local-nav.md b/docs/skills/cc-flagship-ds/resources/v4/components/local-nav.md
new file mode 100644
index 0000000000..fb02440e76
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/local-nav.md
@@ -0,0 +1,95 @@
+# LocalNav
+
+Import: `import { LocalNavMenu, LocalNavDropdown } from "@lifesg/react-design-system/local-nav"`
+
+## When to use
+
+Use to let users navigate between sections on the same page (in-page navigation). Two components exist for different breakpoints — use both together for full responsive coverage.
+
+## Sub-components
+
+`LocalNavMenu`, `LocalNavDropdown`
+
+## Variants
+
+| Component          | Viewport          | Behaviour                                                              |
+| ------------------ | ----------------- | ---------------------------------------------------------------------- |
+| `LocalNavMenu`     | Desktop           | Vertical link list fixed to the left of page content, sticky on scroll |
+| `LocalNavDropdown` | Tablet and mobile | Renders inline, then sticks to top of viewport after scroll            |
+
+## Usage
+
+```tsx
+import {
+    LocalNavMenu,
+    LocalNavDropdown,
+} from "@lifesg/react-design-system/local-nav";
+
+const navItems = [
+    { title: "Overview", id: "overview" },
+    { title: "Eligibility", id: "eligibility" },
+    { title: "How to apply", id: "how-to-apply" },
+];
+
+{
+    /* Desktop */
+}
+<LocalNavMenu
+    items={navItems}
+    selectedItemIndex={activeIndex}
+    onNavItemSelect={(e, item, index) => {}}
+/>;
+
+{
+    /* Mobile / tablet */
+}
+<LocalNavDropdown
+    items={navItems}
+    selectedItemIndex={activeIndex}
+    defaultLabel="Jump to section"
+    onNavItemSelect={(e, item, index) => {}}
+/>;
+```
+
+## Props
+
+### Shared props (both components)
+
+| Prop                | Type                                                                                                  | Default | Description                          |
+| ------------------- | ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------ |
+| `items`             | `LocalNavItemProps[]`                                                                                 | —       | Nav items                            |
+| `selectedItemIndex` | `number`                                                                                              | —       | Index of the currently active item   |
+| `onNavItemSelect`   | `(e: React.MouseEvent \| React.KeyboardEvent, item: LocalNavItemProps, index: number) => void`        | —       | Called when an item is selected      |
+| `renderItem`        | `(item: LocalNavItemProps, renderProps: { selected: boolean, stickied: boolean }) => React.ReactNode` | —       | Custom render function for nav items |
+| `id`                | `string`                                                                                              | —       | Unique identifier                    |
+| `className`         | `string`                                                                                              | —       | Class selector                       |
+| `data-testid`       | `string`                                                                                              | —       | Test identifier                      |
+
+### LocalNavDropdown (additional props)
+
+| Prop           | Type     | Default | Description                                             |
+| -------------- | -------- | ------- | ------------------------------------------------------- |
+| `defaultLabel` | `string` | —       | Label shown before any item is selected — **required**  |
+| `stickyOffset` | `number` | —       | Top offset in pixels when the dropdown sticks on scroll |
+
+### LocalNavItemProps
+
+| Prop    | Type                        | Description                        |
+| ------- | --------------------------- | ---------------------------------- |
+| `title` | `string \| React.ReactNode` | Display label — **required**       |
+| `id`    | `string`                    | Unique identifier for the nav item |
+
+## Rules
+
+-   Use `LocalNavMenu` on desktop and `LocalNavDropdown` on tablet/mobile — render both and show/hide with CSS breakpoints.
+-   Always implement scroll-spy: update `selectedItemIndex` as the user scrolls to keep the active item in sync with the visible section. This is not automatic.
+-   Place `LocalNavMenu` on the left side of the page content area — not above it.
+-   Set `stickyOffset` on `LocalNavDropdown` equal to the height of the fixed Navbar so the dropdown does not overlap it when sticky.
+-   Keep item labels short — long labels cause overflow.
+-   `defaultLabel` is required on `LocalNavDropdown` — it is the placeholder shown before any item is selected.
+
+## Anti-patterns
+
+-   Do not use `LocalNavMenu` on tablet or mobile — use `LocalNavDropdown` instead.
+-   Do not omit scroll-spy logic — without it, `selectedItemIndex` will not reflect the current section.
+-   Do not place `LocalNavMenu` above the content — it must be a left sidebar.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/masthead.md b/docs/skills/cc-flagship-ds/resources/v4/components/masthead.md
new file mode 100644
index 0000000000..46b67fdf42
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/masthead.md
@@ -0,0 +1,14 @@
+# Masthead
+
+Import: `import { Masthead } from "@lifesg/react-design-system/masthead"`
+
+## Props
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | `false` | Stretch to the maximum width of the screen, with fixed padding |
+
+## Rules
+
+-   No mandatory props.
+-   `Masthead` is typically included via the `Navbar` `masthead` prop — use this standalone component only when rendering the masthead outside a Navbar context.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/menu.md b/docs/skills/cc-flagship-ds/resources/v4/components/menu.md
new file mode 100644
index 0000000000..51bd049f72
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/menu.md
@@ -0,0 +1,115 @@
+# Menu
+
+Import: `import { Menu } from "@lifesg/react-design-system/menu"`
+
+## When to use
+
+Use when a trigger element (button, avatar, nav link) should open a floating dropdown with a list of actions or links.
+
+Common use cases:
+
+-   Avatar / user account menu in authenticated dashboards
+-   Navbar link dropdown for sub-navigation
+
+## Sub-components
+
+`Menu`, `Menu.Content`, `Menu.Section`, `Menu.Item`, `Menu.Link`
+
+## Variants
+
+| Use case          | Structure                                                                                                                   |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| User account menu | First section: name + email as `Menu.Item`. Subsequent sections: `Menu.Link` for profile/settings, `Menu.Item` for sign out |
+| Nav link dropdown | Single `Menu.Section` with `Menu.Link` items                                                                                |
+| Action menu       | `Menu.Section` with `Menu.Item` elements and optional `label`                                                               |
+
+## Usage
+
+```tsx
+import { Menu } from "@lifesg/react-design-system/menu";
+import { Button } from "@lifesg/react-design-system/button";
+
+<Menu
+    menuContent={
+        <Menu.Content>
+            <Menu.Section showDivider={false}>
+                <Menu.Link href="/profile">Profile</Menu.Link>
+                <Menu.Link href="/settings">Settings</Menu.Link>
+            </Menu.Section>
+            <Menu.Section>
+                <Menu.Item label="Sign out" onClick={() => {}} />
+            </Menu.Section>
+        </Menu.Content>
+    }
+>
+    <Button.Default styleType="secondary">Account</Button.Default>
+</Menu>;
+```
+
+## Props
+
+### Menu
+
+Inherits `PopoverV2TriggerProps` (except `popoverContent`), plus:
+
+| Prop          | Type                                                                                                                                                                 | Default          | Description                                         |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | --------------------------------------------------- |
+| `menuContent` | `Menu.Content`                                                                                                                                                       | —                | The popover panel — **required**                    |
+| `position`    | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | `"bottom-start"` | Visual position of the menu relative to its trigger |
+| `data-testid` | `string`                                                                                                                                                             | `"menu"`         | Test identifier                                     |
+
+### Menu.Content
+
+Inherits `HTMLAttributes<HTMLDivElement>`, plus:
+
+| Prop          | Type                                                    | Default          | Description                                                   |
+| ------------- | ------------------------------------------------------- | ---------------- | ------------------------------------------------------------- |
+| `children`    | `Menu.Section \| Menu.Section[]`                        | —                | One or more `Menu.Section` elements — **required**            |
+| `overflow`    | `"visible" \| "hidden" \| "clip" \| "scroll" \| "auto"` | —                | Controls content overflow                                     |
+| `maxHeight`   | `number`                                                | —                | Max height in pixels; overflow behavior applies when exceeded |
+| `data-testid` | `string`                                                | `"menu-content"` | Test identifier                                               |
+
+### Menu.Section
+
+Inherits `HTMLAttributes<HTMLDivElement>`, plus:
+
+| Prop          | Type                                                   | Default          | Description                        |
+| ------------- | ------------------------------------------------------ | ---------------- | ---------------------------------- |
+| `children`    | `Menu.Item \| Menu.Link \| (Menu.Item \| Menu.Link)[]` | —                | Menu items or links — **required** |
+| `label`       | `string`                                               | —                | Optional section heading           |
+| `showDivider` | `boolean`                                              | `true`           | Show a divider above the section   |
+| `data-testid` | `string`                                               | `"menu-section"` | Test identifier                    |
+
+### Menu.Item
+
+Inherits `HTMLAttributes<HTMLLIElement>`, plus:
+
+| Prop          | Type                                           | Default       | Description                                                                      |
+| ------------- | ---------------------------------------------- | ------------- | -------------------------------------------------------------------------------- |
+| `label`       | `string`                                       | —             | Primary text for the menu item                                                   |
+| `subLabel`    | `string`                                       | —             | Secondary text shown below the label                                             |
+| `data-testid` | `string`                                       | `"menu-item"` | Test identifier                                                                  |
+| `onClick`     | `(e: React.MouseEvent<HTMLLIElement>) => void` | —             | Called when the item is clicked — inherited from `HTMLAttributes<HTMLLIElement>` |
+
+### Menu.Link
+
+Inherits `HTMLAttributes<HTMLAnchorElement>`, plus:
+
+| Prop          | Type     | Default       | Description     |
+| ------------- | -------- | ------------- | --------------- |
+| `data-testid` | `string` | `"menu-link"` | Test identifier |
+
+## Rules
+
+-   `Menu` wraps a trigger element as its child — the trigger can be any element (e.g. `Avatar`, `Button`, `NavbarLink`).
+-   Pass `Menu.Content` as the `menuContent` prop — not as a child of `Menu`.
+-   Use `Menu.Link` for navigation (href-based); use `Menu.Item` for in-page actions (onClick-based).
+-   Use `Menu.Section` with `showDivider` to visually separate unrelated groups of actions.
+-   For user account menus, always show the user's name and email as the first section.
+-   Use `position` to control which side of the trigger the menu appears on; default `"bottom-start"` suits most cases.
+
+## Anti-patterns
+
+-   Do not pass `Menu.Content` as a child of `Menu` — it must be passed as `menuContent`.
+-   Do not mix navigation links and action items in the same `Menu.Section` without a divider.
+-   Do not use `Menu.Item` for links that navigate to a new page — use `Menu.Link` instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/modal.md b/docs/skills/cc-flagship-ds/resources/v4/components/modal.md
new file mode 100644
index 0000000000..4b79a54efd
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/modal.md
@@ -0,0 +1,114 @@
+# Modal
+
+Import: `import { Modal } from "@lifesg/react-design-system/modal"`
+
+## When to use
+
+Use for focused interactions that interrupt the user's flow — confirmations, detail views, or short multi-field forms that do not warrant a new page.
+
+## Sub-components
+
+`Modal`, `Modal.Box`
+
+## Variants
+
+| Use case            | Notes                                                         |
+| ------------------- | ------------------------------------------------------------- |
+| Confirmation dialog | Title, description, and primary/secondary action buttons      |
+| Detail view         | Informational content with a close button                     |
+| Short form          | Minimal fields only; complex forms belong on a dedicated page |
+
+## Usage
+
+### Confirmation dialog
+
+```tsx
+import { useState } from "react";
+import { Modal } from "@lifesg/react-design-system/modal";
+import { Button } from "@lifesg/react-design-system/button";
+import { Text } from "@lifesg/react-design-system/text";
+
+const ConfirmDeleteModal = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+
+    const handleConfirm = () => {
+        // perform action
+        setShow(false);
+    };
+
+    return (
+        <>
+            <Button.Default onClick={() => setShow(true)}>
+                Delete item
+            </Button.Default>
+
+            <Modal show={show} enableOverlayClick onOverlayClick={handleClose}>
+                <Modal.Box showCloseButton onClose={handleClose}>
+                    <div style={{ padding: "2rem" }}>
+                        <Text.H3 style={{ marginBottom: "0.5rem" }}>
+                            Delete this item?
+                        </Text.H3>
+                        <Text.Body style={{ marginBottom: "1.5rem" }}>
+                            This action cannot be undone.
+                        </Text.Body>
+                        <div style={{ display: "flex", gap: "1rem" }}>
+                            <Button.Default
+                                styleType="secondary"
+                                onClick={handleClose}
+                            >
+                                Cancel
+                            </Button.Default>
+                            <Button.Default onClick={handleConfirm}>
+                                Confirm
+                            </Button.Default>
+                        </div>
+                    </div>
+                </Modal.Box>
+            </Modal>
+        </>
+    );
+};
+```
+
+## Props
+
+### Modal
+
+| Prop                    | Type                                     | Default    | Description                                                                                                              |
+| ----------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `show`                  | `boolean`                                | —          | Controls visibility — **required**                                                                                       |
+| `children`              | `JSX.Element`                            | —          | Modal content; parent element must be a valid HTML element or component that forwards a ref. Fragments are not supported |
+| `animationFrom`         | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Slide-in direction                                                                                                       |
+| `enableOverlayClick`    | `boolean`                                | —          | Allow clicking the overlay to dismiss                                                                                    |
+| `onOverlayClick`        | `() => void`                             | —          | Called when the overlay is clicked; requires `enableOverlayClick: true`                                                  |
+| `zIndex`                | `number`                                 | —          | Custom z-index (useful for stacked modals)                                                                               |
+| `rootComponentId`       | `string`                                 | —          | ID of the element to portal the modal into; defaults to `<body>`                                                         |
+| `dismissKeyboardOnShow` | `boolean`                                | `true`     | Dismiss mobile keyboard when modal opens                                                                                 |
+
+### Modal.Box
+
+| Prop              | Type         | Default | Description                                       |
+| ----------------- | ------------ | ------- | ------------------------------------------------- |
+| `showCloseButton` | `boolean`    | `true`  | Show the close button (×) in the top-right corner |
+| `onClose`         | `() => void` | —       | Called when the close button is clicked           |
+
+## Rules
+
+-   Always include `showCloseButton` on `Modal.Box` — the close button is the minimum required exit mechanism.
+-   `Modal` handles the overlay and animation. Always nest `Modal.Box` (or a custom content container) inside `Modal`.
+-   Fragments are not supported as direct children of `Modal`.
+-   Content inside `Modal.Box` scrolls automatically when it exceeds the screen height.
+-   Use `animationFrom="bottom"` for mobile-friendly sheet-style modals.
+-   Optionally also allow overlay dismissal via `enableOverlayClick` + `onOverlayClick`.
+-   Use Typography components for all text inside the modal — not raw HTML elements.
+-   Keep modal content focused — one task or decision per modal.
+-   Use illustrations (image above the title) for complex messages to reduce cognitive load; skip them for simple confirmations.
+
+## Anti-patterns
+
+-   Do not use a Fragment as a direct child of `Modal` — use a valid HTML element or a component that forwards a ref.
+-   Do not use modals for complex multi-step forms — navigate to a dedicated page instead.
+-   Do not stack modals unless using `zIndex` to manage layering explicitly.
+-   Do not omit `showCloseButton` — users must always have a way to exit the modal.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/navbar.md b/docs/skills/cc-flagship-ds/resources/v4/components/navbar.md
new file mode 100644
index 0000000000..d469355d22
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/navbar.md
@@ -0,0 +1,203 @@
+# Navbar
+
+Import: `import { Navbar } from "@lifesg/react-design-system/navbar"`
+
+## When to use
+
+Place at the top of every page. Required on all pages. Automatically collapses navigation items into a hamburger drawer on mobile.
+
+## Variants
+
+| `layout`    | When to use                                     |
+| ----------- | ----------------------------------------------- |
+| `"default"` | Centered content container — standard pages     |
+| `"stretch"` | Full-width content — must match Footer `layout` |
+
+## Usage
+
+### Complete Navbar with link items, a submenu, and an action button
+
+`NavItemProps` is a discriminated union on `itemType`. The default (no `itemType`) is a link item. Use `itemType: "component"` for custom elements like an avatar with a dropdown.
+
+```tsx
+import { useState } from "react";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+
+const AppNavbar = () => {
+    const [selectedId, setSelectedId] = useState("home");
+
+    return (
+        <Navbar
+            masthead
+            selectedId={selectedId}
+            onItemClick={(item) => item.id && setSelectedId(item.id)}
+            items={{
+                desktop: [
+                    // itemType defaults to "link"
+                    {
+                        id: "home",
+                        children: "Home",
+                        href: "/",
+                    },
+                    {
+                        id: "guides",
+                        children: "Guides",
+                        href: "/guides",
+                        // subMenu items share the same shape as top-level link items
+                        subMenu: [
+                            {
+                                id: "guides-start",
+                                children: "Getting started",
+                                href: "/guides/start",
+                            },
+                            {
+                                id: "guides-api",
+                                children: "API reference",
+                                href: "/guides/api",
+                            },
+                        ],
+                    },
+                    {
+                        // itemType: "component" — renders arbitrary JSX; no href or id needed
+                        itemType: "component",
+                        children: <UserAvatar />,
+                    },
+                ],
+            }}
+            actionButtons={{
+                desktop: [
+                    {
+                        type: "button",
+                        args: { children: "Log in", styleType: "secondary" },
+                    },
+                ],
+            }}
+            resources={{
+                primary: { brandName: "MyService", logoSrc: "/logo.svg" },
+            }}
+        />
+    );
+};
+```
+
+Key points:
+
+-   Omit `itemType` (or set `itemType: "link"`) for standard anchor items.
+-   `subMenu` accepts the same `NavItemCommonProps` shape as top-level items.
+-   `itemType: "component"` items take `children: JSX.Element`; they do not accept `id`, `href`, or `subMenu`.
+-   `selectedId` matches against the `id` field of link items to highlight the active page.
+
+## Props
+
+### Navbar
+
+| Prop                        | Type                                        | Default                    | Description                                       |
+| --------------------------- | ------------------------------------------- | -------------------------- | ------------------------------------------------- |
+| `items`                     | `NavItemsProps<T>`                          | —                          | Navigation link items — **required**              |
+| `resources`                 | `NavbarResourcesProps`                      | —                          | Brand logos (primary and optional secondary)      |
+| `actionButtons`             | `NavbarActionButtonsProps`                  | —                          | Action buttons for desktop and optional mobile    |
+| `selectedId`                | `string`                                    | —                          | ID of the currently active navigation item        |
+| `compress`                  | `boolean`                                   | `false`                    | Display navbar in compressed height               |
+| `fixed`                     | `boolean`                                   | `true`                     | Fix navbar position to the top of the viewport    |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                   | `[]`                       | Methods that should not dismiss the mobile drawer |
+| `hideNavBranding`           | `boolean`                                   | `false`                    | Hide brand logos                                  |
+| `hideNavElements`           | `boolean`                                   | `false`                    | Hide links and action buttons                     |
+| `hideLinkIndicator`         | `boolean`                                   | `false`                    | Hide the selected link indicator                  |
+| `masthead`                  | `boolean`                                   | `true`                     | Render the government masthead above the navbar   |
+| `layout`                    | `"default" \| "stretch"`                    | `"default"`                | Layout type for navbar content                    |
+| `headerLabel`               | `string`                                    | `"Main navigation menu"`   | Accessible label for the navigation header        |
+| `drawerLabel`               | `string`                                    | `"Mobile navigation menu"` | Accessible label for the mobile drawer            |
+| `onBrandClick`              | `(type: BrandType) => void`                 | —                          | Called when a brand icon is clicked               |
+| `onItemClick`               | `(item: NavItemProps<T>) => void`           | —                          | Called when a navigation item is clicked          |
+| `onActionButtonClick`       | `(actionButton: NavbarButtonProps) => void` | —                          | Called when an action button is clicked           |
+| `id`                        | `string`                                    | —                          | Unique identifier                                 |
+| `data-testid`               | `string`                                    | —                          | Test identifier                                   |
+
+### NavItemsProps
+
+| Prop      | Type                | Default | Description                                              |
+| --------- | ------------------- | ------- | -------------------------------------------------------- |
+| `desktop` | `NavItemProps<T>[]` | —       | Nav items for desktop — **required**                     |
+| `mobile`  | `NavItemProps<T>[]` | —       | Nav items for mobile; falls back to `desktop` if omitted |
+
+### NavItemProps
+
+Union of `NavItemLinkProps<T>` and `NavItemComponentProps`.
+
+**NavItemLinkProps**
+
+| Prop       | Type                      | Description        |
+| ---------- | ------------------------- | ------------------ |
+| `itemType` | `"link"`                  | Link-type nav item |
+| `subMenu`  | `NavItemCommonProps<T>[]` | Sub-menu items     |
+
+**NavItemComponentProps**
+
+| Prop       | Type          | Description                              |
+| ---------- | ------------- | ---------------------------------------- |
+| `itemType` | `"component"` | Custom component nav item — **required** |
+| `children` | `JSX.Element` | Custom component to render               |
+
+### NavItemCommonProps
+
+Inherits `TypographyLinkProps`, plus:
+
+| Prop          | Type     | Description                             |
+| ------------- | -------- | --------------------------------------- |
+| `id`          | `string` | Unique identifier; used by `selectedId` |
+| `options`     | `T`      | Additional props passed to the nav item |
+| `data-testid` | `string` | Test identifier                         |
+
+### NavbarActionButtonsProps
+
+| Prop      | Type                  | Default | Description                                                   |
+| --------- | --------------------- | ------- | ------------------------------------------------------------- |
+| `desktop` | `NavbarButtonProps[]` | —       | Action buttons for desktop — **required**                     |
+| `mobile`  | `NavbarButtonProps[]` | —       | Action buttons for mobile; falls back to `desktop` if omitted |
+
+### NavbarButtonProps
+
+| Prop            | Type                                        | Default | Description                                                  |
+| --------------- | ------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `type`          | `"download" \| "button" \| "component"`     | —       | Button type — **required**                                   |
+| `args`          | `ButtonProps \| NavbarButtonComponentProps` | —       | Props for the button                                         |
+| `uncollapsible` | `boolean`                                   | —       | Keep visible on mobile instead of collapsing into the drawer |
+
+### NavbarResourcesProps
+
+| Prop        | Type                  | Default       | Description                                                       |
+| ----------- | --------------------- | ------------- | ----------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | theme default | Primary branding — omit entirely to use the theme's built-in logo |
+| `secondary` | `NavbarBrandingProps` | —             | Secondary branding                                                |
+
+### NavbarBrandingProps
+
+| Prop        | Type     | Description                    |
+| ----------- | -------- | ------------------------------ |
+| `brandName` | `string` | Brand name of the website      |
+| `logoSrc`   | `string` | Image source of the brand logo |
+
+## Rules
+
+-   Always set `masthead` — all government services must display the masthead.
+-   Always provide a meaningful `id` on each `NavItemCommonProps` item — used by `selectedId` to highlight the active page.
+-   `items.desktop` is required; the component crashes without it.
+-   `items.mobile` is optional — falls back to `desktop` if omitted.
+-   `layout` must match the `Footer` `layout` prop; do not mix `"default"` and `"stretch"`.
+-   Limit action buttons to 2–3 maximum.
+-   Use SVG format for brand logos.
+-   When using `fixed`, add corresponding top padding to page content to prevent overlap.
+-   Set `uncollapsible: true` on action buttons that must remain visible on mobile (e.g. avatar).
+-   Use `itemType: "component"` for custom nav elements such as an avatar with a `Menu` dropdown.
+-   Pass `type: "component"` with `args: { render: <Element /> }` for custom action button elements.
+-   `BrandType` is `"primary" | "secondary"` — passed to `onBrandClick`.
+-   The `"download"` button type is pre-programmed for LifeSG purposes.
+-   `NavbarButtonComponentProps` accepts a `render: JSX.Element` field for custom components.
+
+## Anti-patterns
+
+-   Do not omit `masthead` — it is required for government compliance.
+-   Do not supply a custom `resources.primary.logoSrc` unless the service has its own brand logo — omit `resources` to let the theme render its built-in logo.
+-   Do not use `hideNavElements` as a default state — it is for special page states only (e.g. maintenance).
+-   Do not use `fixed: false` unless the layout explicitly requires a non-fixed header.
+-   Do not add more than 3 action buttons — the navbar becomes visually cluttered.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/notification-banner.md b/docs/skills/cc-flagship-ds/resources/v4/components/notification-banner.md
new file mode 100644
index 0000000000..3352c44733
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/notification-banner.md
@@ -0,0 +1,67 @@
+# NotificationBanner
+
+Import: `import { NotificationBanner } from "@lifesg/react-design-system/notification-banner"`
+
+## When to use
+
+Use for notices that must always be visible to the user — maintenance windows, policy changes, mandatory announcements. Unlike Toast, it does not auto-dismiss. Unlike Alert, it applies to the entire page, not a specific section.
+
+## Sub-components
+
+-   `NotificationBanner.Link` — Inherits `TypographyLinkProps`. Use for links within banner content.
+
+## HOC
+
+```ts
+withNotificationBanner(data: NotificationContentAttributes[])
+```
+
+### NotificationContentAttributes
+
+| Prop              | Type                                       | Default | Description                                      |
+| ----------------- | ------------------------------------------ | ------- | ------------------------------------------------ |
+| `type`            | `"text"` \| `"link"`                       | —       | Type of content — required                       |
+| `content`         | `string`                                   | —       | Text content — required                          |
+| `otherAttributes` | `TypographyLinkProps` \| `TypographyProps` | —       | Additional props passed to the content component |
+
+## Usage
+
+```tsx
+import { NotificationBanner } from "@lifesg/react-design-system/notification-banner";
+
+<NotificationBanner dismissible sticky onDismiss={() => {}}>
+    Scheduled maintenance on 1 Feb 2026, 2–4 AM.{" "}
+    <NotificationBanner.Link href="/status">
+        View status
+    </NotificationBanner.Link>
+</NotificationBanner>;
+```
+
+## Props
+
+| Prop                 | Type                                                | Default | Description                                  |
+| -------------------- | --------------------------------------------------- | ------- | -------------------------------------------- |
+| `children`           | `string` \| `JSX.Element` \| `JSX.Element[]`        | —       | Banner content                               |
+| `dismissible`        | `boolean`                                           | —       | Show dismiss button                          |
+| `visible`            | `boolean`                                           | —       | Control visibility externally                |
+| `icon`               | `JSX.Element`                                       | —       | Icon displayed in the banner                 |
+| `sticky`             | `boolean`                                           | —       | Fix banner to top on scroll                  |
+| `onDismiss`          | `() => void`                                        | —       | Called when banner is dismissed              |
+| `onClick`            | `(event: React.MouseEvent<HTMLDivElement>) => void` | —       | Called when banner is clicked                |
+| `maxCollapsedHeight` | `number`                                            | —       | Maximum visible height of content in px      |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>`     | —       | Action button at the bottom of the component |
+
+## Rules
+
+-   Place directly below the Navbar — above all page content.
+-   Use for page-wide or system-wide notices only — not for section-specific messages.
+-   Use `dismissible={false}` for mandatory notices users must not be able to dismiss.
+-   Use `NotificationBanner.Link` for all links within the banner — renders with the external link indicator automatically.
+-   Use `maxCollapsedHeight` for long notices to avoid overwhelming the layout.
+-   Use the `withNotificationBanner` HOC for banner content driven from a backend or external data source.
+
+## Anti-patterns
+
+-   Using NotificationBanner for section-specific messages — use Alert instead.
+-   Using raw anchor tags inside banner content — use `NotificationBanner.Link`.
+-   Placing the banner below page content — it must sit directly below the Navbar.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/pagination.md b/docs/skills/cc-flagship-ds/resources/v4/components/pagination.md
new file mode 100644
index 0000000000..d244b6dbd3
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/pagination.md
@@ -0,0 +1,104 @@
+# Pagination
+
+Import: `import { Pagination } from "@lifesg/react-design-system/pagination"`
+
+## When to use
+
+Use below lists or tables when content is split across multiple pages.
+
+## Usage
+
+### Basic pagination (1-based indexing)
+
+```tsx
+import { useState } from "react";
+import { Pagination } from "@lifesg/react-design-system/pagination";
+
+const ResultsList = () => {
+    const totalItems = 243;
+    const pageSize = 10;
+    // activePage is 1-based: page 1 is the first page, not page 0
+    const [activePage, setActivePage] = useState(1);
+
+    return (
+        <>
+            <MyResultsTable
+                items={results.slice(
+                    (activePage - 1) * pageSize,
+                    activePage * pageSize
+                )}
+            />
+            <Pagination
+                totalItems={totalItems}
+                pageSize={pageSize}
+                activePage={activePage}
+                onPageChange={(page) => setActivePage(page)} // page is 1-based
+                showFirstAndLastNav
+            />
+        </>
+    );
+};
+```
+
+### With page size changer
+
+`onPageSizeChange` receives `(page, pageSize)` — reset to page 1 when size changes.
+
+```tsx
+const [activePage, setActivePage] = useState(1);
+const [pageSize, setPageSize] = useState(10);
+
+<Pagination
+    totalItems={500}
+    pageSize={pageSize}
+    activePage={activePage}
+    onPageChange={(page) => setActivePage(page)}
+    onPageSizeChange={(page, size) => {
+        setPageSize(size);
+        setActivePage(page); // component resets to page 1 on size change
+    }}
+    showFirstAndLastNav
+    showPageSizeChanger
+/>;
+```
+
+## Props
+
+| Prop                  | Type                                       | Default        | Description                                                                            |
+| --------------------- | ------------------------------------------ | -------------- | -------------------------------------------------------------------------------------- |
+| `totalItems`          | `number`                                   | —              | Total number of items across all pages — **required**                                  |
+| `activePage`          | `number`                                   | —              | Currently active page (1-based) — **required**                                         |
+| `pageSize`            | `number`                                   | `10`           | Number of items per page                                                               |
+| `pageSizeOptions`     | `PageSizeItemProps<T>[]`                   | `[10, 20, 30]` | Options for the page size changer dropdown                                             |
+| `showFirstAndLastNav` | `boolean`                                  | `false`        | Show buttons to jump to the first and last pages                                       |
+| `showPageSizeChanger` | `boolean`                                  | `false`        | Show a page size changer dropdown (desktop only); selected option overrides `pageSize` |
+| `onPageChange`        | `(page: number) => void`                   | —              | Called when a page is selected                                                         |
+| `onPageSizeChange`    | `(page: number, pageSize: number) => void` | —              | Called when the page size changes                                                      |
+| `id`                  | `string`                                   | —              | Unique identifier                                                                      |
+| `className`           | `string`                                   | —              | Class selector                                                                         |
+| `data-testid`         | `string`                                   | —              | Test identifier                                                                        |
+
+## PageSizeItemProps
+
+| Prop    | Type     | Description                        |
+| ------- | -------- | ---------------------------------- |
+| `value` | `number` | Page size value                    |
+| `label` | `string` | Display label (e.g. `"10 / page"`) |
+
+## Rules
+
+-   `activePage` is 1-based — the first page is `1`, not `0`.
+-   Always provide `onPageChange` to update `activePage` when the user changes page.
+-   Provide `onPageSizeChange` when `showPageSizeChanger` is enabled.
+-   Always center-align pagination below the results list.
+-   Place pagination below the results — never above.
+-   When total pages exceed 7, the component automatically shows an ellipsis — no additional props needed.
+-   The page size changer is only visible in the desktop viewport.
+-   The selected option in the page size changer takes precedence over `pageSize`.
+
+## Anti-patterns
+
+-   Do not use `showFirstAndLastNav` and `showPageSizeChanger` together unless the dataset is large enough to warrant both — avoid cluttering the interface with excessive controls.
+-   Do not left- or right-align pagination.
+-   Do not place pagination above the results.
+-   Do not use `pageSize` and a `pageSizeOptions` selection simultaneously without handling `onPageSizeChange` — the changer selection overrides `pageSize`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/pill.md b/docs/skills/cc-flagship-ds/resources/v4/components/pill.md
new file mode 100644
index 0000000000..e29eab5f5b
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/pill.md
@@ -0,0 +1,58 @@
+# Pill
+
+Import: `import { Pill } from "@lifesg/react-design-system/pill"`
+
+## When to use
+
+Use to communicate a status — application state, approval outcome, or processing stage. For categories, filters, or tagging, use Tag instead.
+
+## Variants
+
+| `type`      | Usage                                                    |
+| ----------- | -------------------------------------------------------- |
+| `"outline"` | Subtle, secondary label — default for most uses          |
+| `"solid"`   | Higher emphasis — use when the status needs to stand out |
+
+| `colorType` | Semantic use                  |
+| ----------- | ----------------------------- |
+| `"green"`   | Success, active, approved     |
+| `"red"`     | Error, rejected, danger       |
+| `"yellow"`  | Warning, pending, in progress |
+| `"blue"`    | Informational                 |
+| `"grey"`    | Neutral, inactive, draft      |
+| `"primary"` | Theme primary color           |
+| `"black"`   | Default, no semantic meaning  |
+
+## Usage
+
+```tsx
+import { Pill } from "@lifesg/react-design-system/pill";
+
+<Pill type="outline" colorType="green">
+    Approved
+</Pill>;
+```
+
+## Props
+
+Inherits all `HTMLDivElement` attributes.
+
+| Prop        | Type                                                                                   | Default   | Description                             |
+| ----------- | -------------------------------------------------------------------------------------- | --------- | --------------------------------------- |
+| `type`      | `"solid"` \| `"outline"`                                                               | —         | Display style — required                |
+| `colorType` | `"black"` \| `"grey"` \| `"green"` \| `"yellow"` \| `"red"` \| `"blue"` \| `"primary"` | `"black"` | Color variant                           |
+| `icon`      | `JSX.Element`                                                                          | —         | Icon displayed to the left of the label |
+| `children`  | `string`                                                                               | —         | Label text                              |
+
+## Rules
+
+-   Use color semantically — do not use `"red"` for non-error states.
+-   Use `"solid"` sparingly — reserve for statuses that need emphasis.
+-   Keep label text to 1–2 words — text does not wrap inside a pill.
+-   Pill is a static, non-interactive label — it does not accept `onClick`. Use Tag with `interactive` for clickable labels.
+
+## Anti-patterns
+
+-   Using Pill for categories or filters — use Tag instead.
+-   Using `"red"` for non-error states.
+-   Labels longer than 2–3 words — text overflow is not handled.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/popover.md b/docs/skills/cc-flagship-ds/resources/v4/components/popover.md
new file mode 100644
index 0000000000..830c57144e
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/popover.md
@@ -0,0 +1,72 @@
+# Popover
+
+Import: `import { Popover, withPopover } from "@lifesg/react-design-system/popover"`
+
+## When to use
+
+Use to show supplementary information when a user interacts with (clicks or hovers over) an element. On mobile, the popover renders as a bottom modal sheet.
+
+## Variants
+
+Two usage patterns are available:
+
+-   **`withPopover` HOC** — wraps an existing element to add popover behaviour.
+-   **`Popover` component** — a standalone popover that you control manually.
+
+## Usage
+
+```tsx
+import { withPopover } from "@lifesg/react-design-system/popover";
+import { Button } from "@lifesg/react-design-system/button";
+
+{
+    /* Preferred: HOC wraps an existing element */
+}
+{
+    withPopover(
+        <Button.Default styleType="link">What is this?</Button.Default>,
+        { content: "This field requires your NRIC number.", trigger: "click" }
+    );
+}
+```
+
+## Props
+
+### withPopover
+
+```ts
+withPopover(component: JSX.Element, options: PopoverHOCOptionsProps): JSX.Element
+```
+
+**PopoverHOCOptionsProps**
+
+| Prop          | Type                    | Default   | Description                    |
+| ------------- | ----------------------- | --------- | ------------------------------ |
+| `content`     | `string \| JSX.Element` | —         | Popover content — **required** |
+| `trigger`     | `"click" \| "hover"`    | `"click"` | How the popover is triggered   |
+| `id`          | `string`                | —         | Unique identifier              |
+| `data-testid` | `string`                | —         | Test identifier                |
+
+**PopoverHOCProps (on the wrapped component)**
+
+| Prop               | Type         | Description                       |
+| ------------------ | ------------ | --------------------------------- |
+| `onPopoverAppear`  | `() => void` | Called when the popover appears   |
+| `onPopoverDismiss` | `() => void` | Called when the popover dismisses |
+
+### Popover
+
+| Prop            | Type                    | Default | Description                                                       |
+| --------------- | ----------------------- | ------- | ----------------------------------------------------------------- |
+| `children`      | `string \| JSX.Element` | —       | Popover content — **required**                                    |
+| `visible`       | `boolean`               | `false` | Controls visibility                                               |
+| `onMobileClose` | `() => void`            | —       | Called when the user dismisses the popover (modal form) on mobile |
+| `id`            | `string`                | —       | Unique identifier                                                 |
+| `className`     | `string`                | —       | Class selector                                                    |
+| `data-testid`   | `string`                | —       | Test identifier                                                   |
+
+## Rules
+
+-   Use `withPopover` for most cases — it handles trigger logic automatically.
+-   Use the `Popover` component directly when you need full manual control over visibility.
+-   On mobile viewports the Popover renders as a bottom modal sheet — provide `onMobileClose` to handle dismissal.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/progress-indicator.md b/docs/skills/cc-flagship-ds/resources/v4/components/progress-indicator.md
new file mode 100644
index 0000000000..810e663bfb
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/progress-indicator.md
@@ -0,0 +1,48 @@
+# ProgressIndicator
+
+Import: `import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator"`
+
+## When to use
+
+Use in multi-step forms or wizards to show the user's position within the flow.
+
+## Usage
+
+```tsx
+import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
+
+const steps = [
+    { label: "Personal details" },
+    { label: "Documents" },
+    { label: "Review" },
+];
+
+<ProgressIndicator
+    steps={steps}
+    currentIndex={1}
+    displayExtractor={(step) => step.label}
+/>;
+```
+
+## Props
+
+| Prop               | Type                  | Default | Description                                         |
+| ------------------ | --------------------- | ------- | --------------------------------------------------- |
+| `steps`            | `T[]`                 | —       | Array of step objects — **required**                |
+| `currentIndex`     | `number`              | `0`     | Zero-based index of the current step — **required** |
+| `displayExtractor` | `(item: T) => string` | —       | Derives the display label from each step object     |
+| `id`               | `string`              | —       | Unique identifier                                   |
+| `className`        | `string`              | —       | Class selector                                      |
+| `data-testid`      | `string`              | —       | Test identifier                                     |
+
+## Rules
+
+-   `currentIndex` is zero-based — the first step is `0`.
+-   Always provide `displayExtractor` when `steps` contains objects — without it, step labels will not render.
+-   Update `currentIndex` as the user moves between steps.
+-   Do not use `fadeColor` or `fadePosition` — these props are deprecated and have no effect in v3.
+
+## Anti-patterns
+
+-   Do not use ProgressIndicator on single-step pages.
+-   Do not use it as a general progress bar for loading states — use a loading spinner or skeleton instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/radio-button.md b/docs/skills/cc-flagship-ds/resources/v4/components/radio-button.md
new file mode 100644
index 0000000000..3bf863c5db
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/radio-button.md
@@ -0,0 +1,69 @@
+# RadioButton
+
+Import: `import { RadioButton } from "@lifesg/react-design-system/radio-button"`
+
+## When to use
+
+-   User must choose exactly one option from a small set (typically 2–5 options).
+-   Options are mutually exclusive.
+
+Prefer `Toggle` with `type="radio"` over bare `RadioButton` when building form inputs that need a visible card-style label container.
+
+## Variants
+
+| `displaySize` | When to use                    |
+| ------------- | ------------------------------ |
+| `"default"`   | Standard use                   |
+| `"small"`     | Dense layouts, inline controls |
+
+## Usage
+
+```tsx
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+<div role="radiogroup" aria-labelledby="group-label">
+    <label>
+        <RadioButton
+            name="plan"
+            value="basic"
+            checked={selected === "basic"}
+            onChange={(e) => {}}
+        />
+        Basic
+    </label>
+    <label>
+        <RadioButton
+            name="plan"
+            value="pro"
+            checked={selected === "pro"}
+            onChange={(e) => {}}
+        />
+        Pro
+    </label>
+</div>;
+```
+
+## Props
+
+Inherits all props from `React.InputHTMLAttributes<HTMLInputElement>` (e.g. `name`, `value`, `disabled`, `aria-*`).
+
+| Prop                    | Type                                               | Default     | Description                                                              |
+| ----------------------- | -------------------------------------------------- | ----------- | ------------------------------------------------------------------------ |
+| `displaySize`           | `"default"` \| `"small"`                           | `"default"` | Display size of the component                                            |
+| `checked`               | `boolean`                                          | —           | Controlled checked state                                                 |
+| `disabled`              | `boolean`                                          | —           | Disables the radio button — action is not executable                     |
+| `focusableWhenDisabled` | `boolean`                                          | —           | Keeps component focusable when disabled, preventing all user interaction |
+| `onChange`              | `(e: React.ChangeEvent<HTMLInputElement>) => void` | —           | Called when this radio button becomes selected                           |
+
+## Rules
+
+-   Always wrap a group in `role="radiogroup"` with a visible group label (`aria-labelledby`).
+-   Always set the same `name` on all buttons in a group for native radio behaviour.
+-   Always pair each button with a visible label — wrap in `<label>` or use `aria-label`.
+-   Never render a single `RadioButton` in isolation — radio inputs only make sense in groups.
+
+## Anti-patterns
+
+-   Do not use `RadioButton` for binary yes/no questions in forms — use `Toggle` with `type="yes"` / `type="no"`.
+-   Do not use `RadioButton` when multiple selections are allowed — use `Checkbox` instead.
+-   Do not omit the `name` prop — without it, browsers cannot enforce mutual exclusivity natively.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/schedule.md b/docs/skills/cc-flagship-ds/resources/v4/components/schedule.md
new file mode 100644
index 0000000000..54b98f0b2f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/schedule.md
@@ -0,0 +1,72 @@
+# Schedule
+
+Import: `import { Schedule } from "@lifesg/react-design-system/schedule"`
+
+## Sub-components
+
+-   `ScheduleEntityProps` — a service/resource row with its time slots
+-   `ScheduleSlotProps` — a single bookable timeslot cell
+-   `SchedulePopoverProps` — popover config for a slot
+
+## Props
+
+| Prop                    | Type                                                     | Default         | Description                                                                                |
+| ----------------------- | -------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------ |
+| `date` \*               | `string`                                                 | —               | Current displayed date (`YYYY-MM-DD`)                                                      |
+| `serviceData` \*        | `ScheduleEntityProps[]`                                  | —               | Data for each service row and its time slots                                               |
+| `onPreviousDayClick` \* | `(currentDate: string) => void`                          | —               | Called when the left arrow on the date navigator is clicked                                |
+| `onNextDayClick` \*     | `(currentDate: string) => void`                          | —               | Called when the right arrow on the date navigator is clicked                               |
+| `id`                    | `string`                                                 | —               | The identifier of the component                                                            |
+| `className`             | `string`                                                 | —               | The class selector of the component                                                        |
+| `data-testid`           | `string`                                                 | —               | The test identifier of the component                                                       |
+| `view`                  | `"day" \| "week"`                                        | `"day"`         | The view mode for the schedule component                                                   |
+| `emptyContentMessage`   | `string`                                                 | —               | Message shown when `serviceData` has no rows                                               |
+| `loading`               | `boolean`                                                | `false`         | Shows a loading animation when true                                                        |
+| `minTime`               | `string`                                                 | `"00:00"`       | Start time of the schedule (`HH:mm`)                                                       |
+| `maxTime`               | `string`                                                 | `"23:59"`       | End time of the schedule (`HH:mm`)                                                         |
+| `initialScrollTime`     | `string`                                                 | —               | Initial scroll position time (`HH:mm`); defaults to `minTime`                              |
+| `minDate`               | `string`                                                 | —               | Minimum navigable date (`YYYY-MM-DD`, inclusive)                                           |
+| `maxDate`               | `string`                                                 | —               | Maximum navigable date (`YYYY-MM-DD`, inclusive)                                           |
+| `blockedMessage`        | `string`                                                 | `"Unavailable"` | Custom text for blocked slots; truncated with ellipsis if slot is too narrow               |
+| `onCalendarDateSelect`  | `(currentDate: string) => void`                          | —               | Called when a date is picked from the dropdown calendar                                    |
+| `onTodayClick`          | `() => void`                                             | —               | Called when the Today button is clicked                                                    |
+| `onSlotClick`           | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | —               | Called when a timeslot cell is clicked                                                     |
+| `onClickHiddenSlots`    | `(hiddenServices: string[]) => void`                     | —               | Called in week view when the hidden-slots button is clicked; provides hidden service names |
+
+`*` = required
+
+## ScheduleEntityProps
+
+| Prop       | Type                  | Description                          |
+| ---------- | --------------------- | ------------------------------------ |
+| `name` \*  | `string`              | The name of the service or resource  |
+| `slots` \* | `ScheduleSlotProps[]` | Array of time slots for this service |
+| `id`       | `string`              | Identifier for the service entity    |
+
+## ScheduleSlotProps
+
+| Prop            | Type                                                     | Description                                                 |
+| --------------- | -------------------------------------------------------- | ----------------------------------------------------------- |
+| `startTime` \*  | `string`                                                 | Start time (`HH:mm`)                                        |
+| `endTime` \*    | `string`                                                 | End time (`HH:mm`)                                          |
+| `status` \*     | `"booked" \| "available" \| "blocked" \| "pending"`      | Determines slot visual style                                |
+| `date` \*       | `string`                                                 | Date for this timeslot (`YYYY-MM-DD`)                       |
+| `id`            | `string`                                                 | Identifier; passed to `onClick` and `onSlotClick` callbacks |
+| `capacity`      | `number`                                                 | Maximum capacity for this timeslot                          |
+| `booked`        | `number`                                                 | Number of current bookings                                  |
+| `customPopover` | `SchedulePopoverProps`                                   | Popover config for the slot                                 |
+| `onClick`       | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | Per-slot click callback                                     |
+
+## SchedulePopoverProps
+
+| Prop         | Type                                               | Default | Description                                        |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------- |
+| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover              |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered in the popover                    |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Hover delay in milliseconds (`hover` trigger only) |
+| `offset`     | `number`                                           | —       | Offset in px applied to the popover                |
+
+## Rules
+
+-   `date`, `serviceData`, `onPreviousDayClick`, and `onNextDayClick` are mandatory.
+-   Avoid combining a per-slot `onClick` with `customPopover` using `trigger: "click"` on the same slot — they conflict.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/sidenav.md b/docs/skills/cc-flagship-ds/resources/v4/components/sidenav.md
new file mode 100644
index 0000000000..e0027e0821
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/sidenav.md
@@ -0,0 +1,190 @@
+# Sidenav
+
+Import: `import { Sidenav } from "@lifesg/react-design-system/sidenav"`
+
+## When to use
+
+Use for section-level navigation in admin dashboards or portals. The Sidenav sits fixed to the left and fills the full viewport height below the Navbar, which is always present at the top.
+
+Do not use for:
+
+-   Consumer-facing pages (use Navbar nav items or LocalNav instead)
+-   Simple single-section apps
+
+## Sub-components
+
+```
+Sidenav                          ← fixed sidebar container
+├── Sidenav.Group                ← logical section (optional separator)
+│   ├── Sidenav.Item             ← top-level nav link (no children)
+│   ├── Sidenav.DrawerItem       ← expandable item with sub-links
+│   │   ├── Sidenav.DrawerSubitem
+│   │   └── Sidenav.DrawerSubitem
+│   └── Sidenav.Item
+└── Sidenav.Group
+    └── Sidenav.Item
+```
+
+`Sidenav.Group` is the only valid direct child of `Sidenav`. Use `Sidenav.Item` for leaf links, `Sidenav.DrawerItem` when a nav entry has sub-items. `Sidenav.DrawerSubitem` can only nest inside `Sidenav.DrawerItem`.
+
+## Variants
+
+| Depth    | Components used                              |
+| -------- | -------------------------------------------- |
+| 1 level  | `Sidenav` → `Sidenav.Group` → `Sidenav.Item` |
+| 2 levels | + `Sidenav.DrawerItem`                       |
+| 3 levels | + `Sidenav.DrawerSubitem`                    |
+
+## Usage
+
+### 2-group, 3-item nav with full nesting
+
+```tsx
+import { CalendarIcon } from "@lifesg/react-icons/calendar";
+import { DocIcon } from "@lifesg/react-icons/doc";
+import { Square2x2Icon } from "@lifesg/react-icons/square-2x2";
+import { useState } from "react";
+import { Sidenav } from "@lifesg/react-design-system/sidenav";
+
+const AdminSidenav = () => {
+    const [selectedId, setSelectedId] = useState("dashboard");
+
+    return (
+        <Sidenav>
+            {/* Group 1 — top-level items with no sub-items: onClick fires */}
+            <Sidenav.Group separator>
+                <Sidenav.Item
+                    id="dashboard"
+                    title="Dashboard"
+                    icon={<Square2x2Icon />}
+                    selected={selectedId === "dashboard"}
+                    onClick={(id) => setSelectedId(id)}
+                />
+            </Sidenav.Group>
+
+            {/* Group 2 — Reports has sub-items so onClick is omitted;
+                clicking it opens the drawer instead */}
+            <Sidenav.Group>
+                <Sidenav.Item
+                    id="reports"
+                    title="Reports"
+                    icon={<DocIcon />}
+                    selected={
+                        selectedId === "monthly-reports" ||
+                        selectedId === "annual-reports"
+                    }
+                >
+                    {/* DrawerItem with no children: onClick fires */}
+                    <Sidenav.DrawerItem
+                        id="monthly-reports"
+                        title="Monthly reports"
+                        onClick={(id) => setSelectedId(id)}
+                    />
+                    {/* DrawerItem with children: onClick is omitted */}
+                    <Sidenav.DrawerItem
+                        id="annual-reports"
+                        title="Annual reports"
+                        selected={selectedId === "annual-reports"}
+                    >
+                        <Sidenav.DrawerSubitem
+                            id="annual-summary"
+                            title="Summary"
+                            onClick={(id) => setSelectedId(id)}
+                        />
+                        <Sidenav.DrawerSubitem
+                            id="annual-detail"
+                            title="Detailed breakdown"
+                            onClick={(id) => setSelectedId(id)}
+                        />
+                    </Sidenav.DrawerItem>
+                </Sidenav.Item>
+                <Sidenav.Item
+                    id="bookings"
+                    title="Bookings"
+                    icon={<CalendarIcon />}
+                    selected={selectedId === "bookings"}
+                    onClick={(id) => setSelectedId(id)}
+                />
+            </Sidenav.Group>
+        </Sidenav>
+    );
+};
+```
+
+Key wiring notes:
+
+-   `onClick` on `Sidenav.Item` is only attached when the item has **no** `children` — if children are present, clicking opens the drawer instead and `onClick` is ignored.
+-   The same rule applies to `Sidenav.DrawerItem`: omit `onClick` when it wraps `DrawerSubitem` children.
+-   Track `selectedId` in parent state; pass `selected={selectedId === id}` down to whichever level is active.
+-   `separator` on `Sidenav.Group` draws a dividing line below that group.
+
+## Props
+
+### Sidenav
+
+| Prop          | Type              | Default     | Description                                         |
+| ------------- | ----------------- | ----------- | --------------------------------------------------- |
+| `children`    | `React.ReactNode` | —           | One or more `Sidenav.Group` elements — **required** |
+| `fixed`       | `boolean`         | `true`      | Fix the sidenav to the left of the viewport         |
+| `aria-label`  | `string`          | `"Sidebar"` | Accessible label for the sidenav                    |
+| `id`          | `string`          | —           | Unique identifier                                   |
+| `className`   | `string`          | —           | Class selector                                      |
+| `data-testid` | `string`          | —           | Test identifier                                     |
+
+### Sidenav.Group
+
+| Prop          | Type              | Default | Description                                        |
+| ------------- | ----------------- | ------- | -------------------------------------------------- |
+| `children`    | `React.ReactNode` | —       | One or more `Sidenav.Item` elements — **required** |
+| `separator`   | `boolean`         | —       | Show a bottom divider below the group              |
+| `aria-label`  | `string`          | —       | Accessible label describing the category of items  |
+| `id`          | `string`          | —       | Unique identifier                                  |
+| `className`   | `string`          | —       | Class selector                                     |
+| `data-testid` | `string`          | —       | Test identifier                                    |
+
+### Sidenav.Item
+
+| Prop          | Type                   | Default | Description                                                  |
+| ------------- | ---------------------- | ------- | ------------------------------------------------------------ |
+| `title`       | `string`               | —       | Display label — **required**                                 |
+| `icon`        | `React.ReactNode`      | —       | Icon displayed above the label — **required**                |
+| `children`    | `React.ReactNode`      | —       | One or more `Sidenav.DrawerItem` elements                    |
+| `selected`    | `boolean`              | —       | Mark this item as the active selection                       |
+| `onClick`     | `(id: string) => void` | —       | Called when clicked; only fires if the item has no sub-items |
+| `id`          | `string`               | —       | Unique identifier                                            |
+| `className`   | `string`               | —       | Class selector                                               |
+| `data-testid` | `string`               | —       | Test identifier                                              |
+
+### Sidenav.DrawerItem
+
+| Prop          | Type                   | Default | Description                                                  |
+| ------------- | ---------------------- | ------- | ------------------------------------------------------------ |
+| `title`       | `string`               | —       | Display label — **required**                                 |
+| `children`    | `React.ReactNode`      | —       | One or more `Sidenav.DrawerSubitem` elements                 |
+| `onClick`     | `(id: string) => void` | —       | Called when clicked; only fires if the item has no sub-items |
+| `id`          | `string`               | —       | Unique identifier                                            |
+| `className`   | `string`               | —       | Class selector                                               |
+| `data-testid` | `string`               | —       | Test identifier                                              |
+
+### Sidenav.DrawerSubitem
+
+| Prop          | Type                   | Default | Description                  |
+| ------------- | ---------------------- | ------- | ---------------------------- |
+| `title`       | `string`               | —       | Display label — **required** |
+| `onClick`     | `(id: string) => void` | —       | Called when item is clicked  |
+| `id`          | `string`               | —       | Unique identifier            |
+| `className`   | `string`               | —       | Class selector               |
+| `data-testid` | `string`               | —       | Test identifier              |
+
+## Rules
+
+-   Always provide `icon` on `Sidenav.Item` — it is required for the collapsed state.
+-   Maximum depth is 3 levels: `Item` → `DrawerItem` → `DrawerSubitem`.
+-   Use `Sidenav.Group` with `separator` to visually separate unrelated sections.
+-   `onClick` on `Sidenav.Item` and `Sidenav.DrawerItem` only fires when the item has no children — do not attach click handlers to items that have sub-items.
+
+## Anti-patterns
+
+-   Do not omit `icon` on `Sidenav.Item` — the component is designed around icon + label.
+-   Do not nest deeper than 3 levels.
+-   Do not use `Sidenav` on consumer-facing pages — it is suited to admin portals.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/singpass-button.md b/docs/skills/cc-flagship-ds/resources/v4/components/singpass-button.md
new file mode 100644
index 0000000000..cbe26bc11d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/singpass-button.md
@@ -0,0 +1,15 @@
+# SingpassButton
+
+Import: `import { SingpassButton } from "@lifesg/react-design-system/singpass-button"`
+
+## Props
+
+Inherits all props from `HTMLButtonElement`.
+
+| Prop        | Type                             | Default          | Description                |
+| ----------- | -------------------------------- | ---------------- | -------------------------- |
+| `styleType` | `"red-filled" \| "white-filled"` | `"white-filled"` | Visual style of the button |
+
+## Rules
+
+-   Do not custom style — Singpass branding guidelines require using the component as-is.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/smart-app-banner.md b/docs/skills/cc-flagship-ds/resources/v4/components/smart-app-banner.md
new file mode 100644
index 0000000000..ad4ca844d0
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/smart-app-banner.md
@@ -0,0 +1,29 @@
+# SmartAppBanner
+
+Import: `import { SmartAppBanner } from "@lifesg/react-design-system/smart-app-banner"`
+
+## Props
+
+| Prop           | Type                         | Default              | Description                                                                     |
+| -------------- | ---------------------------- | -------------------- | ------------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                    | Whether the SmartAppBanner is displayed                                         |
+| `href` \*      | `string`                     | —                    | Destination URL when the banner is clicked                                      |
+| `content` \*   | `SmartAppBannerContentProps` | —                    | Content of the banner                                                           |
+| `onDismiss` \* | `() => void`                 | —                    | Called when the banner is dismissed                                             |
+| `offset`       | `number`                     | `0`                  | Sets the `top` value in px                                                      |
+| `icon`         | `string`                     | Life SG app icon URL | URL for the app icon                                                            |
+| `animated`     | `boolean`                    | `false`              | Adds a slide-down animation on appearance                                       |
+| `ref`          | `React.Ref<HTMLDivElement>`  | —                    | Ref for the banner element                                                      |
+| `onClick`      | `() => void`                 | —                    | Additional behaviour on press (non-dismiss area); default opens link in new tab |
+
+`*` = required
+
+## SmartAppBannerContentProps
+
+| Prop                 | Type     | Default | Description                                                                    |
+| -------------------- | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*           | `string` | —       | Display title                                                                  |
+| `buttonLabel` \*     | `string` | —       | Button text                                                                    |
+| `buttonAriaLabel` \* | `string` | —       | Aria label for the button                                                      |
+| `numberOfStars` \*   | `number` | —       | Stars to display; decimals accepted; `NaN` or negative hides the stars display |
+| `message`            | `string` | —       | Description below the title                                                    |
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/tab.md b/docs/skills/cc-flagship-ds/resources/v4/components/tab.md
new file mode 100644
index 0000000000..83f0a08b7d
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/tab.md
@@ -0,0 +1,85 @@
+# Tab
+
+Import: `import { Tab } from "@lifesg/react-design-system/tab"`
+
+## When to use
+
+Use to switch between related views within the same context — not for navigating between pages.
+
+## Sub-components
+
+```
+Tab                          ← tab strip container, manages active state
+├── Tab.Item                 ← individual tab (title + panel content)
+├── Tab.Item
+└── Tab.Item
+```
+
+All direct children of `Tab` must be `Tab.Item`. `Tab.Item` renders both the tab label and its associated panel content.
+
+## Variants
+
+| Mode                         | When to use                                |
+| ---------------------------- | ------------------------------------------ |
+| Uncontrolled (default)       | Tab manages its own active state           |
+| Controlled (`currentActive`) | Parent needs to control which tab is shown |
+
+## Props
+
+### Tab
+
+| Prop                     | Type                                     | Default | Description                                                   |
+| ------------------------ | ---------------------------------------- | ------- | ------------------------------------------------------------- |
+| `children`               | `JSX.Element \| JSX.Element[]`           | —       | `Tab.Item` elements — **required**                            |
+| `initialActive`          | `number`                                 | `0`     | Index of the initially active tab (uncontrolled)              |
+| `currentActive`          | `number`                                 | —       | Controlled active tab index; disables internal state when set |
+| `onTabClick`             | `(title: string, index: number) => void` | —       | Called when a tab selector is clicked                         |
+| `fullWidthIndicatorLine` | `boolean`                                | —       | Extend the bottom border to the full container width          |
+| `fadeColor`              | `string[] \| FadeColorSet`               | —       | Scroll fade color on mobile; set to match page background     |
+| `headingLevel`           | `number`                                 | `2`     | Heading level for tab labels                                  |
+| `id`                     | `string`                                 | —       | Unique identifier                                             |
+| `className`              | `string`                                 | —       | Class selector                                                |
+| `data-testid`            | `string`                                 | —       | Test identifier                                               |
+
+### Tab.Item
+
+| Prop          | Type                           | Default | Description                                  |
+| ------------- | ------------------------------ | ------- | -------------------------------------------- |
+| `title`       | `string`                       | —       | Tab selector label — **required**            |
+| `children`    | `JSX.Element \| JSX.Element[]` | —       | Tab panel content — **required**             |
+| `titleAddon`  | `TitleAddonProps`              | —       | Custom addon displayed next to the tab label |
+| `width`       | `string`                       | —       | Custom width of the tab selector             |
+| `id`          | `string`                       | —       | Unique identifier                            |
+| `className`   | `string`                       | —       | Class selector                               |
+| `data-testid` | `string`                       | —       | Test identifier                              |
+
+### TitleAddonProps
+
+| Prop       | Type                | Default   | Description                                 |
+| ---------- | ------------------- | --------- | ------------------------------------------- |
+| `content`  | `JSX.Element`       | —         | The addon element (e.g. a `Badge`)          |
+| `position` | `"left" \| "right"` | `"right"` | Position of the addon relative to the label |
+
+### FadeColorSet
+
+| Prop    | Type       | Description                 |
+| ------- | ---------- | --------------------------- |
+| `left`  | `string[]` | Color(s) for the left fade  |
+| `right` | `string[]` | Color(s) for the right fade |
+
+## Rules
+
+-   When `currentActive` is set, the component is in controlled mode — you must update it via `onTabClick`.
+-   Tab order is determined by the order of `Tab.Item` children.
+-   Keep tab labels short — labels truncate beyond 20 characters on tablet and mobile.
+-   Use controlled mode (`currentActive` + `onTabClick`) only when the parent needs to sync tab state with external logic (e.g. URL params, deep links).
+-   Use `titleAddon` with a `Badge` to show counts or status indicators on tab labels.
+-   Set `headingLevel` to match the component's position in the page heading hierarchy.
+-   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
+
+## Anti-patterns
+
+-   Do not use tabs for page-level navigation — use Navbar or LocalNav instead.
+-   Do not use more than 5–6 tabs — consider a different navigation pattern for many sections.
+-   Do not use long labels — they truncate on mobile and tablet.
+-   Do not set `currentActive` without also providing `onTabClick` — the tab state will be stuck.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/tag.md b/docs/skills/cc-flagship-ds/resources/v4/components/tag.md
new file mode 100644
index 0000000000..d7446e6e14
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/tag.md
@@ -0,0 +1,71 @@
+# Tag
+
+Import: `import { Tag } from "@lifesg/react-design-system/tag"`
+
+## When to use
+
+Use to label categories, apply filters, or tag items. Can be static or interactive — set `interactive` to render as a button for toggleable filters or selectable categories. For status labels, use Pill instead.
+
+## Variants
+
+| `type`      | Usage                                                 |
+| ----------- | ----------------------------------------------------- |
+| `"outline"` | Subtle, secondary label — default for most uses       |
+| `"solid"`   | Higher emphasis — use when the tag needs to stand out |
+
+| `colorType` | Semantic use                  |
+| ----------- | ----------------------------- |
+| `"green"`   | Success, active, approved     |
+| `"red"`     | Error, rejected, danger       |
+| `"yellow"`  | Warning, pending, in progress |
+| `"blue"`    | Informational                 |
+| `"grey"`    | Neutral, inactive, draft      |
+| `"primary"` | Theme primary color           |
+| `"black"`   | Default, no semantic meaning  |
+
+## Usage
+
+```tsx
+import { Tag } from "@lifesg/react-design-system/tag";
+
+{
+    /* Static category tag */
+}
+<Tag type="outline" colorType="blue">
+    Health
+</Tag>;
+
+{
+    /* Interactive filter tag */
+}
+<Tag type="solid" colorType="primary" interactive onClick={() => {}}>
+    Finance
+</Tag>;
+```
+
+## Props
+
+Inherits all `HTMLElement` attributes.
+
+| Prop           | Type                                                                                   | Default   | Description                                  |
+| -------------- | -------------------------------------------------------------------------------------- | --------- | -------------------------------------------- |
+| `type`         | `"solid"` \| `"outline"`                                                               | —         | Display style — required                     |
+| `colorType`    | `"black"` \| `"grey"` \| `"green"` \| `"yellow"` \| `"red"` \| `"blue"` \| `"primary"` | `"black"` | Color variant                                |
+| `icon`         | `JSX.Element`                                                                          | —         | Icon displayed alongside the label           |
+| `iconPosition` | `"left"` \| `"right"`                                                                  | `"left"`  | Position of the icon relative to the label   |
+| `interactive`  | `boolean`                                                                              | `false`   | Renders as a `<button>` — use with `onClick` |
+| `children`     | `string`                                                                               | —         | Label text                                   |
+
+## Rules
+
+-   When `interactive` is `true`, the component renders as a `<button>` with an extended touch target on mobile.
+-   Always pair `interactive` with `onClick` — interactive tags are larger on mobile to extend the touch target.
+-   Use color semantically — do not use `"red"` for non-error states.
+-   Keep label text short — text does not wrap inside a tag.
+-   Use Tag for categories, filters, and tagging — use Pill for statuses.
+
+## Anti-patterns
+
+-   Using Tag for status labels — use Pill instead.
+-   Setting `interactive` without providing an `onClick` handler.
+-   Using `"red"` for non-error states.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/text-list.md b/docs/skills/cc-flagship-ds/resources/v4/components/text-list.md
new file mode 100644
index 0000000000..e027238d46
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/text-list.md
@@ -0,0 +1,44 @@
+# TextList
+
+Import: `import { TextList } from "@lifesg/react-design-system/text-list"`
+
+## When to use
+
+Use for semantic list content. For navigation links, use `LinkList` instead.
+
+## Sub-components
+
+| Sub-component | Renders | When to use                                  |
+| ------------- | ------- | -------------------------------------------- |
+| `TextList.Ul` | `<ul>`  | Unordered list — items without a sequence    |
+| `TextList.Ol` | `<ol>`  | Ordered list — numbered or lettered sequence |
+
+## Props
+
+### TextList.Ul
+
+| Prop           | Type                                                    | Default  | Description                                                        |
+| -------------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------------ |
+| `children`     | `JSX.Element \| JSX.Element[]`                          | —        | `<li>` elements                                                    |
+| `bulletType`   | `"disc" \| "circle" \| "square" \| "none" \| ReactNode` | `"disc"` | Bullet style — pass a ReactNode (e.g. an icon) for a custom bullet |
+| `size`         | `TypographySizeType`                                    | —        | Typography size scale                                              |
+| `bottomMargin` | `number`                                                | —        | Bottom margin in px                                                |
+| `data-testid`  | `string`                                                | —        | Test identifier                                                    |
+
+### TextList.Ol
+
+| Prop               | Type                                          | Default     | Description                                       |
+| ------------------ | --------------------------------------------- | ----------- | ------------------------------------------------- |
+| `children`         | `JSX.Element \| JSX.Element[]`                | —           | `<li>` elements                                   |
+| `counterType`      | `"decimal" \| "lower-alpha" \| "lower-roman"` | `"decimal"` | Counter style                                     |
+| `counterSeparator` | `string`                                      | —           | Character after the counter (e.g. `"."` or `")"`) |
+| `reversed`         | `boolean`                                     | `false`     | Count downward                                    |
+| `start`            | `number`                                      | `1`         | Starting counter value                            |
+| `size`             | `TypographySizeType`                          | —           | Typography size scale                             |
+| `bottomMargin`     | `number`                                      | —           | Bottom margin in px                               |
+| `data-testid`      | `string`                                      | —           | Test identifier                                   |
+
+## Rules
+
+-   Children must be `<li>` elements.
+-   Use `bulletType` as a `ReactNode` to render a custom icon bullet — the icon is automatically marked `aria-hidden`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar-week.md b/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar-week.md
new file mode 100644
index 0000000000..868a56a006
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar-week.md
@@ -0,0 +1,67 @@
+# TimeSlotBarWeek
+
+Import: `import { TimeSlotBarWeek } from "@lifesg/react-design-system/time-slot-bar-week"`
+
+## Sub-components
+
+-   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
+-   `TimeSlot` — shape of each slot in the `slots` map
+-   `TimeSlotBarStyleAttributes` — visual styling for a slot
+
+## Props
+
+| Prop                   | Type                                         | Default      | Description                                                                                        |
+| ---------------------- | -------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------- |
+| `slots` \*             | `{ [date: string]: TimeSlot[] }`             | —            | Time slots keyed by date (`YYYY-MM-DD`); falls back to disabled pattern if not provided for a date |
+| `className`            | `string`                                     | —            | Class selector for the component                                                                   |
+| `data-testid`          | `string`                                     | —            | The test identifier for the component                                                              |
+| `id`                   | `string`                                     | —            | The unique identifier for the component                                                            |
+| `variant`              | `"flexible" \| "fixed"`                      | `"flexible"` | The variant of the rendered timeslot bars                                                          |
+| `interval`             | `number`                                     | `30`         | Duration each cell represents in minutes                                                           |
+| `startTime`            | `string`                                     | —            | Minimum time displayed (`HH:mm`; full hours only, e.g. `"08:00"`)                                  |
+| `endTime`              | `string`                                     | —            | Maximum time displayed (`HH:mm`; full hours only)                                                  |
+| `minDate`              | `string`                                     | —            | Minimum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
+| `maxDate`              | `string`                                     | —            | Maximum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
+| `disabledDates`        | `string[]`                                   | —            | Dates to disable (`YYYY-MM-DD`)                                                                    |
+| `value`                | `string`                                     | —            | Currently selected date (`YYYY-MM-DD`)                                                             |
+| `currentCalendarDate`  | `string`                                     | —            | Initial date visible in the week view (`YYYY-MM-DD`)                                               |
+| `maxVisibleCellHeight` | `number`                                     | —            | Maximum combined cell height before truncation                                                     |
+| `showNavigationHeader` | `boolean`                                    | `true`       | Shows month/year dropdown and navigation arrows                                                    |
+| `enableSelection`      | `boolean`                                    | `true`       | Specifies if a date can be selected                                                                |
+| `onChange`             | `(value: string) => void`                    | —            | Called when the user selects a day; returns `YYYY-MM-DD`                                           |
+| `onWeekDisplayChange`  | `(value: YearMonthWeekDisplay) => void`      | —            | Called when the visible week changes                                                               |
+| `onSlotClick`          | `(date: string, timeSlot: TimeSlot) => void` | —            | Called when a timeslot is clicked                                                                  |
+
+`*` = required
+
+## YearMonthWeekDisplay
+
+| Prop    | Type                                                | Description                                            |
+| ------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
+| `year`  | `number`                                            | Visible year                                           |
+| `month` | `number`                                            | Visible month (1–12)                                   |
+
+## TimeSlot
+
+| Prop              | Type                         | Description                        |
+| ----------------- | ---------------------------- | ---------------------------------- |
+| `id` \*           | `string`                     | Unique identifier of the slot      |
+| `startTime` \*    | `string`                     | Start time (`HH:mm`)               |
+| `endTime` \*      | `string`                     | End time (`HH:mm`)                 |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                     |
+| `label`           | `string`                     | Text content within the slot cell  |
+| `clickable`       | `boolean`                    | Whether the slot cell is clickable |
+
+## TimeSlotBarStyleAttributes
+
+| Prop                 | Type                     | Default     | Description                                       |
+| -------------------- | ------------------------ | ----------- | ------------------------------------------------- |
+| `backgroundColor` \* | `string`                 | —           | The color of the slot                             |
+| `styleType`          | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
+| `backgroundColor2`   | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
+
+## Rules
+
+-   `slots` is mandatory.
+-   `startTime`/`endTime` on the component must be full hours (e.g. `"08:00"`, `"13:00"`).
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar.md b/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar.md
new file mode 100644
index 0000000000..0474d1f581
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar.md
@@ -0,0 +1,42 @@
+# TimeSlotBar
+
+Import: `import { TimeSlotBar } from "@lifesg/react-design-system/time-slot-bar"`
+
+## Props
+
+| Prop                     | Type                           | Default     | Description                                                                 |
+| ------------------------ | ------------------------------ | ----------- | --------------------------------------------------------------------------- |
+| `slots` \*               | `TimeSlot[]`                   | —           | Time slots for the bar                                                      |
+| `startTime` \*           | `string`                       | —           | Start time of the bar in `HH:mm` (minutes in 15-min blocks: 00, 15, 30, 45) |
+| `endTime` \*             | `string`                       | —           | End time of the bar in `HH:mm` (minutes in 15-min blocks)                   |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —           | Called when a time slot is selected                                         |
+| `variant`                | `"default" \| "minified"`      | `"default"` | Display variant                                                             |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —           | Default style when no slot is specified for a time period                   |
+| `initialScrollTime`      | `string`                       | —           | Initial scroll offset time in `HH:mm`                                       |
+| `roundInitialScrollTime` | `boolean`                      | `true`      | Rounds `initialScrollTime` to the nearest 30-min interval                   |
+| `onClick`                | `() => void`                   | —           | Called when the bar is selected (useful when no slots specified)            |
+| `className`              | `string`                       | —           | Class selector of the component                                             |
+| `data-testid`            | `string`                       | —           | Test identifier of the component                                            |
+
+`*` = required
+
+## TimeSlot
+
+| Prop              | Type                         | Default | Description                                |
+| ----------------- | ---------------------------- | ------- | ------------------------------------------ |
+| `id` \*           | `string`                     | —       | Unique identifier of the slot              |
+| `startTime` \*    | `string`                     | —       | Slot start time in `HH:mm` (15-min blocks) |
+| `endTime` \*      | `string`                     | —       | Slot end time in `HH:mm` (15-min blocks)   |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | —       | Styling for this slot                      |
+| `label`           | `string`                     | —       | Text content within the slot cell          |
+| `clickable`       | `boolean`                    | —       | Whether the slot cell is clickable         |
+
+## TimeSlotBarStyleAttributes
+
+| Prop                    | Type                     | Default     | Description                                                            |
+| ----------------------- | ------------------------ | ----------- | ---------------------------------------------------------------------- |
+| `backgroundColor` \*    | `string`                 | —           | Slot color                                                             |
+| `styleType`             | `"default" \| "stripes"` | `"default"` | Style type of the slot                                                 |
+| `backgroundColor2`      | `string`                 | —           | Secondary color; used with `styleType="stripes"`                       |
+| `hoverBackgroundColor`  | `string`                 | —           | Background on hover; only when `clickable`                             |
+| `hoverBackgroundColor2` | `string`                 | —           | Secondary hover color for `styleType="stripes"`; only when `clickable` |
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-week-view.md b/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-week-view.md
new file mode 100644
index 0000000000..3bd1c452c0
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-week-view.md
@@ -0,0 +1,63 @@
+# TimeSlotWeekView
+
+Import: `import { TimeSlotWeekView } from "@lifesg/react-design-system/time-slot-week-view"`
+
+## Sub-components
+
+-   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
+-   `TimeSlot` — shape of each slot in the `slots` map
+-   `TimeSlotBarStyleAttributes` — visual styling for a slot
+
+## Props
+
+| Prop                   | Type                                         | Default | Description                                                                                        |
+| ---------------------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------- |
+| `slots` \*             | `{ [date: string]: TimeSlot[] }`             | —       | Time slots keyed by date (`YYYY-MM-DD`); falls back to disabled pattern if not provided for a date |
+| `className`            | `string`                                     | —       | Class selector for the component                                                                   |
+| `data-testid`          | `string`                                     | —       | The test identifier for the component                                                              |
+| `id`                   | `string`                                     | —       | The unique identifier for the component                                                            |
+| `minDate`              | `string`                                     | —       | Minimum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
+| `maxDate`              | `string`                                     | —       | Maximum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
+| `disabledDates`        | `string[]`                                   | —       | Dates to disable (`YYYY-MM-DD`)                                                                    |
+| `value`                | `string`                                     | —       | Currently selected date (`YYYY-MM-DD`)                                                             |
+| `currentCalendarDate`  | `string`                                     | —       | Initial date visible in the week view (`YYYY-MM-DD`)                                               |
+| `showNavigationHeader` | `boolean`                                    | `true`  | Shows month/year dropdown and navigation arrows                                                    |
+| `enableSelection`      | `boolean`                                    | `true`  | Specifies if a date can be selected                                                                |
+| `onChange`             | `(value: string) => void`                    | —       | Called when the user selects a day; returns `YYYY-MM-DD`                                           |
+| `onWeekDisplayChange`  | `(value: YearMonthWeekDisplay) => void`      | —       | Called when the visible week changes                                                               |
+| `onSlotClick`          | `(date: string, timeSlot: TimeSlot) => void` | —       | Called when a timeslot is clicked                                                                  |
+
+`*` = required
+
+## YearMonthWeekDisplay
+
+| Prop    | Type                                                | Description                                            |
+| ------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
+| `year`  | `number`                                            | Visible year                                           |
+| `month` | `number`                                            | Visible month (1–12)                                   |
+
+## TimeSlot
+
+| Prop              | Type                         | Description                                                       |
+| ----------------- | ---------------------------- | ----------------------------------------------------------------- |
+| `id` \*           | `string`                     | Unique identifier of the slot                                     |
+| `startTime` \*    | `string`                     | Start time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45) |
+| `endTime` \*      | `string`                     | End time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45)   |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                                                    |
+| `label`           | `string`                     | Text content within the slot cell                                 |
+| `clickable`       | `boolean`                    | Whether the slot cell is clickable                                |
+
+## TimeSlotBarStyleAttributes
+
+| Prop             | Type                     | Default     | Description                                       |
+| ---------------- | ------------------------ | ----------- | ------------------------------------------------- |
+| `color` \*       | `string`                 | —           | The color of the slot                             |
+| `styleType`      | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
+| `secondaryColor` | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
+
+## Rules
+
+-   `slots` is mandatory.
+-   `TimeSlot` minutes must be in 15-minute blocks (00, 15, 30, 45).
+-   `TimeSlotBarStyleAttributes` uses `color`/`secondaryColor` — not `backgroundColor`/`backgroundColor2` as in `TimeSlotBarWeek`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/timeline.md b/docs/skills/cc-flagship-ds/resources/v4/components/timeline.md
new file mode 100644
index 0000000000..14abfcb7d5
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/timeline.md
@@ -0,0 +1,59 @@
+# Timeline
+
+Import: `import { Timeline } from "@lifesg/react-design-system/timeline"`
+
+## When to use
+
+Use to communicate a process, application history, or sequence of steps. Use the `numeric` variant for numbered step-by-step instructions.
+
+## Sub-components
+
+### TimelineItemProps
+
+| Prop       | Type                                                                                                         | Default | Description                                            |
+| ---------- | ------------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------ |
+| `title`    | `string`                                                                                                     | —       | Item title — required                                  |
+| `content`  | `JSX.Element`                                                                                                | —       | Item content — required                                |
+| `variant`  | `"completed" \| "current" \| "upcoming-active" \| "upcoming-inactive" \| "numeric" \| "error" \| "disabled"` | —       | Visual state of the item indicator                     |
+| `statuses` | `PillProps[]`                                                                                                | —       | Status pills shown alongside the item (max 2 rendered) |
+
+## Variants
+
+| `variant`             | Usage                                |
+| --------------------- | ------------------------------------ |
+| `"completed"`         | Step or event is done                |
+| `"current"`           | Step currently in progress           |
+| `"upcoming-active"`   | Next actionable step                 |
+| `"upcoming-inactive"` | Future step, not yet actionable      |
+| `"error"`             | Step has an error                    |
+| `"disabled"`          | Step is not available                |
+| `"numeric"`           | Numbered step — use for instructions |
+
+## Props
+
+| Prop                         | Type                  | Default | Description                                              |
+| ---------------------------- | --------------------- | ------- | -------------------------------------------------------- |
+| `items`                      | `TimelineItemProps[]` | —       | Array of timeline items — required                       |
+| `title`                      | `string`              | —       | Section title shown above the timeline                   |
+| `className`                  | `string`              | —       | Class selector                                           |
+| `startCol`                   | `number`              | —       | CSS grid column start (when wrapped in a grid container) |
+| `colSpan`                    | `number`              | —       | CSS grid column span (when wrapped in a grid container)  |
+| `counterOffset`              | `number`              | `0`     | Starting offset for `numeric` variant indicators         |
+| `data-testid`                | `string`              | —       | Test identifier                                          |
+| `data-base-indicator-testid` | `string`              | —       | Test identifier for item indicators                      |
+
+## Rules
+
+-   The first item defaults to `variant="current"` and subsequent items default to `variant="upcoming-active"` when `variant` is not specified.
+-   Only a maximum of 2 `statuses` pills will render per item regardless of how many are provided.
+-   `counterOffset` shifts the numeric counter: if `offset=2`, the first item shows `3`.
+-   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
+-   Use `counterOffset` when showing a partial sequence (e.g. steps 3–5 of a larger flow).
+-   Use `statuses` with `PillProps` — follow Pill color semantics (see `pill.md`).
+-   Use `"numeric"` variant consistently across all items in an instruction list — do not mix with status variants.
+
+## Anti-patterns
+
+-   Mixing `"numeric"` and status variants in the same timeline — choose one paradigm per use case.
+-   Providing more than 2 status pills per item — only 2 will render.
+-   Using Timeline for non-sequential content — use a list or table instead.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/timetable.md b/docs/skills/cc-flagship-ds/resources/v4/components/timetable.md
new file mode 100644
index 0000000000..46ecf46701
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/timetable.md
@@ -0,0 +1,82 @@
+# Timetable
+
+Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
+
+## Props
+
+| Prop                      | Type                            | Default   | Description                                                               |
+| ------------------------- | ------------------------------- | --------- | ------------------------------------------------------------------------- |
+| `date` \*                 | `string`                        | —         | Current displayed date in `YYYY-MM-DD` format                             |
+| `rowData` \*              | `TimeTableRowData[]`            | —         | Data used to render each unique row                                       |
+| `loading` \*              | `boolean`                       | —         | Shows loading animation while true                                        |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void` | —         | Called when left arrow is clicked on the date navigator                   |
+| `onNextDayClick` \*       | `(currentDate: string) => void` | —         | Called when right arrow is clicked on the date navigator                  |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void` | —         | Called when a calendar date is picked in the dropdown                     |
+| `minTime`                 | `string`                        | `"00:00"` | Start time of the timetable in `HH:mm` format                             |
+| `maxTime`                 | `string`                        | `"23:00"` | End time of the timetable in `HH:mm` format                               |
+| `minDate`                 | `string`                        | —         | Minimum navigation date in `YYYY-MM-DD` format (inclusive)                |
+| `maxDate`                 | `string`                        | —         | Maximum navigation date in `YYYY-MM-DD` format (inclusive)                |
+| `initialScrollTime`       | `string`                        | —         | Initial scroll offset time in `HH:mm`                                     |
+| `roundInitialScrollTime`  | `boolean`                       | `true`    | Rounds `initialScrollTime` to the nearest 15-min grid interval            |
+| `totalRecords`            | `number`                        | —         | Total record count; if omitted, the total records section is not rendered |
+| `emptyContentMessage`     | `string`                        | —         | Message shown when `totalRecords=0` or `rowData=[]`                       |
+| `showCurrentDateAsToday`  | `boolean`                       | —         | Shows today's date as "Today"                                             |
+| `showDateAsShortForm`     | `boolean`                       | —         | Shows the date text in short form                                         |
+| `onRefresh`               | `() => void`                    | —         | Called when refresh button is clicked; if omitted, button is not rendered |
+| `onPage`                  | `() => void`                    | —         | Called when pagination occurs                                             |
+| `id`                      | `string`                        | —         | Identifier of the component                                               |
+| `className`               | `string`                        | —         | Class selector of the component                                           |
+| `data-testid`             | `string`                        | —         | Test identifier of the component                                          |
+
+`*` = required
+
+## TimeTableRowData
+
+| Prop                    | Type                                                       | Default   | Description                                               |
+| ----------------------- | ---------------------------------------------------------- | --------- | --------------------------------------------------------- |
+| `name` \*               | `string`                                                   | —         | Row header name                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                   | —         | Array of row cells; sorted by start time automatically    |
+| `id`                    | `string`                                                   | —         | Row identifier; passed to `onRowNameClick`                |
+| `subtitle`              | `string \| JSX.Element`                                    | —         | Row header subtitle                                       |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                    | —         | Custom popover for the row header                         |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                    | —         | Custom popover for auto-filled blocked cells              |
+| `rowMinTime`            | `string`                                                   | `minTime` | Row start time; blocked cells are auto-filled before this |
+| `rowMaxTime`            | `string`                                                   | `maxTime` | Row end time; blocked cells are auto-filled after this    |
+| `onRowNameClick`        | `(rowData: TimeTableRowData, e: React.MouseEvent) => void` | —         | Called when the row header name is clicked                |
+
+## TimeTableRowCellData
+
+| Prop                  | Type                                                            | Default | Description                                                        |
+| --------------------- | --------------------------------------------------------------- | ------- | ------------------------------------------------------------------ |
+| `startTime` \*        | `string`                                                        | —       | Cell start time in `HH:mm` (duration must be a multiple of 15 min) |
+| `endTime` \*          | `string`                                                        | —       | Cell end time in `HH:mm` (duration must be a multiple of 15 min)   |
+| `id`                  | `string`                                                        | —       | Cell identifier; passed to `onClick`                               |
+| `status`              | `"filled" \| "blocked" \| "default" \| "pending" \| "disabled"` | —       | Cell status, determines rendering style                            |
+| `title`               | `string`                                                        | —       | Title shown for this cell                                          |
+| `subtitle`            | `string`                                                        | —       | Subtitle shown for this cell                                       |
+| `customPopover`       | `TimeTablePopoverProps`                                         | —       | Custom popover for the cell                                        |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                  | —       | Custom style attributes; falls back to default row bar colors      |
+| `onClick`             | `(data: TimeTableRowCellData, e: React.MouseEvent) => void`     | —       | Called when the cell is clicked                                    |
+
+## TimeTablePopoverProps
+
+| Prop         | Type                                               | Default | Description                            |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------- |
+| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover  |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Popover content                        |
+| `delay`      | `{ open: number, close: number }`                  | —       | Hover delay in ms (hover trigger only) |
+| `offset`     | `number`                                           | —       | Offset in px for the popover           |
+
+## TimeTableCellStyleAttributes
+
+| Prop                      | Type                                           | Description                                                                      |
+| ------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------- |
+| `backgroundColor`         | `string \| (props: ThemeStyleProps) => string` | Main background color                                                            |
+| `altBackgroundColor`      | `string \| (props: ThemeStyleProps) => string` | Alternate background color for striped displays                                  |
+| `hoverBackgroundColor`    | `string \| (props: ThemeStyleProps) => string` | Background on hover                                                              |
+| `altHoverBackgroundColor` | `string \| (props: ThemeStyleProps) => string` | Alternate background on hover                                                    |
+| `styleType`               | `"default" \| "solid" \| "stripes"`            | Display style; defaults to cell type (blocked/pending = striped, others = solid) |
+
+## Rules
+
+-   Do not combine `onClick` on a cell with a `trigger="click"` popover on the same cell — they conflict.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/toast.md b/docs/skills/cc-flagship-ds/resources/v4/components/toast.md
new file mode 100644
index 0000000000..3ddb0924f1
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/toast.md
@@ -0,0 +1,67 @@
+# Toast
+
+Import: `import { Toast } from "@lifesg/react-design-system/toast"`
+
+## When to use
+
+Use for brief, non-blocking feedback on system or user actions — "Changes saved", "Upload complete", "Request failed". Does not replace persistent callouts — use Alert for section-specific notices.
+
+## Sub-components
+
+### ActionButtonProps
+
+| Prop      | Type         | Default | Description                                         |
+| --------- | ------------ | ------- | --------------------------------------------------- |
+| `label`   | `string`     | —       | Label of the action button — required               |
+| `onClick` | `() => void` | —       | Called when the action button is clicked — required |
+
+## Variants
+
+| `type`      | When to use                   |
+| ----------- | ----------------------------- |
+| `"success"` | Action completed successfully |
+| `"error"`   | Action failed or system error |
+| `"warning"` | Completed with caution        |
+| `"info"`    | Neutral status update         |
+
+## Usage
+
+```tsx
+import { Toast } from "@lifesg/react-design-system/toast";
+
+<Toast
+    type="success"
+    label="Changes saved successfully."
+    autoDismiss
+    onDismiss={() => {}}
+/>;
+```
+
+## Props
+
+Inherits all `HTMLDivElement` attributes.
+
+| Prop              | Type                                          | Default     | Description                                      |
+| ----------------- | --------------------------------------------- | ----------- | ------------------------------------------------ |
+| `type`            | `"success" \| "warning" \| "error" \| "info"` | `"success"` | Status type — required                           |
+| `label`           | `string \| JSX.Element`                       | —           | Toast content — required                         |
+| `title`           | `string \| JSX.Element`                       | —           | Optional heading above the label                 |
+| `autoDismiss`     | `boolean`                                     | `false`     | Auto-dismiss after `autoDismissTime`             |
+| `autoDismissTime` | `number`                                      | `4000`      | Duration in ms before auto-dismiss               |
+| `onDismiss`       | `() => void`                                  | —           | Called when Toast is dismissed (by user or auto) |
+| `fixed`           | `boolean`                                     | `true`      | Fix to top of viewport on scroll                 |
+| `actionButton`    | `ActionButtonProps`                           | —           | Optional action button rendered in the Toast     |
+
+## Rules
+
+-   `autoDismissTime` only takes effect when `autoDismiss` is `true`.
+-   Use `autoDismiss` for non-critical updates — keep visible for errors that require user action.
+-   Use `actionButton` for recoverable errors (retry, undo).
+-   Use `title` + `label` together when the toast message has a heading and a description.
+-   Do not use Toast for persistent notices — use Alert or NotificationBanner instead.
+
+## Anti-patterns
+
+-   Using Toast for errors that require user action without providing an `actionButton`.
+-   Setting `autoDismiss` on error toasts — errors should remain visible until the user dismisses them.
+-   Replacing Alert with Toast for section-specific inline messages.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/toggle.md b/docs/skills/cc-flagship-ds/resources/v4/components/toggle.md
new file mode 100644
index 0000000000..6136e67c45
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/toggle.md
@@ -0,0 +1,120 @@
+# Toggle
+
+Import: `import { Toggle } from "@lifesg/react-design-system/toggle"`
+
+## When to use
+
+-   Form inputs for boolean choices, single/multi-option selection, and yes/no questions.
+-   Preferred over bare `Checkbox` and `RadioButton` when building form inputs that need a card-style visible label container.
+
+## Variants
+
+| `type`       | When to use                                                  |
+| ------------ | ------------------------------------------------------------ |
+| `"checkbox"` | Multiple options can be selected or deselected independently |
+| `"radio"`    | Exactly one option must be selected — cannot be deselected   |
+| `"yes"`      | Binary yes answer — use with a paired `type="no"` Toggle     |
+| `"no"`       | Binary no answer — use with a paired `type="yes"` Toggle     |
+
+| `styleType`   | When to use                                                  |
+| ------------- | ------------------------------------------------------------ |
+| `"default"`   | Standard bordered card                                       |
+| `"no-border"` | Borderless — for contexts where the border is visually noisy |
+
+| `type`       | Behaviour                            |
+| ------------ | ------------------------------------ |
+| `"checkbox"` | Allows deselection — standard toggle |
+| `"radio"`    | No deselection — radio-style         |
+| `"yes"`      | No deselection — tick indicator      |
+| `"no"`       | No deselection — cross indicator     |
+
+## Usage
+
+```tsx
+import { Toggle } from "@lifesg/react-design-system/toggle";
+import { Form } from "@lifesg/react-design-system/form";
+
+{/* Checkbox group */}
+<Form.Label>Select your preferences</Form.Label>
+<Toggle type="checkbox" indicator checked={emailChecked} onChange={(e) => {}}>
+  Email notifications
+</Toggle>
+<Toggle type="checkbox" indicator checked={smsChecked} onChange={(e) => {}}>
+  SMS notifications
+</Toggle>
+```
+
+## Props
+
+| Prop                    | Type                                                   | Default      | Description                                                              |
+| ----------------------- | ------------------------------------------------------ | ------------ | ------------------------------------------------------------------------ |
+| `children`              | `string`                                               | —            | Main selector label — **required**                                       |
+| `type`                  | `"checkbox" \| "radio" \| "yes" \| "no"`               | `"checkbox"` | Selection behaviour and indicator icon                                   |
+| `styleType`             | `"default" \| "no-border"`                             | `"default"`  | Whether a border is displayed                                            |
+| `indicator`             | `boolean`                                              | —            | Show the type indicator icon (tick for `"yes"`, cross for `"no"`)        |
+| `checked`               | `boolean`                                              | —            | Controlled checked/selected state                                        |
+| `subLabel`              | `string \| JSX.Element \| () => JSX.Element`           | —            | Secondary text below the main label                                      |
+| `childrenMaxLines`      | `{desktop: number, mobile: number}`                    | —            | Max visible lines in the main label; additional lines are truncated      |
+| `disabled`              | `boolean`                                              | —            | Disables the element — non-interactable                                  |
+| `focusableWhenDisabled` | `boolean`                                              | —            | Keeps component focusable when disabled, preventing all user interaction |
+| `error`                 | `boolean`                                              | —            | Shows error state styling                                                |
+| `removable`             | `boolean`                                              | `false`      | Shows a remove button                                                    |
+| `onRemove`              | `() => void`                                           | —            | Called when the remove button is clicked                                 |
+| `compositeSection`      | `CompositeSectionProps`                                | —            | Collapsible subsection displayed below label and subLabel                |
+| `useContentWidth`       | `boolean`                                              | —            | Changes minimum container width to fit content                           |
+| `onChange`              | `(event: React.ChangeEvent<HTMLInputElement>) => void` | —            | Called when the Toggle is selected or deselected                         |
+| `name`                  | `string`                                               | —            | Name of the element                                                      |
+| `id`                    | `string`                                               | —            | Unique identifier of the element                                         |
+| `className`             | `string`                                               | —            | Class selector of the element                                            |
+| `data-testid`           | `string`                                               | —            | Test identifier of the element                                           |
+
+## CompositeSectionProps
+
+| Prop              | Type                      | Default | Description                                                      |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------- |
+| `children`        | `string \| JSX.Element`   | —       | Contents of the subsection — **required**                        |
+| `collapsible`     | `boolean`                 | `true`  | Whether the subsection is collapsible                            |
+| `initialExpanded` | `boolean`                 | —       | Initial expanded state — only applies when `collapsible` is true |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown when the subsection is collapsed                    |
+
+## Rules
+
+-   `children` (main label) is mandatory.
+-   `indicator` is recommended when using `type="yes"` or `type="no"` to show the tick/cross icon.
+-   Always pass `indicator` for `type="checkbox"`, `type="radio"`, `type="yes"`, and `type="no"` — it shows the relevant icon (tick, dot, tick, cross) inside the toggle.
+-   Use `type="radio"` when the option cannot be deselected (e.g. single-select from a list).
+-   Use `compositeSection` to reveal dependent fields when a Toggle is selected — do not conditionally render fields outside the Toggle.
+-   Use `subLabel` for secondary supporting text — do not embed long descriptions in `children`.
+-   Use `childrenMaxLines` to constrain label height in dense list layouts.
+-   Place a `Form.Label` above each toggle group to provide the question or field label.
+
+### Spacing
+
+| Layout                    | Gap                                  |
+| ------------------------- | ------------------------------------ |
+| Stacked (checkbox, radio) | `spacing-8` between each Toggle      |
+| Side by side (yes / no)   | `spacing-16` between the two Toggles |
+
+```tsx
+{/* Stacked — checkbox or radio */}
+<Form.Label>Declaration</Form.Label>
+<ToggleWrapper> {/* margin-bottom: spacing-32 — matches Form field built-in */}
+  <Toggle indicator checked={a} onChange={...}>Option A</Toggle>
+  <div style={{ marginBottom: Spacing["spacing-8"] }} />
+  <Toggle indicator checked={b} onChange={...}>Option B</Toggle>
+</ToggleWrapper>
+
+{/* Side by side — yes / no */}
+<Form.Label>Do you have a disability?</Form.Label>
+<YesNoGroup> {/* display: flex; gap: spacing-16 */}
+  <Toggle type="yes" indicator checked={val === "yes"} onChange={...}>Yes</Toggle>
+  <Toggle type="no"  indicator checked={val === "no"}  onChange={...}>No</Toggle>
+</YesNoGroup>
+```
+
+## Anti-patterns
+
+-   Do not use bare `Checkbox` or `RadioButton` in forms when a labelled card container is needed — use `Toggle` instead.
+-   Do not conditionally render dependent fields outside the Toggle — use `compositeSection`.
+-   Do not use `type="yes"` or `type="no"` without pairing both options together in the UI.
+-   Do not omit `indicator` for any Toggle type — it is required for all variants.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/typography.md b/docs/skills/cc-flagship-ds/resources/v4/components/typography.md
new file mode 100644
index 0000000000..08881eca38
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/typography.md
@@ -0,0 +1,92 @@
+# Typography
+
+Import: `import { Typography } from "@lifesg/react-design-system/typography"`
+
+## When to use
+
+Use Typography components to render text content — headings, paragraphs, and links. Do not use for parent containers that have text children; use Font tokens instead (see `foundations/typography.md`).
+
+## Sub-components
+
+**Headings:** `Typography.HeadingXXL`, `Typography.HeadingXL`, `Typography.HeadingLG`, `Typography.HeadingMD`, `Typography.HeadingSM`, `Typography.HeadingXS`
+
+**Body:** `Typography.BodyBL`, `Typography.BodyMD`, `Typography.BodySM`, `Typography.BodyXS`
+
+**Links:** `Typography.LinkBL`, `Typography.LinkMD`, `Typography.LinkSM`, `Typography.LinkXS`
+
+## Variants
+
+| Component         | Default element | Usage                                  |
+| ----------------- | --------------- | -------------------------------------- |
+| `HeadingXXL`      | `h1`            | Hero/page-level title                  |
+| `HeadingXL`       | `h2`            | Page title or primary section heading  |
+| `HeadingLG`       | `h3`            | Section heading                        |
+| `HeadingMD`       | `h4`            | Subsection heading                     |
+| `HeadingSM`       | —               | Card heading, secondary heading        |
+| `HeadingXS`       | —               | Small heading                          |
+| `BodyBL`          | —               | Default paragraph text                 |
+| `BodyMD`          | —               | Medium body text                       |
+| `BodySM`          | —               | Helper text                            |
+| `BodyXS`          | —               | Metadata, timestamps                   |
+| `LinkBL/MD/SM/XS` | `<a>`           | Inline links, sized to match body text |
+
+## Usage
+
+```tsx
+import { Typography } from "@lifesg/react-design-system/typography";
+
+<>
+    <Typography.HeadingXL>Page title</Typography.HeadingXL>
+    <Typography.BodyBL paragraph>
+        Supporting body text for the section. Use{" "}
+        <Typography.LinkMD href="/learn-more">
+            link components
+        </Typography.LinkMD>{" "}
+        for inline anchors.
+    </Typography.BodyBL>
+</>;
+```
+
+## Props
+
+### Heading/Body props
+
+Inherits `HTMLElement` attributes.
+
+| Prop        | Type                                           | Default     | Description                                     |
+| ----------- | ---------------------------------------------- | ----------- | ----------------------------------------------- |
+| `as`        | `string`                                       | —           | Override rendered HTML element (e.g. `as="h1"`) |
+| `weight`    | `"regular" \| "semibold" \| "bold" \| "light"` | `"regular"` | Font weight                                     |
+| `inline`    | `boolean`                                      | —           | Display inline instead of block                 |
+| `paragraph` | `boolean`                                      | `false`     | Add bottom margin for text block separation     |
+| `maxLines`  | `number`                                       | —           | Truncate after N lines with ellipsis            |
+
+### Link props
+
+Inherits `HTMLAnchorElement` attributes.
+
+| Prop             | Type                                           | Default       | Description                  |
+| ---------------- | ---------------------------------------------- | ------------- | ---------------------------- |
+| `weight`         | `"regular" \| "semibold" \| "bold" \| "light"` | `"regular"`   | Font weight                  |
+| `external`       | `boolean`                                      | —             | Show external link indicator |
+| `underlineStyle` | `"underline" \| "none"`                        | `"underline"` | Text decoration              |
+
+## Rules
+
+-   Default HTML elements: `HeadingXXL` → `h1`, `HeadingXL` → `h2`, `HeadingLG` → `h3`, `HeadingMD` → `h4`.
+-   Text color is not set by the component — apply via `styled()` using Colour tokens.
+-   Do not pass `color` as a prop — `TypographyProps` extends `HTMLAttributes` and forwards the value to the DOM, triggering a React warning.
+-   Do not use Typography for parent containers — use Font tokens instead.
+-   Heading components render default HTML elements — use the `as` prop when visual size and reading order don't match.
+-   Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
+-   Apply text color via `styled()` using Colour tokens — never pass `color` as a prop.
+-   Use the `weight` prop to adjust emphasis, not opacity.
+-   Links are underlined by default — use `underlineStyle="none"` only when context makes the link obvious.
+-   Always use the `external` prop for links that navigate outside the domain.
+
+## Anti-patterns
+
+-   Passing `color` directly as a prop — it forwards a Colour object to the DOM and triggers a React warning.
+-   Skipping heading levels for visual sizing — use the `as` prop instead.
+-   Using `<h1>` raw HTML inside a Typography component instead of `as="h1"`.
+-   Using Typography on a container element to inherit font styles — use Font tokens.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/uneditable-section.md b/docs/skills/cc-flagship-ds/resources/v4/components/uneditable-section.md
new file mode 100644
index 0000000000..74e4b5bd7f
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/components/uneditable-section.md
@@ -0,0 +1,94 @@
+# UneditableSection
+
+Import: `import { UneditableSection } from "@lifesg/react-design-system/uneditable-section"`
+
+## When to use
+
+-   Displaying read-only label/value pairs on summary or review screens.
+-   Showing retrieved or pre-filled data the user cannot edit.
+
+## Sub-components
+
+-   `UneditableSection.ItemSection` — wraps a group of items (extends `HTMLUListElement`)
+-   `UneditableSection.Item` — individual label/value item
+
+## Usage
+
+```tsx
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+
+<UneditableSection
+    title="Personal details"
+    items={[
+        { label: "Full name", value: "Jane Tan", displayWidth: "half" },
+        { label: "Date of birth", value: "1 Jan 1990", displayWidth: "half" },
+        { label: "Address", value: "123 Example Road, Singapore 123456" },
+    ]}
+/>;
+```
+
+## Props
+
+### UneditableSection
+
+| Prop            | Type                                         | Default | Description                                        |
+| --------------- | -------------------------------------------- | ------- | -------------------------------------------------- |
+| `items`         | `UneditableSectionItemProps[]`               | —       | Items displayed in label/value format              |
+| `title`         | `string`                                     | —       | Section title (rendered as `Text.H3`)              |
+| `description`   | `string`                                     | —       | Section description (rendered as `Text.Body`)      |
+| `topSection`    | `JSX.Element`                                | —       | Custom section rendered above the items            |
+| `bottomSection` | `JSX.Element`                                | —       | Custom section rendered below the items            |
+| `children`      | `JSX.Element \| JSX.Element[]`               | —       | Full body; enables custom composition              |
+| `background`    | `boolean`                                    | `true`  | Whether a background is rendered                   |
+| `stretch`       | `boolean`                                    | —       | Contents take full width of the section            |
+| `fullWidth`     | `boolean`                                    | —       | Removes default spacing/grid from `Layout.Content` |
+| `onMask`        | `(item: UneditableSectionItemProps) => void` | —       | Called when the mask icon is clicked               |
+| `onUnmask`      | `(item: UneditableSectionItemProps) => void` | —       | Called when the unmask icon is clicked             |
+| `onTryAgain`    | `(item: UneditableSectionItemProps) => void` | —       | Called when "Try again?" indicator is clicked      |
+| `id`            | `string`                                     | —       | Unique id of the component                         |
+| `className`     | `string`                                     | —       | Class selector of the component                    |
+| `data-testid`   | `string`                                     | —       | Test identifier of the component                   |
+
+### UneditableSection.ItemSection
+
+Inherits all props from `HTMLUListElement`.
+
+| Prop      | Type      | Default | Description                                       |
+| --------- | --------- | ------- | ------------------------------------------------- |
+| `stretch` | `boolean` | —       | Contents take full width of the UneditableSection |
+
+### UneditableSectionItemProps
+
+| Prop                | Type                        | Default  | Description                                                 |
+| ------------------- | --------------------------- | -------- | ----------------------------------------------------------- |
+| `label` \*          | `string`                    | —        | Label of the item                                           |
+| `value` \*          | `string \| React.ReactNode` | —        | Value of the item; masking only works for string values     |
+| `displayWidth`      | `"half" \| "full"`          | `"full"` | Column span of the item                                     |
+| `id`                | `string`                    | —        | Unique identifier of the item                               |
+| `maskRange`         | `number[]`                  | —        | [start, end] index range to mask                            |
+| `unmaskRange`       | `number[]`                  | —        | [start, end] index range to NOT mask                        |
+| `maskRegex`         | `RegExp`                    | —        | Regex matched content replaced with `maskChar`              |
+| `maskTransformer`   | `(value) => string`         | —        | Function to transform the value                             |
+| `maskChar`          | `string`                    | `•`      | Character used for masking                                  |
+| `maskState`         | `"masked" \| "unmasked"`    | —        | If undefined, no mask/unmask controls are rendered          |
+| `maskLoadingState`  | `"loading" \| "fail"`       | —        | Loading state for mask/unmask action                        |
+| `disableMaskUnmask` | `boolean`                   | —        | Value is masked/unmasked but no indicator is rendered       |
+| `alert`             | `AlertProps`                | —        | Alert rendered under the section item                       |
+| `onMask`            | `() => void`                | —        | Called when mask icon is clicked (on Item sub-component)    |
+| `onUnmask`          | `() => void`                | —        | Called when unmask icon is clicked (on Item sub-component)  |
+| `onTryAgain`        | `() => void`                | —        | Called when "Try again?" is clicked (on Item sub-component) |
+
+`*` = required
+
+## Rules
+
+-   Always supply `items` with a `label` and `value` for each field.
+-   Use `displayWidth: "half"` for short values (names, dates, codes) to show two per row; omit for long values.
+-   Show `"—"` for any unanswered or empty field rather than leaving `value` blank.
+-   Set `background={false}` when rendering inside a `BoxContainer` — the container already provides the visual boundary; the default background creates an unwanted nested box appearance.
+-   Set `fullWidth` when rendering inside a container such as `BoxContainer` to remove the default `Layout.Content` spacing and allow content to fill the full width.
+
+## Anti-patterns
+
+-   Do not use `UneditableSection` for editable fields — use `Form.*` components with `readOnly` instead.
+-   Do not nest `UneditableSection` inside another `UneditableSection`.
diff --git a/docs/skills/cc-flagship-ds/resources/v4/patterns/setup.md b/docs/skills/cc-flagship-ds/resources/v4/patterns/setup.md
new file mode 100644
index 0000000000..611d47b198
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/patterns/setup.md
@@ -0,0 +1,162 @@
+# App Setup — Flagship v4
+
+Full project setup for `@lifesg/react-design-system` v4. Work through all four steps before writing any component code.
+
+---
+
+## Step 1 — Install packages
+
+```bash
+pnpm add @lifesg/react-design-system @lifesg/react-icons @floating-ui/react @mui/icons-material
+```
+
+Do NOT install `styled-components` — it is not used in v4.
+
+---
+
+## Step 2 — CSS (src/index.css)
+
+Three imports are required. Order matters.
+
+```css
+/* 1. Font — CDN path is v3 but fonts are shared across versions */
+@import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
+
+/* 2. Base token sheet — defines every --fds-* CSS custom property */
+@import "@lifesg/react-design-system/theme/styles/default.css";
+
+/* 3. Theme overrides — brand/primary colour values for the chosen theme */
+@import "@lifesg/react-design-system/theme/styles/lifesg.css";
+
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: var(--fds-font-family-body, "Open Sans", sans-serif);
+}
+
+a {
+    cursor: pointer;
+    text-decoration: none;
+}
+
+button,
+select,
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+::file-selector-button {
+    color: inherit;
+}
+
+#root {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* v4 ThemeProvider renders a wrapper div as the only child of #root.
+   Make it the flex column so Navbar/main/Footer are proper flex children
+   and the footer sticks to the bottom on short pages. */
+#root > div {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+```
+
+**`default.css` is required.** It defines all `--fds-spacing-*`, `--fds-colour-*`, `--fds-radius-*` etc. Without it every CSS variable resolves to nothing and components are unstyled.
+
+Replace `lifesg.css` with your chosen theme slug. Available slugs:
+`lifesg` · `bookingsg` · `ccube` · `mylegacy` · `oneservice` · `pa` · `supportgowhere` · `sgw-digital-lobby` · `careercompass` · `rbs` · `imda` · `spf` · `smgs` · `a11y-playground`
+
+> Vite resolves `node_modules` CSS `@import` automatically. Other build tools may need a CSS resolver configured.
+
+Font-to-theme mapping:
+
+| Font stylesheet                  | Themes                                             |
+| -------------------------------- | -------------------------------------------------- |
+| `open-sans.css`                  | `lifesg`, `ccube`, `mylegacy`, `oneservice`, `rbs` |
+| `plus-jakarta-sans.css`          | `bookingsg`, `careercompass`, `smgs`               |
+| `lato.css`                       | `pa`                                               |
+| `libre-franklin.css`             | `supportgowhere`, `sgw-digital-lobby`              |
+| `montserrat.css`                 | `imda`                                             |
+| `public-sans.css`                | `spf`                                              |
+| `atkinson-hyperlegible-next.css` | `a11y-playground`                                  |
+
+---
+
+## Step 3 — ThemeProvider (src/App.tsx)
+
+Wrap your app root. Theme is a string matching the slug used in Step 2. Do NOT re-import the CSS here — it is already imported via `index.css`.
+
+```tsx
+// src/App.tsx
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+
+export default function App() {
+    return (
+        <ThemeProvider theme="lifesg" mode="light">
+            <Navbar
+                masthead
+                items={{
+                    desktop: [{ id: "home", children: "Home", href: "/" }],
+                }}
+            />
+            <main style={{ flex: 1 }}>{/* page content */}</main>
+            <Footer />
+        </ThemeProvider>
+    );
+}
+```
+
+**Dark/light mode:** `mode` prop defaults to `"auto"` (OS preference).
+
+```tsx
+<ThemeProvider theme="lifesg" mode="light">  {/* force light */}
+<ThemeProvider theme="lifesg" mode="dark">   {/* force dark */}
+```
+
+---
+
+## Step 4 — Vite config
+
+No special configuration needed for the design system. Standard React setup:
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+    plugins: [react()],
+});
+```
+
+---
+
+## Verification checklist
+
+-   [ ] `@lifesg/react-design-system`, `@lifesg/react-icons`, `@floating-ui/react` installed
+-   [ ] `styled-components` NOT installed
+-   [ ] Font CDN stylesheet imported first in `index.css` and matches selected theme
+-   [ ] `@lifesg/react-design-system/theme/styles/default.css` imported in `index.css` (before theme CSS)
+-   [ ] `@lifesg/react-design-system/theme/styles/{theme}.css` imported in `index.css` (after default.css)
+-   [ ] `body { margin: 0 }` and `#root { min-height: 100vh; display: flex; flex-direction: column }` in `index.css`
+-   [ ] `ThemeProvider` wraps app root with correct theme string
diff --git a/docs/skills/cc-flagship-ds/resources/v4/templates/form.md b/docs/skills/cc-flagship-ds/resources/v4/templates/form.md
new file mode 100644
index 0000000000..4650d04ffb
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/templates/form.md
@@ -0,0 +1,545 @@
+# Form Template (v4)
+
+Single or multi-step form page built with `@lifesg/react-design-system` v4.
+
+## When to use
+
+-   Collecting user input across one or more steps
+-   Profile, settings, or data-entry pages
+
+---
+
+## Page anatomy
+
+```
+┌──────────────────────────────────────────────────────────┐
+│ Header                                                   │
+├──────────────────────────────────────────────────────────┤
+│  <main>                                                  │
+│  └─ pageWrapper (padding: spacing-32 0; lg: spacing-64) │
+│     └─ Layout.Container type="grid"                     │
+│        ├─ Layout.ColDiv xsCols={12} lgCols={12}         │
+│        │  └─ ProgressIndicator  (multi-step only)       │
+│        └─ Layout.ColDiv xsCols={12} lgCols={9} xlCols={8}│
+│           │  flex column · gap: spacing-32               │
+│           ├─ pageHeadingBlock (flex column · gap: 16)   │
+│           │  ├─ h1                                       │
+│           │  └─ p (optional)                             │
+│           ├─ div (form content)                          │
+│           │  └─ Form fields (built-in margin-bottom: 32)│
+│           │     Non-form components → margin-bottom: 32 │
+│           └─ FormNav                                     │
+├──────────────────────────────────────────────────────────┤
+│ Footer                                                   │
+└──────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Styling approach
+
+v4 uses **CSS Modules** — no `styled-components`.
+
+-   Design tokens are plain CSS variable strings (`var(--fds-spacing-32)`, `var(--fds-colour-text)`, etc.)
+-   Responsive styles use the breakpoint class selector: `:where(body.fds-breakpoint-lg-min) &`
+-   `ThemeProvider` adds breakpoint classes to `document.body` at runtime (e.g. `fds-breakpoint-lg-min`)
+-   Pass `className={styles.x}` to `Layout.ColDiv`, `Button.Default`, and other DS components that accept it
+
+---
+
+## Rules
+
+|                          | Wrong                | Correct                                                                                                                                                                                  |
+| ------------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Column width             | `lgCols={12}`        | `lgCols={9} xlCols={8}`                                                                                                                                                                  |
+| Progress indicator       | Inside 8-col div     | Separate `lgCols={12}` ColDiv; `currentIndex` is zero-based                                                                                                                              |
+| Page heading             | Static string        | Defaults to `{STEPS[step]}`; override per step as needed                                                                                                                                 |
+| Field spacing            | `gap` on wrapper div | Rely on component built-in `margin-bottom: 32`; add `margin-bottom: var(--fds-spacing-32)` via CSS Module class for components without it (BoxContainer, Toggle, FileUpload, ESignature) |
+| Constrained-width inputs | `width` on element   | `max-width` — works alongside internal `width: 100%`                                                                                                                                     |
+| Review step              | Omitting             | Required as last step — one `BoxContainer` per preceding step                                                                                                                            |
+
+---
+
+## CSS setup (index.css)
+
+```css
+@import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
+@import "@lifesg/react-design-system/theme/styles/default.css";
+@import "@lifesg/react-design-system/theme/styles/lifesg.css";
+
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: var(--fds-font-family-body, "Open Sans", sans-serif);
+}
+
+a {
+    cursor: pointer;
+    text-decoration: none;
+}
+
+button,
+select,
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+::file-selector-button {
+    color: inherit;
+}
+
+#root {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+#root > div {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+```
+
+> `default.css` defines all `--fds-*` tokens. `lifesg.css` overrides brand/primary colours. Font CDN path is still v3 — fonts are shared across versions.
+
+---
+
+## App setup
+
+```tsx
+// App.tsx
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+import { Layout } from "@lifesg/react-design-system/layout";
+import FormPage from "./FormPage";
+import styles from "./App.module.css";
+
+function App() {
+    return (
+        <ThemeProvider theme="lifesg" mode="light">
+            <Navbar
+                masthead
+                items={{
+                    desktop: [{ id: "home", children: "Home", href: "/" }],
+                }}
+            />
+            <main style={{ flex: 1 }}>
+                <div className={styles.pageWrapper}>
+                    <Layout.Container type="grid">
+                        <FormPage />
+                    </Layout.Container>
+                </div>
+            </main>
+            <Footer />
+        </ThemeProvider>
+    );
+}
+```
+
+```css
+/* App.module.css */
+.pageWrapper {
+    padding: var(--fds-spacing-32) 0;
+
+    :global(body.fds-breakpoint-lg-min) & {
+        padding: var(--fds-spacing-64) 0;
+    }
+}
+```
+
+---
+
+## FormNav
+
+```tsx
+// FormNav.tsx
+import { useRef, useLayoutEffect } from "react";
+import { Button } from "@lifesg/react-design-system/button";
+import styles from "./FormNav.module.css";
+
+interface FormNavProps {
+    onBack?: () => void;
+    onNext: () => void;
+    nextLabel?: string;
+    isSubmitting?: boolean;
+    actions?: React.ReactNode;
+}
+
+export default function FormNav({
+    onBack,
+    onNext,
+    nextLabel = "Next",
+    isSubmitting = false,
+    actions,
+}: FormNavProps) {
+    const navRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (!navRef.current) return;
+        const buttons = Array.from(
+            navRef.current.querySelectorAll<HTMLElement>("button")
+        );
+        buttons.forEach((b) => {
+            b.style.width = "";
+        });
+        if (!window.matchMedia("(min-width: 769px)").matches) return;
+        const widest = Math.max(...buttons.map((b) => b.offsetWidth));
+        buttons.forEach((b) => {
+            b.style.width = `${widest}px`;
+        });
+    });
+
+    return (
+        <div ref={navRef} className={styles.nav}>
+            <div className={styles.primaryGroup}>
+                <Button.Default
+                    styleType="default"
+                    onClick={onNext}
+                    loading={isSubmitting}
+                    disabled={isSubmitting}
+                    className={styles.nextButton}
+                >
+                    {nextLabel}
+                </Button.Default>
+                {actions && (
+                    <div className={styles.actionsGroup}>{actions}</div>
+                )}
+            </div>
+            {onBack && (
+                <Button.Default
+                    styleType="secondary"
+                    onClick={onBack}
+                    className={styles.backButton}
+                >
+                    Back
+                </Button.Default>
+            )}
+        </div>
+    );
+}
+```
+
+```css
+/* FormNav.module.css */
+.nav {
+    margin-top: var(--fds-spacing-32);
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-24);
+
+    :global(body.fds-breakpoint-lg-min) & {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0;
+    }
+}
+
+.primaryGroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-16);
+
+    :global(body.fds-breakpoint-lg-min) & {
+        flex-direction: row;
+        gap: var(--fds-spacing-16);
+        order: 2;
+        margin-left: auto;
+    }
+}
+
+.nextButton {
+    box-sizing: border-box;
+    width: 100%;
+
+    :global(body.fds-breakpoint-lg-min) & {
+        width: auto;
+        min-width: 10rem;
+        order: 1;
+    }
+}
+
+.actionsGroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-16);
+
+    & > button {
+        box-sizing: border-box;
+        width: 100%;
+    }
+
+    :global(body.fds-breakpoint-lg-min) & {
+        flex-direction: row;
+        gap: var(--fds-spacing-16);
+        & > button {
+            width: auto;
+            min-width: 10rem;
+        }
+    }
+}
+
+.backButton {
+    box-sizing: border-box;
+    width: 100%;
+
+    :global(body.fds-breakpoint-lg-min) & {
+        width: auto;
+        min-width: 10rem;
+        order: 1;
+    }
+}
+```
+
+---
+
+## Review step
+
+```tsx
+import { BoxContainer } from "@lifesg/react-design-system/box-container";
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+import styles from "./FormPage.module.css";
+
+{
+    step === STEPS.length - 1 && (
+        <BoxContainer
+            title="Step one"
+            collapsible
+            expanded
+            className={styles.boxContainer}
+        >
+            <div className={styles.summaryPadding}>
+                <UneditableSection
+                    fullWidth
+                    background={false}
+                    items={[
+                        {
+                            label: "Short field",
+                            value: valueA || "—",
+                            displayWidth: "half",
+                        },
+                        {
+                            label: "Short field",
+                            value: valueB || "—",
+                            displayWidth: "half",
+                        },
+                        { label: "Long field", value: longValue || "—" },
+                    ]}
+                />
+            </div>
+        </BoxContainer>
+    );
+}
+```
+
+```css
+/* in FormPage.module.css */
+.boxContainer {
+    margin-bottom: var(--fds-spacing-32);
+}
+
+.summaryPadding {
+    padding: var(--fds-spacing-20);
+
+    :global(body.fds-breakpoint-md-min) & {
+        padding: var(--fds-spacing-32);
+    }
+}
+```
+
+---
+
+## Complete template
+
+```tsx
+// FormPage.tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Alert } from "@lifesg/react-design-system/alert";
+import FormNav from "./FormNav";
+import styles from "./FormPage.module.css";
+
+const STEPS = ["Step one", "Step two", "Review"];
+
+const CATEGORY_OPTIONS = [
+    { label: "Option A", value: "a" },
+    { label: "Option B", value: "b" },
+];
+
+export default function FormPage() {
+    const [step, setStep] = useState(0);
+    const isLastStep = step === STEPS.length - 1;
+
+    const [name, setName] = useState("");
+    const [category, setCategory] = useState("");
+    const [errors, setErrors] = useState<Record<string, string>>({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState<string | null>(null);
+
+    function validateStep(s: number): Record<string, string> {
+        const e: Record<string, string> = {};
+        if (s === 0) {
+            if (!name.trim()) e.name = "Enter your full name";
+            if (!category) e.category = "Select a category";
+        }
+        return e;
+    }
+
+    function handleNext() {
+        const stepErrors = validateStep(step);
+        setErrors(stepErrors);
+        if (Object.keys(stepErrors).length > 0) return;
+        if (!isLastStep) setStep((s) => s + 1);
+        else handleSubmit();
+    }
+
+    async function handleSubmit() {
+        setIsSubmitting(true);
+        setSubmitError(null);
+        try {
+            // FIXME: replace with actual API call, e.g.:
+            // await apiClient.post("/api/v1/submissions", { name, category });
+            console.log("submitted", { name, category });
+        } catch (err: unknown) {
+            setSubmitError(
+                err instanceof Error
+                    ? err.message
+                    : "Submission failed. Please try again."
+            );
+        } finally {
+            setIsSubmitting(false);
+        }
+    }
+
+    return (
+        <>
+            <Layout.ColDiv
+                xsCols={12}
+                lgCols={12}
+                className={styles.progressColDiv}
+            >
+                <ProgressIndicator
+                    steps={STEPS}
+                    currentIndex={step}
+                    displayExtractor={(s) => s}
+                />
+            </Layout.ColDiv>
+
+            <Layout.ColDiv
+                xsCols={12}
+                lgCols={9}
+                xlCols={8}
+                className={styles.formColDiv}
+            >
+                <div className={styles.pageHeadingBlock}>
+                    <h1 className={styles.pageTitle}>{STEPS[step]}</h1>
+                    {/* <p className={styles.pageDescription}>Optional description</p> */}
+                </div>
+
+                {submitError && <Alert type="error">{submitError}</Alert>}
+
+                <div>
+                    {step === 0 && (
+                        <>
+                            <Form.Input
+                                label="Full name"
+                                value={name}
+                                errorMessage={errors.name}
+                                onChange={(e) => {
+                                    setName(e.target.value);
+                                    if (errors.name)
+                                        setErrors((prev) => ({
+                                            ...prev,
+                                            name: "",
+                                        }));
+                                }}
+                            />
+                            <Form.Select
+                                label="Category"
+                                options={CATEGORY_OPTIONS}
+                                selectedOption={CATEGORY_OPTIONS.find(
+                                    (o) => o.value === category
+                                )}
+                                listExtractor={(o) => o.label}
+                                displayValueExtractor={(o) => o.label}
+                                valueExtractor={(o) => o.value}
+                                onSelectOption={(opt) => {
+                                    setCategory(opt.value);
+                                    if (errors.category)
+                                        setErrors((prev) => ({
+                                            ...prev,
+                                            category: "",
+                                        }));
+                                }}
+                                errorMessage={errors.category}
+                            />
+                        </>
+                    )}
+                    {step === 1 && <>{/* step 2 fields */}</>}
+                </div>
+
+                <FormNav
+                    onBack={step > 0 ? () => setStep((s) => s - 1) : undefined}
+                    onNext={handleNext}
+                    nextLabel={isLastStep ? "Submit" : "Next"}
+                    isSubmitting={isSubmitting}
+                />
+            </Layout.ColDiv>
+        </>
+    );
+}
+```
+
+```css
+/* FormPage.module.css */
+.progressColDiv {
+    margin-bottom: var(--fds-spacing-32);
+}
+
+.formColDiv {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-32);
+}
+
+.pageHeadingBlock {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-16);
+}
+
+.pageTitle {
+    margin: 0;
+}
+
+.pageDescription {
+    margin: 0;
+}
+```
+
+---
+
+## Notes
+
+-   Single-step: omit `ProgressIndicator` and pass no `onBack` to `FormNav`
+-   Pass `actions` to `FormNav` for secondary actions like Save draft
+-   `ThemeProvider` accepts `theme` (string from `THEME_TYPES`) and `mode` (`"light" | "dark" | "auto"`)
+-   CSS variables (`--fds-*`) are scoped to the `ThemeProvider` div — they are not global
diff --git a/docs/skills/cc-flagship-ds/resources/v4/templates/listing.md b/docs/skills/cc-flagship-ds/resources/v4/templates/listing.md
new file mode 100644
index 0000000000..68e110ac05
--- /dev/null
+++ b/docs/skills/cc-flagship-ds/resources/v4/templates/listing.md
@@ -0,0 +1,445 @@
+# Listing Template (v4)
+
+Pages whose primary goal is finding, scanning, or filtering a collection of records.
+
+## When to use
+
+-   Search results, service directories, record indexes
+-   Transaction histories, application lists
+-   Any screen presenting multiple instances of the same entity type
+
+Do not use for:
+
+-   A single record's detail → use `detail.md`
+-   A mixed overview with stats and no primary table → use `dashboard.md`
+
+---
+
+## Styling approach
+
+v4 uses **CSS Modules** — no `styled-components`.
+
+-   Design tokens are plain CSS variable strings (`var(--fds-spacing-32)`, `var(--fds-colour-text)`, etc.)
+-   Responsive styles use the breakpoint class selector: `:where(body.fds-breakpoint-lg-min) &`
+-   `ThemeProvider` adds breakpoint classes to `document.body` at runtime
+
+---
+
+## Page anatomy
+
+```
+Navbar
+main
+  pageWrapper (padding: spacing-32 0; lg: spacing-48)
+  └── Layout.Container type="grid"
+        └── Layout.ColDiv xsCols={8} lgCols={12}
+              searchRow (optional)
+              twoColumn
+                ├── filterSidebar (278px) — omit for search-only variant
+                │     Filter
+                └── resultsArea (flex-1)
+                      resultCountRow
+                      ErrorDisplay type="no-item-found"  ← empty state
+                      Card list / DataTable
+                      paginationWrapper (centred)
+Footer
+```
+
+On mobile the filter sidebar should be hidden behind a modal — `Filter` handles this automatically when `toggleFilterAtBreakpoint` is set.
+
+---
+
+## Required components
+
+| Slot           | Component                                 | Required |
+| -------------- | ----------------------------------------- | -------- |
+| Navigation     | `Navbar` (masthead enabled)               | Yes      |
+| Results        | `Card` list/grid **or** `DataTable`       | Yes      |
+| Result count   | `Typography.BodyMD` — "X result(s) found" | Yes      |
+| Footer         | `Footer`                                  | Yes      |
+| Search bar     | `Form.Input` + `Button.Default`           | No\*     |
+| Filter sidebar | `Filter` (~278px wide)                    | No\*     |
+| Pagination     | `Pagination showFirstAndLastNav`          | No       |
+
+\* Search bar and filter sidebar are individually optional but **at least one must be present**.
+
+---
+
+## CSS (ListingPage.module.css)
+
+```css
+.pageWrapper {
+    padding: var(--fds-spacing-32) 0;
+
+    :global(body.fds-breakpoint-lg-min) & {
+        padding: var(--fds-spacing-48) 0;
+    }
+}
+
+.twoColumn {
+    display: flex;
+    gap: var(--fds-spacing-32);
+    align-items: flex-start;
+}
+
+.filterSidebar {
+    width: 278px;
+    flex-shrink: 0;
+}
+
+.resultsArea {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-16);
+}
+
+.searchRow {
+    display: flex;
+    gap: var(--fds-spacing-16);
+    align-items: flex-end;
+    margin-bottom: var(--fds-spacing-24);
+}
+
+.resultCountRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.cardBody {
+    padding: var(--fds-spacing-24);
+}
+
+.paginationWrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--fds-spacing-24);
+}
+```
+
+---
+
+## Rules
+
+-   Always show result count even when no filters are active — format: "X result(s) found"
+-   Always show `ErrorDisplay type="no-item-found"` with contextual copy when results are empty — never an empty container
+-   `Pagination` or lazy load — never both on the same list
+-   `showFirstAndLastNav` must be set on `Pagination`
+-   Filter sidebar width is fixed at ~278px; results area is `flex: 1`
+-   Inline action buttons (edit, delete) do not belong on listing cards — those go on the detail screen
+-   Changing `keyword`, `filters`, or `sortBy` must reset `page` to `1`
+
+---
+
+## Complete template
+
+A single-file listing page with search, side filters, pagination, loading/error/empty states, and API stub wired in. Remove `filterSidebar` / `twoColumn` for search-only variant.
+
+```tsx
+// ListingPage.tsx
+import { useState, useEffect, useMemo } from "react";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Card } from "@lifesg/react-design-system/card";
+import { Filter } from "@lifesg/react-design-system/filter";
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+import { Pagination } from "@lifesg/react-design-system/pagination";
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+import { Alert } from "@lifesg/react-design-system/alert";
+import { Button } from "@lifesg/react-design-system/button";
+import { Form } from "@lifesg/react-design-system/form";
+import styles from "./ListingPage.module.css";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface Item {
+    id: string;
+    title: string;
+    description: string;
+    category: string;
+}
+
+interface ListingState {
+    keyword: string;
+    filters: Record<string, string[]>;
+    sortBy: string;
+    page: number;
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const PAGE_SIZE = 10;
+
+const SORT_OPTIONS = [
+    { label: "Relevance", value: "relevance" },
+    { label: "Newest first", value: "newest" },
+];
+
+const CATEGORY_OPTIONS = [
+    { label: "Category A", value: "a" },
+    { label: "Category B", value: "b" },
+];
+
+// FIXME: replace with real seed data or remove once API is wired up
+const MOCK_ITEMS: Item[] = [];
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function matchesKeyword(item: Item, keyword: string): boolean {
+    if (!keyword.trim()) return true;
+    const q = keyword.toLowerCase();
+    return (
+        item.title.toLowerCase().includes(q) ||
+        item.description.toLowerCase().includes(q)
+    );
+}
+
+function matchesFilters(
+    item: Item,
+    filters: Record<string, string[]>
+): boolean {
+    const cats = filters.category;
+    if (!cats || cats.length === 0) return true;
+    return cats.includes(item.category);
+}
+
+function sortItems(items: Item[], sortBy: string): Item[] {
+    if (sortBy === "newest") return [...items].reverse();
+    return items;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function ListingPage() {
+    const [allItems, setAllItems] = useState<Item[]>(MOCK_ITEMS);
+    const [isLoading, setIsLoading] = useState(true);
+    const [fetchError, setFetchError] = useState<string | null>(null);
+
+    const [state, setState] = useState<ListingState>({
+        keyword: "",
+        filters: {},
+        sortBy: "relevance",
+        page: 1,
+    });
+
+    useEffect(() => {
+        setIsLoading(true);
+        setFetchError(null);
+        // FIXME: replace with actual API client and URL to fetch data, e.g.:
+        // apiClient
+        //   .get<Item[]>("/api/v1/items")
+        //   .then(({ data }) => setAllItems(data))
+        //   .catch((err) => setFetchError(err.message))
+        //   .finally(() => setIsLoading(false));
+        setAllItems(MOCK_ITEMS);
+        setIsLoading(false);
+    }, []);
+
+    const results = useMemo(() => {
+        let rows = allItems.filter(
+            (r) =>
+                matchesKeyword(r, state.keyword) &&
+                matchesFilters(r, state.filters)
+        );
+        return sortItems(rows, state.sortBy);
+    }, [allItems, state.keyword, state.filters, state.sortBy]);
+
+    const pageCount = Math.ceil(results.length / PAGE_SIZE);
+    const pageRows = results.slice(
+        (state.page - 1) * PAGE_SIZE,
+        state.page * PAGE_SIZE
+    );
+
+    function handleClear() {
+        setState((s) => ({ ...s, filters: {}, page: 1 }));
+    }
+
+    return (
+        <>
+            <Navbar masthead items={{ desktop: [] }} />
+            <main style={{ flex: 1 }}>
+                <div className={styles.pageWrapper}>
+                    <Layout.Container type="grid">
+                        <Layout.ColDiv xsCols={8} lgCols={12}>
+                            {/* Search bar */}
+                            <div className={styles.searchRow}>
+                                <Form.Input
+                                    label="Search"
+                                    placeholder="Search by keyword"
+                                    value={state.keyword}
+                                    onChange={(e) =>
+                                        setState((s) => ({
+                                            ...s,
+                                            keyword: e.target.value,
+                                            page: 1,
+                                        }))
+                                    }
+                                />
+                                <Button.Default
+                                    styleType="default"
+                                    onClick={() =>
+                                        setState((s) => ({ ...s, page: 1 }))
+                                    }
+                                >
+                                    Search
+                                </Button.Default>
+                            </div>
+
+                            {/* Loading */}
+                            {isLoading && (
+                                <Typography.BodyMD>
+                                    Loading...
+                                </Typography.BodyMD>
+                            )}
+
+                            {/* Fetch error */}
+                            {!isLoading && fetchError && (
+                                <Alert
+                                    type="error"
+                                    actionLink={{
+                                        children: "Try again",
+                                        onClick: () => window.location.reload(),
+                                    }}
+                                >
+                                    {fetchError}
+                                </Alert>
+                            )}
+
+                            {/* Results */}
+                            {!isLoading && !fetchError && (
+                                <div className={styles.twoColumn}>
+                                    {/* Filter sidebar — omit for search-only variant */}
+                                    <div className={styles.filterSidebar}>
+                                        <Filter onClear={handleClear}>
+                                            <Filter.Item
+                                                title="Sort by"
+                                                collapsible={false}
+                                            >
+                                                {SORT_OPTIONS.map((opt) => (
+                                                    <RadioButton
+                                                        key={opt.value}
+                                                        checked={
+                                                            state.sortBy ===
+                                                            opt.value
+                                                        }
+                                                        onChange={() =>
+                                                            setState((s) => ({
+                                                                ...s,
+                                                                sortBy: opt.value,
+                                                                page: 1,
+                                                            }))
+                                                        }
+                                                    >
+                                                        {opt.label}
+                                                    </RadioButton>
+                                                ))}
+                                            </Filter.Item>
+                                            <Filter.Checkbox
+                                                title="Category"
+                                                options={CATEGORY_OPTIONS}
+                                                selected={
+                                                    state.filters.category ?? []
+                                                }
+                                                onChange={(values) =>
+                                                    setState((s) => ({
+                                                        ...s,
+                                                        page: 1,
+                                                        filters: {
+                                                            ...s.filters,
+                                                            category: values,
+                                                        },
+                                                    }))
+                                                }
+                                            />
+                                        </Filter>
+                                    </div>
+
+                                    <div className={styles.resultsArea}>
+                                        {/* Result count */}
+                                        <div className={styles.resultCountRow}>
+                                            <Typography.BodyMD>
+                                                {results.length} result
+                                                {results.length !== 1
+                                                    ? "s"
+                                                    : ""} found
+                                            </Typography.BodyMD>
+                                        </div>
+
+                                        {/* Empty state */}
+                                        {results.length === 0 && (
+                                            <ErrorDisplay
+                                                type="no-item-found"
+                                                title="No results found"
+                                                description="Try adjusting your search or filters."
+                                                actionButton={{
+                                                    children: "Clear filters",
+                                                    onClick: handleClear,
+                                                }}
+                                            />
+                                        )}
+
+                                        {/* Card list */}
+                                        {pageRows.map((item) => (
+                                            <Card key={item.id}>
+                                                <div
+                                                    className={styles.cardBody}
+                                                >
+                                                    <Typography.HeadingSM>
+                                                        {item.title}
+                                                    </Typography.HeadingSM>
+                                                    <Typography.BodyMD>
+                                                        {item.description}
+                                                    </Typography.BodyMD>
+                                                </div>
+                                            </Card>
+                                        ))}
+
+                                        {/* Pagination */}
+                                        {pageCount > 1 && (
+                                            <div
+                                                className={
+                                                    styles.paginationWrapper
+                                                }
+                                            >
+                                                <Pagination
+                                                    totalItems={results.length}
+                                                    pageSize={PAGE_SIZE}
+                                                    activePage={state.page}
+                                                    onPageChange={(page) =>
+                                                        setState((s) => ({
+                                                            ...s,
+                                                            page,
+                                                        }))
+                                                    }
+                                                    showFirstAndLastNav
+                                                />
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            )}
+                        </Layout.ColDiv>
+                    </Layout.Container>
+                </div>
+            </main>
+            <Footer />
+        </>
+    );
+}
+```
+
+---
+
+## Anti-patterns
+
+-   Do not omit the result count
+-   Do not show an empty results area with no state message
+-   Do not use `DataTable` for citizen-facing records
+-   Do not use pagination AND lazy loading together
+-   Do not leave stale `page` values pointing past the end of a newly-filtered result set
+-   Do not split filtering and sorting into separate `useEffect` calls — derive from a single `useMemo`
+-   Do not use `styled-components` — use CSS Module classes with `var(--fds-*)` tokens
diff --git a/package.json b/package.json
index 5110e0f6fd..934b285eac 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
         }
     },
     "bin": {
-        "lifesg-react-design-system": "./codemods/run-codemod.js"
+        "lifesg-react-design-system": "./codemods/run-codemod.js",
+        "flagship-skills": "./scripts/init-skills.js"
     },
     "scripts": {
         "build": "npm run rollup",
diff --git a/scripts/init-skills.js b/scripts/init-skills.js
new file mode 100644
index 0000000000..8daf92b353
--- /dev/null
+++ b/scripts/init-skills.js
@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+
+const CWD = process.cwd();
+
+// Source: skills bundled with this package
+const SKILLS_SRC = path.resolve(__dirname, "../docs/skills/cc-flagship-ds");
+
+// IDE detection: marker folder → destination path
+const IDE_TARGETS = {
+    "Claude Code": {
+        marker: ".claude",
+        dest: ".claude/commands",
+    },
+    Cursor: {
+        marker: ".cursor",
+        dest: ".cursor/rules",
+    },
+    Windsurf: {
+        marker: ".windsurf",
+        dest: ".windsurf/rules",
+    },
+    Copilot: {
+        marker: ".github",
+        dest: ".github/copilot-instructions",
+    },
+    Generic: {
+        marker: null, // fallback
+        dest: ".agents/skills/cc-flagship-ds",
+    },
+};
+
+// Files to copy from the skill source (top-level only)
+// Resources are fetched on-demand by the agent, not copied
+const FILES_TO_COPY = ["SKILL.md", "SKILL-v4.md", "catalogue.md"];
+
+function detectIDEs() {
+    const detected = [];
+
+    for (const [ide, config] of Object.entries(IDE_TARGETS)) {
+        if (ide === "Generic") continue;
+        if (fs.existsSync(path.join(CWD, config.marker))) {
+            detected.push(ide);
+        }
+    }
+
+    // fallback to generic if nothing detected
+    return detected.length > 0 ? detected : ["Generic"];
+}
+
+function copyFiles(ide, destRelative) {
+    const destDir = path.join(CWD, destRelative);
+    fs.mkdirSync(destDir, { recursive: true });
+
+    const config = IDE_TARGETS[ide];
+
+    for (const filename of FILES_TO_COPY) {
+        const src = path.join(SKILLS_SRC, filename);
+        if (!fs.existsSync(src)) continue;
+
+        const dest = path.join(destDir, filename);
+        fs.copyFileSync(src, dest);
+        console.log(`  ✓ ${filename} → ${destRelative}/${filename}`);
+    }
+}
+
+function main() {
+    console.log("\n🚀 Installing Flagship DS agent skills...\n");
+
+    const ides = detectIDEs();
+    console.log(`Detected: ${ides.join(", ")}\n`);
+
+    for (const ide of ides) {
+        const { dest } = IDE_TARGETS[ide];
+        console.log(`[${ide}]`);
+        copyFiles(ide, dest);
+        console.log();
+    }
+
+    console.log("✅ Done! Start building with Flagship DS.\n");
+    console.log(
+        "Usage: describe what you want to build and your agent will use the skill automatically."
+    );
+}
+
+main();

From 144c00c528f13639c5dd8f4bb04e3bc6f884b045 Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Fri, 28 Aug 2026 09:49:22 +0800
Subject: [PATCH 02/15] [MISC][XY] Rename skill + align v4 files with v3

---
 .../resources/v3/patterns/dashboard.md        | 154 ------
 .../resources/v3/patterns/detail.md           | 364 -------------
 .../{cc-flagship-ds => fds-build}/SKILL-v4.md |  10 +-
 .../{cc-flagship-ds => fds-build}/SKILL.md    |  18 +-
 .../catalogue.md                              |   0
 .../evals/evals.json                          |   2 +-
 .../resources/v3/components/accordion.md      |   0
 .../resources/v3/components/alert.md          |   0
 .../resources/v3/components/animation.md      |   0
 .../resources/v3/components/avatar.md         |   0
 .../resources/v3/components/badge.md          |   0
 .../resources/v3/components/box-container.md  |   0
 .../resources/v3/components/breadcrumb.md     |   0
 .../v3/components/button-with-icon.md         |   0
 .../resources/v3/components/button.md         |   0
 .../resources/v3/components/calendar.md       |   0
 .../resources/v3/components/card.md           |   0
 .../resources/v3/components/checkbox.md       |   0
 .../v3/components/countdown-timer.md          |   0
 .../resources/v3/components/data-table.md     |   0
 .../resources/v3/components/date-navigator.md |   0
 .../resources/v3/components/divider.md        |   0
 .../resources/v3/components/drawer.md         |   0
 .../resources/v3/components/error-display.md  |   0
 .../v3/components/feedback-rating.md          |   0
 .../resources/v3/components/file-download.md  |   0
 .../resources/v3/components/file-upload.md    |   0
 .../resources/v3/components/filter.md         |   0
 .../resources/v3/components/footer.md         |   0
 .../v3/components/form-date-input.md          |   0
 .../v3/components/form-date-range-input.md    |   0
 .../v3/components/form-e-signature.md         |   0
 .../resources/v3/components/form-input.md     |   0
 .../v3/components/form-masked-input.md        |   0
 .../v3/components/form-multi-select.md        |   0
 .../v3/components/form-nested-multi-select.md |   0
 .../v3/components/form-nested-select.md       |   0
 .../v3/components/form-otp-verification.md    |   0
 .../v3/components/form-phone-number-input.md  |   0
 .../components/form-predictive-text-input.md  |   0
 .../resources/v3/components/form-select.md    |   0
 .../resources/v3/components/form-slider.md    |   0
 .../resources/v3/components/form-textarea.md  |   0
 .../v3/components/form-time-range-picker.md   |   0
 .../v3/components/form-timepicker.md          |   0
 .../v3/components/form-unit-number-input.md   |   0
 .../components/fullscreen-image-carousel.md   |   0
 .../v3/components/histogram-slider.md         |   0
 .../resources/v3/components/icon-button.md    |   0
 .../resources/v3/components/icon.md           |   0
 .../resources/v3/components/image-button.md   |   0
 .../resources/v3/components/input.md          |   0
 .../v3/components/language-switcher.md        |   0
 .../resources/v3/components/layout.md         |   0
 .../resources/v3/components/link-list.md      |   0
 .../resources/v3/components/local-nav.md      |   0
 .../resources/v3/components/masthead.md       |   0
 .../resources/v3/components/menu.md           |   0
 .../resources/v3/components/modal.md          |   0
 .../resources/v3/components/navbar.md         |   0
 .../v3/components/notification-banner.md      |   0
 .../resources/v3/components/pagination.md     |   0
 .../resources/v3/components/pill.md           |   0
 .../resources/v3/components/popover.md        |   0
 .../v3/components/progress-indicator.md       |   0
 .../resources/v3/components/radio-button.md   |   0
 .../resources/v3/components/schedule.md       |   0
 .../resources/v3/components/sidenav.md        |   0
 .../v3/components/singpass-button.md          |   0
 .../v3/components/smart-app-banner.md         |   0
 .../resources/v3/components/tab.md            |   0
 .../resources/v3/components/tag.md            |   0
 .../resources/v3/components/text-list.md      |   0
 .../v3/components/time-slot-bar-week.md       |   0
 .../resources/v3/components/time-slot-bar.md  |   0
 .../v3/components/time-slot-week-view.md      |   0
 .../resources/v3/components/timeline.md       |   0
 .../resources/v3/components/timetable.md      |   0
 .../resources/v3/components/toast.md          |   0
 .../resources/v3/components/toggle.md         |   0
 .../resources/v3/components/tooltip.md        |   0
 .../resources/v3/components/typography.md     |   0
 .../v3/components/uneditable-section.md       |   0
 .../layout-composition-patterns.md            |   0
 .../resources/v3/foundations/tokens.md        |   0
 .../resources/v3/patterns/states.md           |   0
 .../resources/v3/setup}/setup.md              |   0
 .../resources/v3/templates/form.md            |   3 +
 .../resources/v3/templates/listing.md         |   0
 .../resources/v4/components/accordion.md      |   0
 .../resources/v4/components/alert.md          |   0
 .../resources/v4/components/animation.md      |   0
 .../resources/v4/components/avatar.md         |   0
 .../resources/v4/components/badge.md          |   0
 .../resources/v4/components/box-container.md  |   0
 .../resources/v4/components/breadcrumb.md     |   0
 .../resources/v4/components/button.md         |   0
 .../resources/v4/components/calendar.md       |   0
 .../resources/v4/components/card.md           |   0
 .../resources/v4/components/checkbox.md       |   0
 .../v4/components/countdown-timer.md          |   0
 .../resources/v4/components/data-table.md     |   0
 .../resources/v4/components/date-navigator.md |   0
 .../resources/v4/components/divider.md        |   0
 .../resources/v4/components/drawer.md         |   0
 .../resources/v4/components/error-display.md  |   0
 .../v4/components/feedback-rating.md          |   0
 .../resources/v4/components/file-download.md  |   0
 .../resources/v4/components/file-upload.md    |   0
 .../resources/v4/components/filter.md         |   0
 .../resources/v4/components/footer.md         |   0
 .../v4/components/form-date-input.md          |   0
 .../v4/components/form-date-range-input.md    |   0
 .../v4/components/form-e-signature.md         |   0
 .../resources/v4/components/form-input.md     |   0
 .../v4/components/form-masked-input.md        |   0
 .../v4/components/form-multi-select.md        |   0
 .../v4/components/form-nested-multi-select.md |   0
 .../v4/components/form-nested-select.md       |   0
 .../v4/components/form-otp-verification.md    |   0
 .../v4/components/form-phone-number-input.md  |   0
 .../components/form-predictive-text-input.md  |   0
 .../resources/v4/components/form-select.md    |   0
 .../resources/v4/components/form-slider.md    |   0
 .../resources/v4/components/form-textarea.md  |   0
 .../v4/components/form-time-range-picker.md   |   0
 .../v4/components/form-timepicker.md          |   0
 .../v4/components/form-unit-number-input.md   |   0
 .../components/fullscreen-image-carousel.md   |   0
 .../v4/components/histogram-slider.md         |   0
 .../resources/v4/components/icon.md           |   0
 .../resources/v4/components/image-button.md   |   0
 .../resources/v4/components/input.md          |   0
 .../v4/components/language-switcher.md        |   0
 .../resources/v4/components/layout.md         |   0
 .../resources/v4/components/link-list.md      |   0
 .../resources/v4/components/local-nav.md      |   0
 .../resources/v4/components/masthead.md       |   0
 .../resources/v4/components/menu.md           |   0
 .../resources/v4/components/modal.md          |   0
 .../resources/v4/components/navbar.md         |   0
 .../v4/components/notification-banner.md      |   0
 .../resources/v4/components/pagination.md     |   0
 .../resources/v4/components/pill.md           |   0
 .../resources/v4/components/popover.md        |   0
 .../v4/components/progress-indicator.md       |   0
 .../resources/v4/components/radio-button.md   |   0
 .../resources/v4/components/schedule.md       |   0
 .../resources/v4/components/sidenav.md        |   0
 .../v4/components/singpass-button.md          |   0
 .../v4/components/smart-app-banner.md         |   0
 .../resources/v4/components/tab.md            |   0
 .../resources/v4/components/tag.md            |   0
 .../resources/v4/components/text-list.md      |   0
 .../v4/components/time-slot-bar-week.md       |   0
 .../resources/v4/components/time-slot-bar.md  |   0
 .../v4/components/time-slot-week-view.md      |   0
 .../resources/v4/components/timeline.md       |   0
 .../resources/v4/components/timetable.md      |   0
 .../resources/v4/components/toast.md          |   0
 .../resources/v4/components/toggle.md         |   0
 .../resources/v4/components/typography.md     |   0
 .../v4/components/uneditable-section.md       |   0
 .../layout-composition-patterns.md            |  53 ++
 .../resources/v4/foundations/tokens.md        | 508 ++++++++++++++++++
 .../fds-build/resources/v4/patterns/states.md | 298 ++++++++++
 .../resources/v4/setup}/setup.md              |   0
 .../resources/v4/templates/form.md            |   0
 .../resources/v4/templates/listing.md         |   0
 scripts/init-skills.js                        |   4 +-
 170 files changed, 879 insertions(+), 535 deletions(-)
 delete mode 100644 docs/skills/cc-flagship-ds/resources/v3/patterns/dashboard.md
 delete mode 100644 docs/skills/cc-flagship-ds/resources/v3/patterns/detail.md
 rename docs/skills/{cc-flagship-ds => fds-build}/SKILL-v4.md (96%)
 rename docs/skills/{cc-flagship-ds => fds-build}/SKILL.md (94%)
 rename docs/skills/{cc-flagship-ds => fds-build}/catalogue.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/evals/evals.json (99%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/accordion.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/alert.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/animation.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/avatar.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/badge.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/box-container.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/breadcrumb.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/button-with-icon.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/button.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/calendar.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/card.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/checkbox.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/countdown-timer.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/data-table.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/date-navigator.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/divider.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/drawer.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/error-display.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/feedback-rating.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/file-download.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/file-upload.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/filter.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/footer.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-date-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-date-range-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-e-signature.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-masked-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-multi-select.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-nested-multi-select.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-nested-select.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-otp-verification.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-phone-number-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-predictive-text-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-select.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-slider.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-textarea.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-time-range-picker.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-timepicker.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/form-unit-number-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/fullscreen-image-carousel.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/histogram-slider.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/icon-button.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/icon.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/image-button.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/language-switcher.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/layout.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/link-list.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/local-nav.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/masthead.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/menu.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/modal.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/navbar.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/notification-banner.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/pagination.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/pill.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/popover.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/progress-indicator.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/radio-button.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/schedule.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/sidenav.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/singpass-button.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/smart-app-banner.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/tab.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/tag.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/text-list.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/time-slot-bar-week.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/time-slot-bar.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/time-slot-week-view.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/timeline.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/timetable.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/toast.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/toggle.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/tooltip.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/typography.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/components/uneditable-section.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/foundations/layout-composition-patterns.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/foundations/tokens.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/patterns/states.md (100%)
 rename docs/skills/{cc-flagship-ds/resources/v3/patterns => fds-build/resources/v3/setup}/setup.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/templates/form.md (99%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v3/templates/listing.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/accordion.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/alert.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/animation.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/avatar.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/badge.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/box-container.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/breadcrumb.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/button.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/calendar.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/card.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/checkbox.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/countdown-timer.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/data-table.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/date-navigator.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/divider.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/drawer.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/error-display.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/feedback-rating.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/file-download.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/file-upload.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/filter.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/footer.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-date-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-date-range-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-e-signature.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-masked-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-multi-select.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-nested-multi-select.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-nested-select.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-otp-verification.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-phone-number-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-predictive-text-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-select.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-slider.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-textarea.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-time-range-picker.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-timepicker.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/form-unit-number-input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/fullscreen-image-carousel.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/histogram-slider.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/icon.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/image-button.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/input.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/language-switcher.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/layout.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/link-list.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/local-nav.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/masthead.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/menu.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/modal.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/navbar.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/notification-banner.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/pagination.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/pill.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/popover.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/progress-indicator.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/radio-button.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/schedule.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/sidenav.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/singpass-button.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/smart-app-banner.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/tab.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/tag.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/text-list.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/time-slot-bar-week.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/time-slot-bar.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/time-slot-week-view.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/timeline.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/timetable.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/toast.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/toggle.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/typography.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/components/uneditable-section.md (100%)
 create mode 100644 docs/skills/fds-build/resources/v4/foundations/layout-composition-patterns.md
 create mode 100644 docs/skills/fds-build/resources/v4/foundations/tokens.md
 create mode 100644 docs/skills/fds-build/resources/v4/patterns/states.md
 rename docs/skills/{cc-flagship-ds/resources/v4/patterns => fds-build/resources/v4/setup}/setup.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/templates/form.md (100%)
 rename docs/skills/{cc-flagship-ds => fds-build}/resources/v4/templates/listing.md (100%)

diff --git a/docs/skills/cc-flagship-ds/resources/v3/patterns/dashboard.md b/docs/skills/cc-flagship-ds/resources/v3/patterns/dashboard.md
deleted file mode 100644
index e193ab631c..0000000000
--- a/docs/skills/cc-flagship-ds/resources/v3/patterns/dashboard.md
+++ /dev/null
@@ -1,154 +0,0 @@
-# Dashboard Pattern
-
-Admin interfaces, internal portals, and post-login overview pages. Always uses the sidenav shell.
-
-## When to use
-
--   Admin portals and internal tools
--   Post-login landing pages
--   User portals with personalised data and quick actions
-
-Do not use for public-facing pages without authentication → use `Navbar` + `<main><Layout.Container type="grid">` + `Footer` directly.
-Do not use for a single record's full detail → use `detail.md`.
-
----
-
-## Page shell
-
-```
-Navbar
-├── Sidenav (fixed left, 240px)
-└── main content (flex: 1)
-Footer
-```
-
-```tsx
-import { Navbar } from "@lifesg/react-design-system/navbar";
-import { Footer } from "@lifesg/react-design-system/footer";
-import { Layout } from "@lifesg/react-design-system/layout";
-import { Sidenav } from "@lifesg/react-design-system/sidenav";
-import styled from "styled-components";
-import { Spacing, MediaQuery } from "@lifesg/react-design-system/theme";
-
-const AppShell = styled.div`
-    display: flex;
-    min-height: 100vh;
-`;
-
-const SidenavWrapper = styled.aside`
-    width: 240px;
-    flex-shrink: 0;
-    ${MediaQuery.MaxWidth.md} {
-        display: none;
-    }
-`;
-
-const MainContent = styled.main`
-    flex: 1;
-    min-width: 0;
-    padding: ${Spacing["spacing-32"]};
-`;
-
-export default function DashboardPage() {
-    return (
-        <>
-            <Navbar
-                resources={{
-                    primary: { brandName: "MyService", logoSrc: "/logo.svg" },
-                }}
-                items={{ desktop: [] }}
-            />
-            <AppShell>
-                <SidenavWrapper>
-                    <Sidenav>
-                        {/* See sidenav.md for full Sidenav.Group / Sidenav.Item wiring */}
-                    </Sidenav>
-                </SidenavWrapper>
-                <MainContent>
-                    <Layout.Container type="grid">
-                        <Layout.ColDiv xsCols={8} lgCols={12}>
-                            {/* page content */}
-                        </Layout.ColDiv>
-                    </Layout.Container>
-                </MainContent>
-            </AppShell>
-            <Footer />
-        </>
-    );
-}
-```
-
-For Sidenav wiring (groups, items, selected state, onClick) — read `../components/sidenav.md`.
-
----
-
-## Components
-
-| Slot                  | Component                                                             |
-| --------------------- | --------------------------------------------------------------------- |
-| Header                | `Navbar` (masthead enabled)                                           |
-| Side navigation       | `Sidenav`                                                             |
-| Content layout        | `Layout.Container type="grid"` + `Layout.ColDiv` inside `MainContent` |
-| Metric containers     | `Card`                                                                |
-| Section headings      | `Typography.HeadingMD`, `Typography.HeadingSM`                        |
-| Metric values         | `Typography.HeadingXL`                                                |
-| Labels / descriptions | `Typography.BodyBL`, `Typography.BodyBLSmall`                         |
-| Status indicators     | `Badge`                                                               |
-| Quick actions         | `Button.Default`, `ButtonWithIcon.Default`                            |
-| Footer                | `Footer`                                                              |
-
----
-
-## Content area layout structures
-
-These go inside the `Layout.Container` within `MainContent`.
-
-### Metric cards row
-
-```
-ColDiv xsCols=8 mdCols=6 lgCols=3  — Metric card
-ColDiv xsCols=8 mdCols=6 lgCols=3  — Metric card
-ColDiv xsCols=8 mdCols=6 lgCols=3  — Metric card
-ColDiv xsCols=8 mdCols=6 lgCols=3  — Metric card
-```
-
-### Settings / profile page
-
-```
-ColDiv xsCols=8 lgCols=12
-  HeadingXL + BodyMD subtitle       (spacing-32 below)
-  Card — Settings group 1
-  Card — Settings group 2           (spacing-32 between cards)
-  Sticky action bar (see form.md)   (if page exceeds viewport)
-```
-
-`Toast` for save confirmations; `Alert type="error"` above the relevant `Card` for validation failures.
-
-### Full-width with sections
-
-```
-ColDiv xsCols=8                    — Section heading
-ColDiv xsCols=8 mdCols=4  ×3      — Metric row
-ColDiv xsCols=8                    — Section heading
-ColDiv xsCols=8                    — Full-width table
-```
-
----
-
-## Rules
-
--   Always use the sidenav shell — `Navbar` + `Sidenav` (left) + `MainContent` (right) + `Footer`
--   **Always use `Layout.Container type="grid"` + `Layout.ColDiv` inside `MainContent`** — never replace with plain styled divs. The DS grid encodes gutter tokens and breakpoints that plain CSS duplicates incorrectly.
--   Show 3–4 key metrics prominently — never more than fits above the fold
--   Metric cards must have a label, a value, and an optional trend (`Badge`)
--   All grid columns must stack on mobile: `xsCols={8}`
--   Limit dashboard to 1–2 scroll-lengths — remove or collapse lower-priority content
--   Use skeleton loading while fetching (see `states.md`)
-
-## Anti-patterns
-
--   Do not use Shell 1 (full-width, no sidenav) for dashboard screens
--   **Do not use plain `styled.div` grids for metric rows or content sections** — use `Layout.Container type="grid"` + `Layout.ColDiv xsCols mdCols lgCols` instead
--   Do not show percentage changes without context labels
--   Do not combine pagination AND lazy loading on the same list
--   Do not omit loading state — always show feedback while fetching metrics
diff --git a/docs/skills/cc-flagship-ds/resources/v3/patterns/detail.md b/docs/skills/cc-flagship-ds/resources/v3/patterns/detail.md
deleted file mode 100644
index 694118e336..0000000000
--- a/docs/skills/cc-flagship-ds/resources/v3/patterns/detail.md
+++ /dev/null
@@ -1,364 +0,0 @@
-# Detail Pattern
-
-Pages for reading the full content of a single record.
-
-## When to use
-
--   User navigated from a list to see one specific record
--   Screen is primarily read-only with limited, targeted edit actions
--   Content is structured around a single entity
-
-Do not use for:
-
--   Primarily collecting new input → use `form.md`
--   Showing many records side by side → use `listing.md`
-
----
-
-## Layout types
-
-| Record type                                        | Layout            |
-| -------------------------------------------------- | ----------------- |
-| Submission, application, job, scheme, general info | Description-based |
-| Venue, facility, park, address-centric resource    | Location-based    |
-| Bookable resource with availability slots          | Booking-based     |
-
-When in doubt, start with Description-based.
-
----
-
-## 1. Description-based
-
-```
-Layout.Section > Layout.Container > Layout.Content
-  │
-  ├── BreadcrumbRow (space-between flex)
-  │     Breadcrumb (left)
-  │     Button.Default styleType="light" (right — page-level utility action)
-  │
-  ├── Card (full-width, bordered)
-  │     ContentArea (flex-1)
-  │       Typography.HeadingXL as="h1"       — Record title
-  │       Typography.HeadingSM               — Subtitle
-  │       Status badge (pill, outlined)      — Optional, below title
-  │       Typography.BodyBL color=text-subtler — Description (one line)
-  │       AttributeRow × up to 3             — Icon + value text
-  │       Tag / Pill row                     — Optional
-  │       Typography.BodySM color=text-subtler — Timestamp
-  │     CtaColumn (width ~160px)
-  │       Button.Default                     — Primary CTA
-  │       Button.Default styleType="secondary" — Secondary CTA
-  │
-  ├── Alert type="info"                      — Optional, outside card
-  │
-  └── ContentSection × N (no card wrapper)
-        Typography.HeadingSM as="h2"         — Section heading
-        Typography.BodyBL                    — Body paragraph(s)
-```
-
-## 2. Location-based
-
-Same as Description-based but wrapped in a two-column layout. Remove `Layout.Content` and the `Card` + `CtaColumn`:
-
-```
-Layout.Section > Layout.Container
-  ├── BreadcrumbRow
-  └── TwoColumn (flex, gap)
-        LeftColumn (~427px)
-          <img> or map embed
-          Typography.HeadingSM as="h2"   — Attributes subtitle
-          AttributeRow × up to 3
-          Tag / Pill row (optional)
-        RightColumn (flex-1)
-          Typography.HeadingXL as="h1"
-          Typography.HeadingSM
-          Collapsible description (truncated + Show more/less toggle)
-          Alert (optional)
-          ContentSection × N
-```
-
-## 3. Booking-based
-
-Same as Location-based. Right column adds an Availability `Card` between content section groups:
-
-```
-RightColumn (flex-1)
-  Typography.HeadingXL as="h1"
-  ...
-  ContentSection(s) before availability
-  Card (Availability)
-    Typography.HeadingSM as="h2"
-    Description
-    Calendar
-    Time slot display
-    Form.TimeRangePicker
-    Description note
-    Divider
-    CTA row: Button.Default styleType="light" (left) · Button.Default (right)
-  ContentSection(s) after availability
-```
-
----
-
-## Component defaults
-
-| Slot                      | Component                                        | Notes                                                       |
-| ------------------------- | ------------------------------------------------ | ----------------------------------------------------------- |
-| Page-level utility action | `Button.Default styleType="light"`               | Right of breadcrumb row — e.g. "View bookmarks"             |
-| Record title              | `Typography.HeadingXL as="h1"`                   | —                                                           |
-| Subtitle                  | `Typography.HeadingSM`                           | —                                                           |
-| Status badge              | Pill-shaped outlined span                        | Outlined border + matching text/bg colour. Never solid fill |
-| Description               | `Typography.BodyBL color=Colour["text-subtler"]` | One line, optional                                          |
-| Collapsible description   | Custom expand/collapse                           | Location + Booking only. "Show more ↓" / "Show less ↑"      |
-| Attribute rows            | Icon + `Typography.BodyBL`                       | Up to 3 rows                                                |
-| Timestamp                 | `Typography.BodySM color=Colour["text-subtler"]` | Last element in card content area                           |
-| CTAs (in card)            | `Button.Default` primary + secondary             | Description-based only                                      |
-| Alert                     | `Alert type="info"`                              | Outside the card                                            |
-| Section heading           | `Typography.HeadingSM as="h2"`                   | Outside any card                                            |
-| Section body              | `Typography.BodyBL`                              | One or more paragraphs                                      |
-
-## Status badge colour mapping
-
-| Status       | Colour          |
-| ------------ | --------------- |
-| Submitted    | Green / success |
-| Under review | Amber / warning |
-| Closed       | Blue / info     |
-| Rejected     | Red / error     |
-| Draft        | Grey / neutral  |
-
----
-
-## Rules
-
--   Breadcrumb is always present — users arriving via deep links need context
--   Entity CTAs (Apply, Save) go inside the details card's right column — not in the breadcrumb row
--   Page-level utility actions (View bookmarks) go in the breadcrumb row — not inside the card
--   Content sections have no card wrapper — they are intentionally borderless
--   Collapsible description: truncate at ~3 lines, "Show more ↓" / "Show less ↑" toggle
--   Key attribute rows: icon + value, no separate field label, up to 3 rows
--   No inline editing — navigate to a separate form screen for edits
--   Status-change actions (Approve / Reject) confirmed via modal before executing
--   When 2+ page-level utility actions exist, collapse into a kebab menu
-
----
-
-## Complete template
-
-Description-based layout. Swap the body section for Location-based or Booking-based as needed.
-
-```tsx
-import { useState, useEffect } from "react";
-import styled from "styled-components";
-import { Navbar } from "@lifesg/react-design-system/navbar";
-import { Footer } from "@lifesg/react-design-system/footer";
-import { Layout } from "@lifesg/react-design-system/layout";
-import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
-import { Card } from "@lifesg/react-design-system/card";
-import { Typography } from "@lifesg/react-design-system/typography";
-import { Button } from "@lifesg/react-design-system/button";
-import { Alert } from "@lifesg/react-design-system/alert";
-import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
-import { Spacing, Colour, MediaQuery } from "@lifesg/react-design-system/theme";
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-interface ItemDetail {
-    id: string;
-    title: string;
-    subtitle: string;
-    description: string;
-    status: string;
-}
-
-// ─── Styled components ────────────────────────────────────────────────────────
-
-const PageWrapper = styled.div`
-    padding: ${Spacing["spacing-32"]} 0;
-    ${MediaQuery.MinWidth.lg} {
-        padding: ${Spacing["spacing-48"]} 0;
-    }
-`;
-
-const BreadcrumbRow = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: ${Spacing["spacing-24"]};
-`;
-
-const DetailCard = styled(Card)`
-    display: flex;
-    gap: ${Spacing["spacing-32"]};
-    padding: ${Spacing["spacing-32"]};
-`;
-
-const ContentArea = styled.div`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: ${Spacing["spacing-16"]};
-`;
-
-const CtaColumn = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: ${Spacing["spacing-12"]};
-    width: 160px;
-    flex-shrink: 0;
-`;
-
-const ContentSection = styled.div`
-    margin-top: ${Spacing["spacing-32"]};
-    display: flex;
-    flex-direction: column;
-    gap: ${Spacing["spacing-16"]};
-`;
-
-const SubtleText = styled(Typography.BodyBL)`
-    color: ${Colour["text-subtler"]};
-`;
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
-interface DetailPageProps {
-    itemId: string;
-}
-
-export default function DetailPage({ itemId }: DetailPageProps) {
-    const [item, setItem] = useState<ItemDetail | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [fetchError, setFetchError] = useState<string | null>(null);
-    const [notFound, setNotFound] = useState(false);
-
-    useEffect(() => {
-        setIsLoading(true);
-        setFetchError(null);
-        setNotFound(false);
-        // FIXME: replace with actual API client and URL to fetch record, e.g.:
-        // apiClient
-        //   .get<ItemDetail>(`/api/v1/items/${itemId}`)
-        //   .then(({ data }) => setItem(data))
-        //   .catch((err) => {
-        //     if (err.status === 404) setNotFound(true);
-        //     else setFetchError(err.message);
-        //   })
-        //   .finally(() => setIsLoading(false));
-        setIsLoading(false);
-    }, [itemId]);
-
-    return (
-        <>
-            <Navbar
-                resources={{
-                    primary: { brandName: "MyService", logoSrc: "/logo.svg" },
-                }}
-                items={{ desktop: [] }}
-            />
-            <main>
-                <PageWrapper>
-                    <Layout.Container type="grid">
-                        <Layout.ColDiv xsCols={8} lgCols={12}>
-                            {/* Loading */}
-                            {isLoading && (
-                                <Typography.BodyMD>
-                                    Loading...
-                                </Typography.BodyMD>
-                            )}
-
-                            {/* 404 */}
-                            {!isLoading && notFound && (
-                                <ErrorDisplay
-                                    type="404"
-                                    actionButton={{
-                                        children: "Go back",
-                                        onClick: () => history.back(),
-                                    }}
-                                />
-                            )}
-
-                            {/* Fetch error */}
-                            {!isLoading && fetchError && (
-                                <Alert
-                                    type="error"
-                                    actionLink={{
-                                        children: "Try again",
-                                        onClick: () => window.location.reload(),
-                                    }}
-                                >
-                                    {fetchError}
-                                </Alert>
-                            )}
-
-                            {/* Content */}
-                            {!isLoading && !notFound && !fetchError && item && (
-                                <>
-                                    <BreadcrumbRow>
-                                        <Breadcrumb
-                                            items={[
-                                                { label: "Home", href: "/" },
-                                                {
-                                                    label: "Items",
-                                                    href: "/items",
-                                                },
-                                                { label: item.title },
-                                            ]}
-                                        />
-                                        {/* Page-level utility action — e.g. bookmark */}
-                                        {/* <Button.Default styleType="light">Bookmark</Button.Default> */}
-                                    </BreadcrumbRow>
-
-                                    <DetailCard>
-                                        <ContentArea>
-                                            <Typography.HeadingXL as="h1">
-                                                {item.title}
-                                            </Typography.HeadingXL>
-                                            <Typography.HeadingSM>
-                                                {item.subtitle}
-                                            </Typography.HeadingSM>
-                                            <SubtleText>
-                                                {item.description}
-                                            </SubtleText>
-                                        </ContentArea>
-                                        <CtaColumn>
-                                            <Button.Default styleType="default">
-                                                Apply
-                                            </Button.Default>
-                                            <Button.Default styleType="secondary">
-                                                Save
-                                            </Button.Default>
-                                        </CtaColumn>
-                                    </DetailCard>
-
-                                    <ContentSection>
-                                        <Typography.HeadingSM as="h2">
-                                            Section heading
-                                        </Typography.HeadingSM>
-                                        <Typography.BodyBL>
-                                            Section body paragraph.
-                                        </Typography.BodyBL>
-                                    </ContentSection>
-                                </>
-                            )}
-                        </Layout.ColDiv>
-                    </Layout.Container>
-                </PageWrapper>
-            </main>
-            <Footer />
-        </>
-    );
-}
-```
-
----
-
-## Anti-patterns
-
--   Do not use `Form.Input` or any form component to display read-only values — use `UnEditableSection` or plain `Typography`
--   Do not omit the breadcrumb
--   Do not hide empty sections with blank space — remove them entirely if no data
--   Do not place the breadcrumb inside a `Card`
--   Do not use `Typography.BodyBL` alone as a section heading — always `as="h2"` for accessibility
--   Do not put entity CTAs in the breadcrumb row
--   Do not put page-level utility actions inside the details card
--   Do not wrap content sections in a `Card`
diff --git a/docs/skills/cc-flagship-ds/SKILL-v4.md b/docs/skills/fds-build/SKILL-v4.md
similarity index 96%
rename from docs/skills/cc-flagship-ds/SKILL-v4.md
rename to docs/skills/fds-build/SKILL-v4.md
index 5b0644144d..e0518adc6a 100644
--- a/docs/skills/cc-flagship-ds/SKILL-v4.md
+++ b/docs/skills/fds-build/SKILL-v4.md
@@ -1,5 +1,5 @@
 ---
-name: "flagship-v4"
+name: "fds-build-v4"
 description: "Use when building with @lifesg/react-design-system v4 (alpha). Covers composition rules, correct import patterns, token usage, and component discovery. Apply whenever the user's package.json has @lifesg/react-design-system ^4.x."
 metadata:
     version: "4.0.0-alpha"
@@ -27,7 +27,7 @@ Do not install `styled-components` — v4 uses CSS Modules for custom styles.
 
 Peer deps: `react` + `react-dom` (^17, ^18, or ^19).
 
-**If the project is new or missing setup** — read `./resources/v4/patterns/setup.md` for the full CSS/ThemeProvider/Vite walkthrough before writing any component code.
+**If the project is new or missing setup** — read `./resources/v4/setup/setup.md` for the full CSS/ThemeProvider/Vite walkthrough before writing any component code.
 
 ---
 
@@ -144,7 +144,7 @@ This skill is self-contained — all resource files live under `./resources/` re
 
 | Task                                                                  | What to read                                                                                        |
 | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| New project / missing setup                                           | `./resources/v4/patterns/setup.md`                                                                  |
+| New project / missing setup                                           | `./resources/v4/setup/setup.md`                                                                     |
 | Find the right component                                              | `./catalogue.md` — search "Also known as" column by keyword                                         |
 | Use a component                                                       | Check `./resources/v4/components/{name}/` first; fall back to `./resources/v3/components/{name}.md` |
 | Grid system, breakpoints, column widths                               | `./resources/v3/components/layout.md`                                                               |
@@ -165,9 +165,9 @@ This skill is self-contained — all resource files live under `./resources/` re
 | Symptom                                                                    | Fix                                                                                                                                                                                      |
 | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Components throw errors                                                    | Add `ThemeProvider` from `@lifesg/react-design-system/theme`                                                                                                                             |
-| No styles / wrong fonts                                                    | Read `./resources/v4/patterns/setup.md` — CSS imports are likely missing or mismatched                                                                                                   |
+| No styles / wrong fonts                                                    | Read `./resources/v4/setup/setup.md` — CSS imports are likely missing or mismatched                                                                                                      |
 | Font falls back to serif (Times)                                           | `body { font-family }` not set — add `font-family: var(--fds-font-family-body)` to `index.css`                                                                                           |
-| Navbar links have underline / user-agent margins on headings or paragraphs | CSS reset missing — v3 CDN `main.css` included a full reset; v4 npm CSS does not. Add the reset block from `./resources/v4/patterns/setup.md` Step 2 to `index.css`                      |
+| Navbar links have underline / user-agent margins on headings or paragraphs | CSS reset missing — v3 CDN `main.css` included a full reset; v4 npm CSS does not. Add the reset block from `./resources/v4/setup/setup.md` Step 2 to `index.css`                         |
 | Footer doesn't stick to bottom on short pages                              | v4 `ThemeProvider` renders a wrapper `<div>` as the only child of `#root`, breaking the flex column. Add `#root > div { display: flex; flex-direction: column; flex: 1 }` to `index.css` |
 | Responsive breakpoint rules don't fire                                     | Using `:where(body.fds-breakpoint-*)` — replace with `:global(body.fds-breakpoint-*)` so CSS Modules doesn't scope the class                                                             |
 | Theme CSS not loading                                                      | Vite resolves `node_modules` CSS automatically; other tools need CSS resolver config                                                                                                     |
diff --git a/docs/skills/cc-flagship-ds/SKILL.md b/docs/skills/fds-build/SKILL.md
similarity index 94%
rename from docs/skills/cc-flagship-ds/SKILL.md
rename to docs/skills/fds-build/SKILL.md
index d48d2a44a8..7e1e346f1d 100644
--- a/docs/skills/cc-flagship-ds/SKILL.md
+++ b/docs/skills/fds-build/SKILL.md
@@ -1,5 +1,5 @@
 ---
-name: "cc-flagship-ds"
+name: "fds-build"
 description: "Use when building with @lifesg/react-design-system v3. Covers composition rules, correct import patterns, styled-components token usage, and component discovery. Apply whenever the user's package.json has @lifesg/react-design-system ^3.x (or no version). If package.json shows ^4.x, load SKILL-v4.md instead."
 metadata:
     version: "3.x"
@@ -37,7 +37,7 @@ pnpm add @lifesg/react-design-system @lifesg/react-icons styled-components @floa
 
 Peer deps: `react` + `react-dom` (^17, ^18, or ^19).
 
-**If the project is new or missing setup** — read `./resources/v3/patterns/setup.md` for the full CSS/ThemeProvider/Vite walkthrough before writing any component code.
+**If the project is new or missing setup** — read `./resources/v3/setup/setup.md` for the full CSS/ThemeProvider/Vite walkthrough before writing any component code.
 
 ---
 
@@ -164,7 +164,7 @@ This skill is self-contained — all resource files live under `./resources/` re
 
 | Task                                                                  | What to read                                                           |
 | --------------------------------------------------------------------- | ---------------------------------------------------------------------- |
-| New project / missing setup                                           | `./resources/v3/patterns/setup.md`                                     |
+| New project / missing setup                                           | `./resources/v3/setup/setup.md`                                        |
 | Find the right component                                              | `./catalogue.md` — search "Also known as" column by keyword            |
 | Use a component                                                       | `./resources/v3/components/{name}.md` — contains props AND usage rules |
 | Grid system, breakpoints, column widths                               | `./resources/v3/components/layout.md`                                  |
@@ -182,9 +182,9 @@ This skill is self-contained — all resource files live under `./resources/` re
 
 ## Gotchas
 
-| Symptom                             | Fix                                                                                |
-| ----------------------------------- | ---------------------------------------------------------------------------------- |
-| Components throw errors             | Add `StyleSheetManager` + `ThemeProvider` wrapping app root                        |
-| styled-components DOM prop warnings | `StyleSheetManager` is missing or not wrapping `ThemeProvider`                     |
-| No styles / wrong fonts             | Read `./resources/v3/patterns/setup.md` — CSS imports likely missing or mismatched |
-| Token in inline `style={{}}`        | Tokens are functions — move to a `styled` template literal                         |
+| Symptom                             | Fix                                                                             |
+| ----------------------------------- | ------------------------------------------------------------------------------- |
+| Components throw errors             | Add `StyleSheetManager` + `ThemeProvider` wrapping app root                     |
+| styled-components DOM prop warnings | `StyleSheetManager` is missing or not wrapping `ThemeProvider`                  |
+| No styles / wrong fonts             | Read `./resources/v3/setup/setup.md` — CSS imports likely missing or mismatched |
+| Token in inline `style={{}}`        | Tokens are functions — move to a `styled` template literal                      |
diff --git a/docs/skills/cc-flagship-ds/catalogue.md b/docs/skills/fds-build/catalogue.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/catalogue.md
rename to docs/skills/fds-build/catalogue.md
diff --git a/docs/skills/cc-flagship-ds/evals/evals.json b/docs/skills/fds-build/evals/evals.json
similarity index 99%
rename from docs/skills/cc-flagship-ds/evals/evals.json
rename to docs/skills/fds-build/evals/evals.json
index daf2061a8a..a45afb2a10 100644
--- a/docs/skills/cc-flagship-ds/evals/evals.json
+++ b/docs/skills/fds-build/evals/evals.json
@@ -1,5 +1,5 @@
 {
-    "skill_name": "cc-flagship-ds",
+    "skill_name": "fds-build",
     "evals": [
         {
             "id": 0,
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/accordion.md b/docs/skills/fds-build/resources/v3/components/accordion.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/accordion.md
rename to docs/skills/fds-build/resources/v3/components/accordion.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/alert.md b/docs/skills/fds-build/resources/v3/components/alert.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/alert.md
rename to docs/skills/fds-build/resources/v3/components/alert.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/animation.md b/docs/skills/fds-build/resources/v3/components/animation.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/animation.md
rename to docs/skills/fds-build/resources/v3/components/animation.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/avatar.md b/docs/skills/fds-build/resources/v3/components/avatar.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/avatar.md
rename to docs/skills/fds-build/resources/v3/components/avatar.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/badge.md b/docs/skills/fds-build/resources/v3/components/badge.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/badge.md
rename to docs/skills/fds-build/resources/v3/components/badge.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/box-container.md b/docs/skills/fds-build/resources/v3/components/box-container.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/box-container.md
rename to docs/skills/fds-build/resources/v3/components/box-container.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/breadcrumb.md b/docs/skills/fds-build/resources/v3/components/breadcrumb.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/breadcrumb.md
rename to docs/skills/fds-build/resources/v3/components/breadcrumb.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/button-with-icon.md b/docs/skills/fds-build/resources/v3/components/button-with-icon.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/button-with-icon.md
rename to docs/skills/fds-build/resources/v3/components/button-with-icon.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/button.md b/docs/skills/fds-build/resources/v3/components/button.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/button.md
rename to docs/skills/fds-build/resources/v3/components/button.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/calendar.md b/docs/skills/fds-build/resources/v3/components/calendar.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/calendar.md
rename to docs/skills/fds-build/resources/v3/components/calendar.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/card.md b/docs/skills/fds-build/resources/v3/components/card.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/card.md
rename to docs/skills/fds-build/resources/v3/components/card.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/checkbox.md b/docs/skills/fds-build/resources/v3/components/checkbox.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/checkbox.md
rename to docs/skills/fds-build/resources/v3/components/checkbox.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/countdown-timer.md b/docs/skills/fds-build/resources/v3/components/countdown-timer.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/countdown-timer.md
rename to docs/skills/fds-build/resources/v3/components/countdown-timer.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/data-table.md b/docs/skills/fds-build/resources/v3/components/data-table.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/data-table.md
rename to docs/skills/fds-build/resources/v3/components/data-table.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/date-navigator.md b/docs/skills/fds-build/resources/v3/components/date-navigator.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/date-navigator.md
rename to docs/skills/fds-build/resources/v3/components/date-navigator.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/divider.md b/docs/skills/fds-build/resources/v3/components/divider.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/divider.md
rename to docs/skills/fds-build/resources/v3/components/divider.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/drawer.md b/docs/skills/fds-build/resources/v3/components/drawer.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/drawer.md
rename to docs/skills/fds-build/resources/v3/components/drawer.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/error-display.md b/docs/skills/fds-build/resources/v3/components/error-display.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/error-display.md
rename to docs/skills/fds-build/resources/v3/components/error-display.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/feedback-rating.md b/docs/skills/fds-build/resources/v3/components/feedback-rating.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/feedback-rating.md
rename to docs/skills/fds-build/resources/v3/components/feedback-rating.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/file-download.md b/docs/skills/fds-build/resources/v3/components/file-download.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/file-download.md
rename to docs/skills/fds-build/resources/v3/components/file-download.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/file-upload.md b/docs/skills/fds-build/resources/v3/components/file-upload.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/file-upload.md
rename to docs/skills/fds-build/resources/v3/components/file-upload.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/filter.md b/docs/skills/fds-build/resources/v3/components/filter.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/filter.md
rename to docs/skills/fds-build/resources/v3/components/filter.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/footer.md b/docs/skills/fds-build/resources/v3/components/footer.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/footer.md
rename to docs/skills/fds-build/resources/v3/components/footer.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-date-input.md b/docs/skills/fds-build/resources/v3/components/form-date-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-date-input.md
rename to docs/skills/fds-build/resources/v3/components/form-date-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-date-range-input.md b/docs/skills/fds-build/resources/v3/components/form-date-range-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-date-range-input.md
rename to docs/skills/fds-build/resources/v3/components/form-date-range-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-e-signature.md b/docs/skills/fds-build/resources/v3/components/form-e-signature.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-e-signature.md
rename to docs/skills/fds-build/resources/v3/components/form-e-signature.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-input.md b/docs/skills/fds-build/resources/v3/components/form-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-input.md
rename to docs/skills/fds-build/resources/v3/components/form-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-masked-input.md b/docs/skills/fds-build/resources/v3/components/form-masked-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-masked-input.md
rename to docs/skills/fds-build/resources/v3/components/form-masked-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-multi-select.md b/docs/skills/fds-build/resources/v3/components/form-multi-select.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-multi-select.md
rename to docs/skills/fds-build/resources/v3/components/form-multi-select.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-nested-multi-select.md b/docs/skills/fds-build/resources/v3/components/form-nested-multi-select.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-nested-multi-select.md
rename to docs/skills/fds-build/resources/v3/components/form-nested-multi-select.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-nested-select.md b/docs/skills/fds-build/resources/v3/components/form-nested-select.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-nested-select.md
rename to docs/skills/fds-build/resources/v3/components/form-nested-select.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-otp-verification.md b/docs/skills/fds-build/resources/v3/components/form-otp-verification.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-otp-verification.md
rename to docs/skills/fds-build/resources/v3/components/form-otp-verification.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-phone-number-input.md b/docs/skills/fds-build/resources/v3/components/form-phone-number-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-phone-number-input.md
rename to docs/skills/fds-build/resources/v3/components/form-phone-number-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-predictive-text-input.md b/docs/skills/fds-build/resources/v3/components/form-predictive-text-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-predictive-text-input.md
rename to docs/skills/fds-build/resources/v3/components/form-predictive-text-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-select.md b/docs/skills/fds-build/resources/v3/components/form-select.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-select.md
rename to docs/skills/fds-build/resources/v3/components/form-select.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-slider.md b/docs/skills/fds-build/resources/v3/components/form-slider.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-slider.md
rename to docs/skills/fds-build/resources/v3/components/form-slider.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-textarea.md b/docs/skills/fds-build/resources/v3/components/form-textarea.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-textarea.md
rename to docs/skills/fds-build/resources/v3/components/form-textarea.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-time-range-picker.md b/docs/skills/fds-build/resources/v3/components/form-time-range-picker.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-time-range-picker.md
rename to docs/skills/fds-build/resources/v3/components/form-time-range-picker.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-timepicker.md b/docs/skills/fds-build/resources/v3/components/form-timepicker.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-timepicker.md
rename to docs/skills/fds-build/resources/v3/components/form-timepicker.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/form-unit-number-input.md b/docs/skills/fds-build/resources/v3/components/form-unit-number-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/form-unit-number-input.md
rename to docs/skills/fds-build/resources/v3/components/form-unit-number-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/fullscreen-image-carousel.md b/docs/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/fullscreen-image-carousel.md
rename to docs/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/histogram-slider.md b/docs/skills/fds-build/resources/v3/components/histogram-slider.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/histogram-slider.md
rename to docs/skills/fds-build/resources/v3/components/histogram-slider.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/icon-button.md b/docs/skills/fds-build/resources/v3/components/icon-button.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/icon-button.md
rename to docs/skills/fds-build/resources/v3/components/icon-button.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/icon.md b/docs/skills/fds-build/resources/v3/components/icon.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/icon.md
rename to docs/skills/fds-build/resources/v3/components/icon.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/image-button.md b/docs/skills/fds-build/resources/v3/components/image-button.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/image-button.md
rename to docs/skills/fds-build/resources/v3/components/image-button.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/input.md b/docs/skills/fds-build/resources/v3/components/input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/input.md
rename to docs/skills/fds-build/resources/v3/components/input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/language-switcher.md b/docs/skills/fds-build/resources/v3/components/language-switcher.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/language-switcher.md
rename to docs/skills/fds-build/resources/v3/components/language-switcher.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/layout.md b/docs/skills/fds-build/resources/v3/components/layout.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/layout.md
rename to docs/skills/fds-build/resources/v3/components/layout.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/link-list.md b/docs/skills/fds-build/resources/v3/components/link-list.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/link-list.md
rename to docs/skills/fds-build/resources/v3/components/link-list.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/local-nav.md b/docs/skills/fds-build/resources/v3/components/local-nav.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/local-nav.md
rename to docs/skills/fds-build/resources/v3/components/local-nav.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/masthead.md b/docs/skills/fds-build/resources/v3/components/masthead.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/masthead.md
rename to docs/skills/fds-build/resources/v3/components/masthead.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/menu.md b/docs/skills/fds-build/resources/v3/components/menu.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/menu.md
rename to docs/skills/fds-build/resources/v3/components/menu.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/modal.md b/docs/skills/fds-build/resources/v3/components/modal.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/modal.md
rename to docs/skills/fds-build/resources/v3/components/modal.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/navbar.md b/docs/skills/fds-build/resources/v3/components/navbar.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/navbar.md
rename to docs/skills/fds-build/resources/v3/components/navbar.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/notification-banner.md b/docs/skills/fds-build/resources/v3/components/notification-banner.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/notification-banner.md
rename to docs/skills/fds-build/resources/v3/components/notification-banner.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/pagination.md b/docs/skills/fds-build/resources/v3/components/pagination.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/pagination.md
rename to docs/skills/fds-build/resources/v3/components/pagination.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/pill.md b/docs/skills/fds-build/resources/v3/components/pill.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/pill.md
rename to docs/skills/fds-build/resources/v3/components/pill.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/popover.md b/docs/skills/fds-build/resources/v3/components/popover.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/popover.md
rename to docs/skills/fds-build/resources/v3/components/popover.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/progress-indicator.md b/docs/skills/fds-build/resources/v3/components/progress-indicator.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/progress-indicator.md
rename to docs/skills/fds-build/resources/v3/components/progress-indicator.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/radio-button.md b/docs/skills/fds-build/resources/v3/components/radio-button.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/radio-button.md
rename to docs/skills/fds-build/resources/v3/components/radio-button.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/schedule.md b/docs/skills/fds-build/resources/v3/components/schedule.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/schedule.md
rename to docs/skills/fds-build/resources/v3/components/schedule.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/sidenav.md b/docs/skills/fds-build/resources/v3/components/sidenav.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/sidenav.md
rename to docs/skills/fds-build/resources/v3/components/sidenav.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/singpass-button.md b/docs/skills/fds-build/resources/v3/components/singpass-button.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/singpass-button.md
rename to docs/skills/fds-build/resources/v3/components/singpass-button.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/smart-app-banner.md b/docs/skills/fds-build/resources/v3/components/smart-app-banner.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/smart-app-banner.md
rename to docs/skills/fds-build/resources/v3/components/smart-app-banner.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/tab.md b/docs/skills/fds-build/resources/v3/components/tab.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/tab.md
rename to docs/skills/fds-build/resources/v3/components/tab.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/tag.md b/docs/skills/fds-build/resources/v3/components/tag.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/tag.md
rename to docs/skills/fds-build/resources/v3/components/tag.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/text-list.md b/docs/skills/fds-build/resources/v3/components/text-list.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/text-list.md
rename to docs/skills/fds-build/resources/v3/components/text-list.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar-week.md b/docs/skills/fds-build/resources/v3/components/time-slot-bar-week.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar-week.md
rename to docs/skills/fds-build/resources/v3/components/time-slot-bar-week.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar.md b/docs/skills/fds-build/resources/v3/components/time-slot-bar.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/time-slot-bar.md
rename to docs/skills/fds-build/resources/v3/components/time-slot-bar.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/time-slot-week-view.md b/docs/skills/fds-build/resources/v3/components/time-slot-week-view.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/time-slot-week-view.md
rename to docs/skills/fds-build/resources/v3/components/time-slot-week-view.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/timeline.md b/docs/skills/fds-build/resources/v3/components/timeline.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/timeline.md
rename to docs/skills/fds-build/resources/v3/components/timeline.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/timetable.md b/docs/skills/fds-build/resources/v3/components/timetable.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/timetable.md
rename to docs/skills/fds-build/resources/v3/components/timetable.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/toast.md b/docs/skills/fds-build/resources/v3/components/toast.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/toast.md
rename to docs/skills/fds-build/resources/v3/components/toast.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/toggle.md b/docs/skills/fds-build/resources/v3/components/toggle.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/toggle.md
rename to docs/skills/fds-build/resources/v3/components/toggle.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/tooltip.md b/docs/skills/fds-build/resources/v3/components/tooltip.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/tooltip.md
rename to docs/skills/fds-build/resources/v3/components/tooltip.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/typography.md b/docs/skills/fds-build/resources/v3/components/typography.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/typography.md
rename to docs/skills/fds-build/resources/v3/components/typography.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/components/uneditable-section.md b/docs/skills/fds-build/resources/v3/components/uneditable-section.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/components/uneditable-section.md
rename to docs/skills/fds-build/resources/v3/components/uneditable-section.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/foundations/layout-composition-patterns.md b/docs/skills/fds-build/resources/v3/foundations/layout-composition-patterns.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/foundations/layout-composition-patterns.md
rename to docs/skills/fds-build/resources/v3/foundations/layout-composition-patterns.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/foundations/tokens.md b/docs/skills/fds-build/resources/v3/foundations/tokens.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/foundations/tokens.md
rename to docs/skills/fds-build/resources/v3/foundations/tokens.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/patterns/states.md b/docs/skills/fds-build/resources/v3/patterns/states.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/patterns/states.md
rename to docs/skills/fds-build/resources/v3/patterns/states.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/patterns/setup.md b/docs/skills/fds-build/resources/v3/setup/setup.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/patterns/setup.md
rename to docs/skills/fds-build/resources/v3/setup/setup.md
diff --git a/docs/skills/cc-flagship-ds/resources/v3/templates/form.md b/docs/skills/fds-build/resources/v3/templates/form.md
similarity index 99%
rename from docs/skills/cc-flagship-ds/resources/v3/templates/form.md
rename to docs/skills/fds-build/resources/v3/templates/form.md
index ffea31f014..ddea4e09b3 100644
--- a/docs/skills/cc-flagship-ds/resources/v3/templates/form.md
+++ b/docs/skills/fds-build/resources/v3/templates/form.md
@@ -519,6 +519,9 @@ export default function FormPage() {
                                 selectedOption={CATEGORY_OPTIONS.find(
                                     (o) => o.value === category
                                 )}
+                                listExtractor={(o) => o.label}
+                                displayValueExtractor={(o) => o.label}
+                                valueExtractor={(o) => o.value}
                                 onSelectOption={(opt) => {
                                     setCategory(opt.value);
                                     if (errors.category)
diff --git a/docs/skills/cc-flagship-ds/resources/v3/templates/listing.md b/docs/skills/fds-build/resources/v3/templates/listing.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v3/templates/listing.md
rename to docs/skills/fds-build/resources/v3/templates/listing.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/accordion.md b/docs/skills/fds-build/resources/v4/components/accordion.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/accordion.md
rename to docs/skills/fds-build/resources/v4/components/accordion.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/alert.md b/docs/skills/fds-build/resources/v4/components/alert.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/alert.md
rename to docs/skills/fds-build/resources/v4/components/alert.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/animation.md b/docs/skills/fds-build/resources/v4/components/animation.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/animation.md
rename to docs/skills/fds-build/resources/v4/components/animation.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/avatar.md b/docs/skills/fds-build/resources/v4/components/avatar.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/avatar.md
rename to docs/skills/fds-build/resources/v4/components/avatar.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/badge.md b/docs/skills/fds-build/resources/v4/components/badge.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/badge.md
rename to docs/skills/fds-build/resources/v4/components/badge.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/box-container.md b/docs/skills/fds-build/resources/v4/components/box-container.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/box-container.md
rename to docs/skills/fds-build/resources/v4/components/box-container.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/breadcrumb.md b/docs/skills/fds-build/resources/v4/components/breadcrumb.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/breadcrumb.md
rename to docs/skills/fds-build/resources/v4/components/breadcrumb.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/button.md b/docs/skills/fds-build/resources/v4/components/button.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/button.md
rename to docs/skills/fds-build/resources/v4/components/button.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/calendar.md b/docs/skills/fds-build/resources/v4/components/calendar.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/calendar.md
rename to docs/skills/fds-build/resources/v4/components/calendar.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/card.md b/docs/skills/fds-build/resources/v4/components/card.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/card.md
rename to docs/skills/fds-build/resources/v4/components/card.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/checkbox.md b/docs/skills/fds-build/resources/v4/components/checkbox.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/checkbox.md
rename to docs/skills/fds-build/resources/v4/components/checkbox.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/countdown-timer.md b/docs/skills/fds-build/resources/v4/components/countdown-timer.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/countdown-timer.md
rename to docs/skills/fds-build/resources/v4/components/countdown-timer.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/data-table.md b/docs/skills/fds-build/resources/v4/components/data-table.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/data-table.md
rename to docs/skills/fds-build/resources/v4/components/data-table.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/date-navigator.md b/docs/skills/fds-build/resources/v4/components/date-navigator.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/date-navigator.md
rename to docs/skills/fds-build/resources/v4/components/date-navigator.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/divider.md b/docs/skills/fds-build/resources/v4/components/divider.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/divider.md
rename to docs/skills/fds-build/resources/v4/components/divider.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/drawer.md b/docs/skills/fds-build/resources/v4/components/drawer.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/drawer.md
rename to docs/skills/fds-build/resources/v4/components/drawer.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/error-display.md b/docs/skills/fds-build/resources/v4/components/error-display.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/error-display.md
rename to docs/skills/fds-build/resources/v4/components/error-display.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/feedback-rating.md b/docs/skills/fds-build/resources/v4/components/feedback-rating.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/feedback-rating.md
rename to docs/skills/fds-build/resources/v4/components/feedback-rating.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/file-download.md b/docs/skills/fds-build/resources/v4/components/file-download.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/file-download.md
rename to docs/skills/fds-build/resources/v4/components/file-download.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/file-upload.md b/docs/skills/fds-build/resources/v4/components/file-upload.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/file-upload.md
rename to docs/skills/fds-build/resources/v4/components/file-upload.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/filter.md b/docs/skills/fds-build/resources/v4/components/filter.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/filter.md
rename to docs/skills/fds-build/resources/v4/components/filter.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/footer.md b/docs/skills/fds-build/resources/v4/components/footer.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/footer.md
rename to docs/skills/fds-build/resources/v4/components/footer.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-date-input.md b/docs/skills/fds-build/resources/v4/components/form-date-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-date-input.md
rename to docs/skills/fds-build/resources/v4/components/form-date-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-date-range-input.md b/docs/skills/fds-build/resources/v4/components/form-date-range-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-date-range-input.md
rename to docs/skills/fds-build/resources/v4/components/form-date-range-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-e-signature.md b/docs/skills/fds-build/resources/v4/components/form-e-signature.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-e-signature.md
rename to docs/skills/fds-build/resources/v4/components/form-e-signature.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-input.md b/docs/skills/fds-build/resources/v4/components/form-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-input.md
rename to docs/skills/fds-build/resources/v4/components/form-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-masked-input.md b/docs/skills/fds-build/resources/v4/components/form-masked-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-masked-input.md
rename to docs/skills/fds-build/resources/v4/components/form-masked-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-multi-select.md b/docs/skills/fds-build/resources/v4/components/form-multi-select.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-multi-select.md
rename to docs/skills/fds-build/resources/v4/components/form-multi-select.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-nested-multi-select.md b/docs/skills/fds-build/resources/v4/components/form-nested-multi-select.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-nested-multi-select.md
rename to docs/skills/fds-build/resources/v4/components/form-nested-multi-select.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-nested-select.md b/docs/skills/fds-build/resources/v4/components/form-nested-select.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-nested-select.md
rename to docs/skills/fds-build/resources/v4/components/form-nested-select.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-otp-verification.md b/docs/skills/fds-build/resources/v4/components/form-otp-verification.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-otp-verification.md
rename to docs/skills/fds-build/resources/v4/components/form-otp-verification.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-phone-number-input.md b/docs/skills/fds-build/resources/v4/components/form-phone-number-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-phone-number-input.md
rename to docs/skills/fds-build/resources/v4/components/form-phone-number-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-predictive-text-input.md b/docs/skills/fds-build/resources/v4/components/form-predictive-text-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-predictive-text-input.md
rename to docs/skills/fds-build/resources/v4/components/form-predictive-text-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-select.md b/docs/skills/fds-build/resources/v4/components/form-select.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-select.md
rename to docs/skills/fds-build/resources/v4/components/form-select.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-slider.md b/docs/skills/fds-build/resources/v4/components/form-slider.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-slider.md
rename to docs/skills/fds-build/resources/v4/components/form-slider.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-textarea.md b/docs/skills/fds-build/resources/v4/components/form-textarea.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-textarea.md
rename to docs/skills/fds-build/resources/v4/components/form-textarea.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-time-range-picker.md b/docs/skills/fds-build/resources/v4/components/form-time-range-picker.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-time-range-picker.md
rename to docs/skills/fds-build/resources/v4/components/form-time-range-picker.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-timepicker.md b/docs/skills/fds-build/resources/v4/components/form-timepicker.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-timepicker.md
rename to docs/skills/fds-build/resources/v4/components/form-timepicker.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/form-unit-number-input.md b/docs/skills/fds-build/resources/v4/components/form-unit-number-input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/form-unit-number-input.md
rename to docs/skills/fds-build/resources/v4/components/form-unit-number-input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/fullscreen-image-carousel.md b/docs/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/fullscreen-image-carousel.md
rename to docs/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/histogram-slider.md b/docs/skills/fds-build/resources/v4/components/histogram-slider.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/histogram-slider.md
rename to docs/skills/fds-build/resources/v4/components/histogram-slider.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/icon.md b/docs/skills/fds-build/resources/v4/components/icon.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/icon.md
rename to docs/skills/fds-build/resources/v4/components/icon.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/image-button.md b/docs/skills/fds-build/resources/v4/components/image-button.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/image-button.md
rename to docs/skills/fds-build/resources/v4/components/image-button.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/input.md b/docs/skills/fds-build/resources/v4/components/input.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/input.md
rename to docs/skills/fds-build/resources/v4/components/input.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/language-switcher.md b/docs/skills/fds-build/resources/v4/components/language-switcher.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/language-switcher.md
rename to docs/skills/fds-build/resources/v4/components/language-switcher.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/layout.md b/docs/skills/fds-build/resources/v4/components/layout.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/layout.md
rename to docs/skills/fds-build/resources/v4/components/layout.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/link-list.md b/docs/skills/fds-build/resources/v4/components/link-list.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/link-list.md
rename to docs/skills/fds-build/resources/v4/components/link-list.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/local-nav.md b/docs/skills/fds-build/resources/v4/components/local-nav.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/local-nav.md
rename to docs/skills/fds-build/resources/v4/components/local-nav.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/masthead.md b/docs/skills/fds-build/resources/v4/components/masthead.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/masthead.md
rename to docs/skills/fds-build/resources/v4/components/masthead.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/menu.md b/docs/skills/fds-build/resources/v4/components/menu.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/menu.md
rename to docs/skills/fds-build/resources/v4/components/menu.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/modal.md b/docs/skills/fds-build/resources/v4/components/modal.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/modal.md
rename to docs/skills/fds-build/resources/v4/components/modal.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/navbar.md b/docs/skills/fds-build/resources/v4/components/navbar.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/navbar.md
rename to docs/skills/fds-build/resources/v4/components/navbar.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/notification-banner.md b/docs/skills/fds-build/resources/v4/components/notification-banner.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/notification-banner.md
rename to docs/skills/fds-build/resources/v4/components/notification-banner.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/pagination.md b/docs/skills/fds-build/resources/v4/components/pagination.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/pagination.md
rename to docs/skills/fds-build/resources/v4/components/pagination.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/pill.md b/docs/skills/fds-build/resources/v4/components/pill.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/pill.md
rename to docs/skills/fds-build/resources/v4/components/pill.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/popover.md b/docs/skills/fds-build/resources/v4/components/popover.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/popover.md
rename to docs/skills/fds-build/resources/v4/components/popover.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/progress-indicator.md b/docs/skills/fds-build/resources/v4/components/progress-indicator.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/progress-indicator.md
rename to docs/skills/fds-build/resources/v4/components/progress-indicator.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/radio-button.md b/docs/skills/fds-build/resources/v4/components/radio-button.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/radio-button.md
rename to docs/skills/fds-build/resources/v4/components/radio-button.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/schedule.md b/docs/skills/fds-build/resources/v4/components/schedule.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/schedule.md
rename to docs/skills/fds-build/resources/v4/components/schedule.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/sidenav.md b/docs/skills/fds-build/resources/v4/components/sidenav.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/sidenav.md
rename to docs/skills/fds-build/resources/v4/components/sidenav.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/singpass-button.md b/docs/skills/fds-build/resources/v4/components/singpass-button.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/singpass-button.md
rename to docs/skills/fds-build/resources/v4/components/singpass-button.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/smart-app-banner.md b/docs/skills/fds-build/resources/v4/components/smart-app-banner.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/smart-app-banner.md
rename to docs/skills/fds-build/resources/v4/components/smart-app-banner.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/tab.md b/docs/skills/fds-build/resources/v4/components/tab.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/tab.md
rename to docs/skills/fds-build/resources/v4/components/tab.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/tag.md b/docs/skills/fds-build/resources/v4/components/tag.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/tag.md
rename to docs/skills/fds-build/resources/v4/components/tag.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/text-list.md b/docs/skills/fds-build/resources/v4/components/text-list.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/text-list.md
rename to docs/skills/fds-build/resources/v4/components/text-list.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar-week.md b/docs/skills/fds-build/resources/v4/components/time-slot-bar-week.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar-week.md
rename to docs/skills/fds-build/resources/v4/components/time-slot-bar-week.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar.md b/docs/skills/fds-build/resources/v4/components/time-slot-bar.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/time-slot-bar.md
rename to docs/skills/fds-build/resources/v4/components/time-slot-bar.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/time-slot-week-view.md b/docs/skills/fds-build/resources/v4/components/time-slot-week-view.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/time-slot-week-view.md
rename to docs/skills/fds-build/resources/v4/components/time-slot-week-view.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/timeline.md b/docs/skills/fds-build/resources/v4/components/timeline.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/timeline.md
rename to docs/skills/fds-build/resources/v4/components/timeline.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/timetable.md b/docs/skills/fds-build/resources/v4/components/timetable.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/timetable.md
rename to docs/skills/fds-build/resources/v4/components/timetable.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/toast.md b/docs/skills/fds-build/resources/v4/components/toast.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/toast.md
rename to docs/skills/fds-build/resources/v4/components/toast.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/toggle.md b/docs/skills/fds-build/resources/v4/components/toggle.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/toggle.md
rename to docs/skills/fds-build/resources/v4/components/toggle.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/typography.md b/docs/skills/fds-build/resources/v4/components/typography.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/typography.md
rename to docs/skills/fds-build/resources/v4/components/typography.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/components/uneditable-section.md b/docs/skills/fds-build/resources/v4/components/uneditable-section.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/components/uneditable-section.md
rename to docs/skills/fds-build/resources/v4/components/uneditable-section.md
diff --git a/docs/skills/fds-build/resources/v4/foundations/layout-composition-patterns.md b/docs/skills/fds-build/resources/v4/foundations/layout-composition-patterns.md
new file mode 100644
index 0000000000..14956b9c19
--- /dev/null
+++ b/docs/skills/fds-build/resources/v4/foundations/layout-composition-patterns.md
@@ -0,0 +1,53 @@
+# Layout & Composition Patterns
+
+Cross-cutting rules for assembling FDS components into polished layouts. Apply alongside per-page template files.
+
+---
+
+## Vertical Spacing Rhythm
+
+| Between…                                   | Token        |
+| ------------------------------------------ | ------------ |
+| Page title and first content section       | `spacing-32` |
+| Major page sections (cards → table)        | `spacing-48` |
+| Cards in a grid row (gap)                  | `spacing-24` |
+| Heading and its body text within a section | `spacing-8`  |
+| Form fields within a group                 | `spacing-24` |
+| Form field groups (personal → address)     | `spacing-32` |
+| Button row and the content above it        | `spacing-32` |
+| Last content section and page bottom       | `spacing-64` |
+
+Apply spacing tokens via inline `style` props:
+
+```tsx
+<section style={{ marginBottom: Spacing["spacing-48"] }}>...</section>
+```
+
+---
+
+## Visual Hierarchy
+
+Every page must use at least three distinct text levels.
+
+| Level   | Component              | Colour token   | Use for                                 |
+| ------- | ---------------------- | -------------- | --------------------------------------- |
+| Primary | `Typography.HeadingXL` | `text`         | Page title — one per page               |
+| Section | `Typography.HeadingMD` | `text`         | Section headings within the page        |
+| Card    | `Typography.HeadingSM` | `text`         | Card titles, panel headers              |
+| Body    | `Typography.BodyMD`    | `text`         | Default body text, descriptions         |
+| Support | `Typography.BodySM`    | `text-subtle`  | Secondary info, timestamps, helper text |
+| Caption | `Typography.BodyXS`    | `text-subtler` | Footnotes, disclaimers, metadata        |
+
+Page title pattern: `Typography.HeadingXL` as `h1`, `Typography.BodyMD` with `style={{ color: Colour["text-subtle"] }}` directly below as subtitle.
+
+---
+
+## Anti-patterns
+
+| Anti-pattern                            | Fix                                                               |
+| --------------------------------------- | ----------------------------------------------------------------- |
+| All text the same size and colour       | Use at least 3 Typography sizes; `text-subtle` for secondary text |
+| No spacing between page sections        | `spacing-48` between major sections                               |
+| Summary metric cards stacked vertically | Use a responsive grid: 3–4 across on desktop, stacked on mobile   |
+| Buttons touching content above          | `spacing-32` above button row                                     |
+| Missing page-bottom spacing             | `spacing-64` padding-bottom on page wrapper                       |
diff --git a/docs/skills/fds-build/resources/v4/foundations/tokens.md b/docs/skills/fds-build/resources/v4/foundations/tokens.md
new file mode 100644
index 0000000000..51e57bb880
--- /dev/null
+++ b/docs/skills/fds-build/resources/v4/foundations/tokens.md
@@ -0,0 +1,508 @@
+# Design Tokens — v4
+
+All tokens are imported from `@lifesg/react-design-system/theme`.
+
+```tsx
+import {
+    Colour,
+    Spacing,
+    Radius,
+    Font,
+} from "@lifesg/react-design-system/theme";
+```
+
+In v4, tokens are **plain CSS variable strings** — use them directly in inline `style={{}}` props or as values in CSS Modules. They do not need to be called as functions and do not require `styled-components` or `useTheme`.
+
+```tsx
+// Inline style
+<div
+    style={{
+        background: Colour["bg-stronger"],
+        padding: Spacing["spacing-16"],
+    }}
+/>;
+
+// CSS Modules — assign to a variable then reference
+const bg = Colour["bg-stronger"]; // "var(--fds-colour-bg-stronger)"
+```
+
+No `styled.d.ts` augmentation required. No `useTheme()` hook needed.
+
+---
+
+## Anti-patterns
+
+| Anti-pattern                                                      | Why it fails                                             | Correct alternative                         |
+| ----------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------- |
+| Using `Colour[...]` inside a `styled-components` template literal | `styled-components` is not installed in v4               | Use in `style={{}}` or CSS Modules          |
+| Hardcoding `var(--fds-*)` directly                                | FDS internal variable names may change                   | Use `Colour[...]` / `Spacing[...]` tokens   |
+| Hardcoding hex values                                             | Breaks theming                                           | Always use a Colour token                   |
+| Creating a local token proxy file                                 | Plain strings do not respond to theme changes at runtime | Use `Colour[...]` / `Spacing[...]` directly |
+| Using `SpacingValues`                                             | This export does not exist                               | Use `Spacing`                               |
+| Using `Theme` (named export)                                      | This export does not exist                               | Use a named preset: `LifeSGTheme`, etc.     |
+
+---
+
+## Colour
+
+### Quick decision
+
+| I need a colour for…                     | Token                           |
+| ---------------------------------------- | ------------------------------- |
+| Page / card background                   | `Colour.bg`                     |
+| Emphasis panel / CTA surface             | `Colour["bg-strong"]`           |
+| Brand-tinted surface                     | `Colour["bg-primary-subtlest"]` |
+| Hover state (custom interactive)         | `Colour["bg-hover"]`            |
+| Selected state                           | `Colour["bg-selected"]`         |
+| Disabled background                      | `Colour["bg-disabled"]`         |
+| Modal / drawer backdrop                  | `Colour["overlay-strong"]`      |
+| Body copy, headings                      | `Colour.text`                   |
+| Form labels, UI labels                   | `Colour["text-subtle"]`         |
+| Descriptions, helper text, metadata      | `Colour["text-subtler"]`        |
+| Placeholders                             | `Colour["text-subtlest"]`       |
+| Active / brand text                      | `Colour["text-primary"]`        |
+| Link text                                | `Colour.hyperlink`              |
+| Text on dark backgrounds                 | `Colour["text-inverse"]`        |
+| Disabled text                            | `Colour["text-disabled"]`       |
+| Default border (inputs, cards, dividers) | `Colour.border`                 |
+| Emphasis border                          | `Colour["border-strong"]`       |
+| Brand border / active indicator          | `Colour["border-primary"]`      |
+| Focus ring                               | `Colour["border-focus"]`        |
+| Error border                             | `Colour["border-error"]`        |
+| Default icon                             | `Colour.icon`                   |
+| Secondary / subtle icon                  | `Colour["icon-subtle"]`         |
+| Brand icon                               | `Colour["icon-primary"]`        |
+| Icon on dark backgrounds                 | `Colour["icon-inverse"]`        |
+
+### Notation
+
+Single-word tokens use dot notation: `Colour.text`, `Colour.border`, `Colour.bg`, `Colour.icon`
+
+Hyphenated tokens use bracket notation: `Colour["text-subtle"]`, `Colour["bg-hover"]`
+
+### Usage in v4
+
+```tsx
+// Inline style — most common
+<p style={{ color: Colour["text-subtle"] }}>Secondary text</p>;
+
+// CSS Modules — assign token to a variable
+import styles from "./Card.module.css";
+
+const Card = () => (
+    <div
+        className={styles.card}
+        style={{
+            background: Colour["bg-stronger"],
+            borderColor: Colour.border,
+        }}
+    />
+);
+```
+
+DS components (Button, Form.Input, Card, etc.) handle their own colour states — only apply Colour tokens to custom elements.
+
+### Status tokens
+
+| Status  | Background   | Text           | Icon           | Border           |
+| ------- | ------------ | -------------- | -------------- | ---------------- |
+| Success | `bg-success` | `text-success` | `icon-success` | `border-success` |
+| Warning | `bg-warning` | `text-warning` | `icon-warning` | `border-warning` |
+| Error   | `bg-error`   | `text-error`   | `icon-error`   | `border-error`   |
+| Info    | `bg-info`    | `text-info`    | `icon-info`    | `border-info`    |
+
+All follow bracket notation: `Colour["bg-success"]`, `Colour["text-error"]`.
+
+### Full token reference
+
+#### Text colours
+
+| Token key                | Use for                                    |
+| ------------------------ | ------------------------------------------ |
+| `text`                   | Default body text                          |
+| `text-subtle`            | Secondary / supporting text                |
+| `text-subtler`           | Tertiary / caption-like text               |
+| `text-subtlest`          | Weakest text — muted labels, hints         |
+| `text-primary`           | Brand-coloured text (links, active labels) |
+| `text-hover`             | Text colour on hover states                |
+| `text-selected`          | Text in selected / active state            |
+| `text-selected-hover`    | Text in selected state on hover            |
+| `text-disabled`          | Disabled state text                        |
+| `text-disabled-subtle`   | Subtle disabled text                       |
+| `text-disabled-subtlest` | Faintest disabled text                     |
+| `text-selected-disabled` | Text in selected + disabled state          |
+| `text-success`           | Success state text                         |
+| `text-warning`           | Warning state text                         |
+| `text-error`             | Inline validation error text               |
+| `text-info`              | Informational state text                   |
+| `text-inverse`           | Text on dark / inverted backgrounds        |
+
+#### Icon colours
+
+| Token key                | Use for                           |
+| ------------------------ | --------------------------------- |
+| `icon`                   | Default icon fill                 |
+| `icon-subtle`            | Subdued / secondary icon          |
+| `icon-strongest`         | Highest-contrast icon (very dark) |
+| `icon-primary`           | Brand-coloured icon               |
+| `icon-primary-subtle`    | Muted brand icon                  |
+| `icon-primary-subtlest`  | Faintest brand icon               |
+| `icon-hover`             | Icon on hover                     |
+| `icon-selected`          | Icon in selected state            |
+| `icon-selected-hover`    | Icon in selected state on hover   |
+| `icon-disabled`          | Disabled icon                     |
+| `icon-disabled-subtle`   | Subtle disabled icon              |
+| `icon-selected-disabled` | Icon in selected + disabled state |
+| `icon-success`           | Success state icon                |
+| `icon-warning`           | Warning state icon                |
+| `icon-error`             | Error state icon                  |
+| `icon-error-strong`      | Strong / filled error icon        |
+| `icon-info`              | Informational icon                |
+| `icon-inverse`           | Icon on dark background           |
+| `icon-primary-inverse`   | Brand icon on inverted background |
+
+#### Border colours
+
+| Token key                  | Use for                                     |
+| -------------------------- | ------------------------------------------- |
+| `border`                   | Default input / card / divider borders      |
+| `border-strong`            | Stronger divider or emphasis border         |
+| `border-stronger`          | Strongest border emphasis                   |
+| `border-primary`           | Brand-coloured border                       |
+| `border-primary-subtle`    | Muted brand-coloured border                 |
+| `border-focus`             | Focus ring on interactive elements          |
+| `border-focus-strong`      | Strong focus ring (accessibility highlight) |
+| `border-hover`             | Border on hover                             |
+| `border-hover-strong`      | Strong border on hover                      |
+| `border-selected`          | Selected / active state border              |
+| `border-selected-subtle`   | Subtle selected state border                |
+| `border-selected-subtlest` | Faintest selected state border              |
+| `border-selected-hover`    | Selected state border on hover              |
+| `border-disabled`          | Disabled state border                       |
+| `border-selected-disabled` | Selected + disabled state border            |
+| `border-error`             | Error state border                          |
+| `border-error-focus`       | Focus ring inside error state               |
+| `border-error-strong`      | Strong error state border                   |
+| `border-success`           | Success state border                        |
+| `border-warning`           | Warning state border                        |
+| `border-info`              | Informational border                        |
+
+#### Background colours
+
+| Token key                      | Use for                                     |
+| ------------------------------ | ------------------------------------------- |
+| `bg`                           | Default surface background                  |
+| `bg-strong`                    | Slightly elevated surface                   |
+| `bg-stronger`                  | Card / panel surface                        |
+| `bg-strongest`                 | Highest elevation surface                   |
+| `bg-hover`                     | Background on hover                         |
+| `bg-hover-strong`              | Strong hover background                     |
+| `bg-hover-subtle`              | Subtle hover background                     |
+| `bg-hover-neutral`             | Neutral hover (non-primary elements)        |
+| `bg-hover-neutral-strong`      | Strong neutral hover background             |
+| `bg-selected`                  | Selected item background                    |
+| `bg-selected-hover`            | Selected item background on hover           |
+| `bg-selected-strong`           | Strong selected state                       |
+| `bg-selected-strongest`        | Strongest selected fill                     |
+| `bg-selected-strongest-hover`  | Strongest selected fill on hover            |
+| `bg-disabled`                  | Disabled element background                 |
+| `bg-selected-disabled`         | Selected + disabled background              |
+| `bg-primary`                   | Brand-coloured fill                         |
+| `bg-primary-subtle`            | Subtle brand tint                           |
+| `bg-primary-subtler`           | Lighter brand tint                          |
+| `bg-primary-subtlest`          | Faintest brand tint                         |
+| `bg-primary-hover`             | Brand background on hover                   |
+| `bg-primary-subtlest-hover`    | Faintest brand tint on hover                |
+| `bg-primary-subtlest-selected` | Faintest brand tint in selected state       |
+| `bg-success`                   | Success state background                    |
+| `bg-success-hover`             | Success background on hover                 |
+| `bg-success-strong`            | Strong success fill (badges, chips)         |
+| `bg-success-strong-hover`      | Strong success fill on hover                |
+| `bg-warning`                   | Warning state background                    |
+| `bg-warning-hover`             | Warning background on hover                 |
+| `bg-warning-strong`            | Strong warning fill                         |
+| `bg-warning-strong-hover`      | Strong warning fill on hover                |
+| `bg-error`                     | Error state background                      |
+| `bg-error-hover`               | Error background on hover                   |
+| `bg-error-strong`              | Strong error fill                           |
+| `bg-error-strong-hover`        | Strong error fill on hover                  |
+| `bg-info`                      | Informational background                    |
+| `bg-info-hover`                | Informational background on hover           |
+| `bg-info-strong`               | Strong informational fill                   |
+| `bg-info-strong-hover`         | Strong informational fill on hover          |
+| `bg-inverse`                   | Dark / inverted background                  |
+| `bg-inverse-subtle`            | Subtle inverted background                  |
+| `bg-inverse-subtler`           | Lighter inverted background                 |
+| `bg-inverse-subtlest`          | Faintest inverted background                |
+| `bg-inverse-hover`             | Inverted background on hover                |
+| `bg-available`                 | Available / open slot (scheduling contexts) |
+| `overlay-strong`               | Modal / drawer backdrop                     |
+| `overlay-subtle`               | Soft overlay                                |
+
+#### Hyperlink
+
+| Token key           | Use for                 |
+| ------------------- | ----------------------- |
+| `hyperlink`         | Default link colour     |
+| `hyperlink-inverse` | Link on dark background |
+
+#### Focus
+
+| Token key            | Use for                           |
+| -------------------- | --------------------------------- |
+| `focus-ring`         | Keyboard focus outline colour     |
+| `focus-ring-inverse` | Focus outline on dark backgrounds |
+
+### Overriding
+
+Pass a `colorScheme` override when creating a custom ThemeProvider theme:
+
+```tsx
+<ThemeProvider
+    theme="lifesg"
+    overrides={{
+        primitiveColour: { "primary-50": "#1768BE" },
+        semanticColour: { "text-error": "#A04747" },
+    }}
+>
+```
+
+For dark mode overrides, use `primitiveColourDark` / `semanticColourDark`.
+
+### Rules
+
+-   Never hardcode hex values — always use a Colour token
+-   Use `hyperlink` for link text — not `text-primary`
+-   DS components (Button, Form.Input, Card, etc.) handle their own colour states — only apply Colour tokens to custom elements
+
+---
+
+## Spacing
+
+Base-4 system. Import: `Spacing["spacing-{n}"]` — returns a CSS variable string.
+
+```tsx
+<div style={{ gap: Spacing["spacing-16"], padding: Spacing["spacing-24"] }} />
+```
+
+| Token         | Value | Frequency    | Typical use                             |
+| ------------- | ----- | ------------ | --------------------------------------- |
+| `spacing-0`   | 0px   | Rare         | Reset / collapse                        |
+| `spacing-4`   | 4px   | Rare         | Tight inline gaps                       |
+| `spacing-8`   | 8px   | **Common**   | Icon-text gaps, heading-to-body gaps    |
+| `spacing-12`  | 12px  | Occasional   | Tight component gaps                    |
+| `spacing-16`  | 16px  | **Dominant** | List items, form fields, component gaps |
+| `spacing-20`  | 20px  | Occasional   | Medium-small spacing                    |
+| `spacing-24`  | 24px  | **Dominant** | Card padding, section gaps              |
+| `spacing-32`  | 32px  | Common       | Large spacing, section padding          |
+| `spacing-40`  | 40px  | Occasional   | Extra-large spacing                     |
+| `spacing-48`  | 48px  | Occasional   | Page-level vertical rhythm              |
+| `spacing-64`  | 64px  | Rare         | XXL spacing                             |
+| `spacing-72`  | 72px  | Rare         | Extra-large structural spacing          |
+| `layout-xs`   | —     | —            | Layout grid gutter xs breakpoint        |
+| `layout-sm`   | —     | —            | Layout grid gutter sm breakpoint        |
+| `layout-md`   | —     | —            | Layout grid gutter md breakpoint        |
+| `layout-lg`   | —     | —            | Layout grid gutter lg breakpoint        |
+| `layout-xl`   | —     | —            | Layout grid gutter xl breakpoint        |
+| `layout-xxl`  | —     | —            | Layout grid gutter xxl breakpoint       |
+| `layout-xxxl` | —     | —            | Layout grid gutter xxxl breakpoint      |
+
+Always bracket notation: `Spacing["spacing-16"]`
+
+Never hardcode `px` values — always use a Spacing token.
+
+---
+
+## Radius
+
+`Radius.*` returns a CSS variable string. Use in `style={{ borderRadius: Radius.md }}`.
+
+| Token         | Value  | Use                                                  |
+| ------------- | ------ | ---------------------------------------------------- |
+| `Radius.none` | 0px    | Full-bleed, tables                                   |
+| `Radius.xs`   | 2px    | Rarely needed                                        |
+| `Radius.sm`   | 4px    | **Default** — form elements, small custom components |
+| `Radius.md`   | 8px    | Cards, panels, overlays                              |
+| `Radius.lg`   | 12px   | Modals, large overlays                               |
+| `Radius.full` | 9999px | Pills, avatars, circular elements                    |
+
+Always dot notation: `Radius.sm`, `Radius.md`
+
+DS components have radius baked in — do not override.
+
+---
+
+## Typography
+
+Use `Typography.*` components for all rendered text — same as v3.
+
+| Component                | Default element | When to use                       |
+| ------------------------ | --------------- | --------------------------------- |
+| `Typography.HeadingXXL`  | `h1`            | Hero / landing page title         |
+| `Typography.HeadingXL`   | `h2`            | Page title (top of view)          |
+| `Typography.HeadingLG`   | `h3`            | Section heading — most common     |
+| `Typography.HeadingMD`   | `h4`            | Card heading, subsection          |
+| `Typography.HeadingSM`   | `h5`            | Small heading, list header        |
+| `Typography.HeadingXS`   | `h6`            | Tiny heading, emphasized label    |
+| `Typography.BodyBL`      | `p`             | Default body text, paragraphs     |
+| `Typography.BodyBLSmall` | `p`             | Emphasized small body text        |
+| `Typography.BodyMD`      | `p`             | Medium body text                  |
+| `Typography.BodySM`      | `p`             | Small text, captions, helper text |
+| `Typography.BodyXS`      | `p`             | Metadata, timestamps, footnotes   |
+
+Use the `as` prop when visual size and semantic heading level don't match:
+
+```tsx
+<Typography.HeadingLG as="h2">Section title</Typography.HeadingLG>
+```
+
+Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
+
+### Rules
+
+-   Sentence case for all UI text — "Save changes" not "Save Changes"
+-   Heading level follows reading order, not visual size
+
+### Font tokens in v4
+
+In v4, `Font[...]` tokens return CSS variable strings for individual font properties. Use `Typography.*` components for all text content in JSX — only use `Font` tokens when you need to apply font styles to a non-text container element.
+
+```tsx
+// Match an icon size to adjacent text — use Font.Spec for raw values
+<img style={{ height: Font.Spec["heading-size-xxl"] }} />
+```
+
+There is no multi-property CSS block injection in v4 (that was styled-components only). Use `Typography.*` components instead.
+
+---
+
+## Breakpoints / Media Queries
+
+In v4 there is no `MediaQuery` helper for CSS-in-JS. Use standard CSS media queries in your CSS Modules files.
+
+```css
+/* Card.module.css */
+.grid {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+@media (min-width: 769px) {
+    .grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+```
+
+`Breakpoint` can still be imported for JS conditional logic:
+
+```tsx
+import { Breakpoint } from "@lifesg/react-design-system/theme";
+
+const isDesktop = window.innerWidth > Breakpoint["lg-min"];
+```
+
+### Breakpoint tiers
+
+| Tier  | Screen width   | `*-min` value | `*-max` value | Columns | Gutter | Margin |
+| ----- | -------------- | ------------- | ------------- | ------- | ------ | ------ |
+| `xxs` | 0 – 320 px     | —             | 320 px        | 8       | 16 px  | 24 px  |
+| `xs`  | 321 – 375 px   | 321 px        | 375 px        | 8       | 16 px  | 24 px  |
+| `sm`  | 376 – 480 px   | 376 px        | 480 px        | 8       | 16 px  | 24 px  |
+| `md`  | 481 – 768 px   | 481 px        | 768 px        | 8       | 16 px  | 24 px  |
+| `lg`  | 769 – 1200 px  | 769 px        | 1200 px       | 12      | 32 px  | 48 px  |
+| `xl`  | 1201 – 1440 px | 1201 px       | 1440 px       | 12      | 32 px  | 48 px  |
+| `xxl` | ≥ 1441 px      | 1441 px       | —             | 12      | 32 px  | 48 px  |
+
+---
+
+## Shadow Tokens
+
+`Shadow[...]` returns a CSS variable string. Use in `style={{ boxShadow: Shadow["sm-subtle"] }}`.
+
+```tsx
+import { Shadow } from "@lifesg/react-design-system/theme";
+
+<div style={{ boxShadow: Shadow["sm-subtle"] }} />;
+```
+
+| Token key         | Common use                            |
+| ----------------- | ------------------------------------- |
+| `xs-subtle`       | Subtle glow / container resting state |
+| `xs-strong`       | Strong glow / hover or active state   |
+| `xs-focus-strong` | Keyboard focus ring on inputs         |
+| `xs-error-strong` | Error focus ring on inputs            |
+| `sm-subtle`       | Card / panel resting elevation        |
+| `sm-strong`       | Card hover / lifted state             |
+| `md-subtle`       | Modal / drawer resting elevation      |
+| `md-strong`       | Modal hover or prominent elevation    |
+
+---
+
+## Border Tokens
+
+`Border` is a flat object of CSS variable strings. Import from `@lifesg/react-design-system/theme`.
+
+```tsx
+import { Border } from "@lifesg/react-design-system/theme";
+
+// Individual properties
+<div
+    style={{
+        borderWidth: Border["width-010"],
+        borderStyle: Border.solid,
+        borderColor: Colour.border,
+    }}
+/>
+
+// Shorthand using template literal
+<div style={{ border: `${Border["width-010"]} ${Border.solid} ${Colour.border}` }} />
+```
+
+There is no `Border.Util` in v4 — compose border properties manually using the tokens above.
+
+### Token reference
+
+| Token key   | Value | Common use                  |
+| ----------- | ----- | --------------------------- |
+| `width-005` | 0.5px | Hairline divider            |
+| `width-010` | 1px   | Default input / card border |
+| `width-020` | 2px   | Emphasis / selected border  |
+| `width-040` | 4px   | Strong emphasis border      |
+| `solid`     | solid | Border style                |
+
+---
+
+## Motion Tokens
+
+`Motion[...]` returns a CSS variable string. Use in `style={{ transition: ... }}` or in CSS Modules.
+
+```tsx
+import { Motion } from "@lifesg/react-design-system/theme";
+
+<button
+    style={{
+        transition: `background ${Motion["duration-250"]} ${Motion["ease-default"]}`,
+    }}
+/>;
+```
+
+For elements with dynamic height or width (e.g. expandable panels), use `react-spring` instead — CSS transitions cannot handle layout animation with dynamic content.
+
+### Duration
+
+| Token key       | Value  | Use for                 |
+| --------------- | ------ | ----------------------- |
+| `duration-150`  | 150ms  | Checkboxes, toggles     |
+| `duration-250`  | 250ms  | Buttons, fades          |
+| `duration-350`  | 350ms  | Icons, short movements  |
+| `duration-500`  | 500ms  | Search bars, toasts     |
+| `duration-800`  | 800ms  | Notifications, cards    |
+| `duration-1000` | 1000ms | Full-screen transitions |
+
+### Easing
+
+| Token key       | Value                                  | Use for                               |
+| --------------- | -------------------------------------- | ------------------------------------- |
+| `ease-default`  | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | Non-moving elements — opacity, colour |
+| `ease-standard` | `cubic-bezier(0.86, 0, 0.07, 1)`       | Visible throughout motion — dropdowns |
diff --git a/docs/skills/fds-build/resources/v4/patterns/states.md b/docs/skills/fds-build/resources/v4/patterns/states.md
new file mode 100644
index 0000000000..4073b5f04a
--- /dev/null
+++ b/docs/skills/fds-build/resources/v4/patterns/states.md
@@ -0,0 +1,298 @@
+# States Pattern
+
+Loading, empty, error, and success states for async operations and data absence.
+
+---
+
+## Loading states
+
+### Full-page loading
+
+```tsx
+import { Layout } from "@lifesg/react-design-system/layout";
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+if (isLoading) {
+    return (
+        <Layout.Container type="grid">
+            <Layout.ColDiv xsCols={8} lgCols={12}>
+                <Card
+                    style={{
+                        textAlign: "center",
+                        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+                    }}
+                >
+                    <LoadingSpinner />
+                    {/* import { LoadingSpinner } from "@lifesg/react-design-system/loading-spinner" */}
+                    <Typography.BodyBL>Loading...</Typography.BodyBL>
+                </Card>
+            </Layout.ColDiv>
+        </Layout.Container>
+    );
+}
+```
+
+### Skeleton loading (preferred for content-heavy pages)
+
+Render placeholder blocks matching the shape of real content. Use a CSS `pulse` animation (`opacity 0.5 → 1` at 1.5s). Show the same grid structure as the loaded state — same column count, same card shapes.
+
+### Button loading (inline async)
+
+```tsx
+<Button.Default type="submit" loading={isSubmitting} disabled={isSubmitting}>
+    {isSubmitting ? "Submitting..." : "Submit"}
+</Button.Default>
+```
+
+Always combine `loading` + `disabled` during async to prevent double-submission.
+
+---
+
+## Empty states
+
+### First-time use (no data)
+
+```tsx
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Button } from "@lifesg/react-design-system/button";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+<Card
+    style={{
+        textAlign: "center",
+        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+    }}
+>
+    <Typography.HeadingSM>No items yet</Typography.HeadingSM>
+    <Typography.BodyBL>
+        Get started by creating your first item
+    </Typography.BodyBL>
+    <Button.Default
+        icon={<PlusIcon />}
+        style={{ marginTop: Spacing["spacing-24"] }}
+        onClick={handleCreate}
+    >
+        Create item
+    </Button.Default>
+</Card>;
+```
+
+### No search results
+
+```tsx
+<Card
+    style={{
+        textAlign: "center",
+        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+    }}
+>
+    <Typography.HeadingSM>No results found</Typography.HeadingSM>
+    <Typography.BodyBL>Try adjusting your search or filters</Typography.BodyBL>
+    <Button.Default
+        styleType="secondary"
+        style={{ marginTop: Spacing["spacing-24"] }}
+        onClick={handleClearFilters}
+    >
+        Clear filters
+    </Button.Default>
+</Card>
+```
+
+For listing pages, prefer `ErrorDisplay type="no-item-found"` over a custom card.
+
+### Empty section (within a page)
+
+```tsx
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Colour, Spacing } from "@lifesg/react-design-system/theme";
+
+<div style={{ textAlign: "center", padding: `${Spacing["spacing-32"]} 0` }}>
+    <Typography.BodySM style={{ color: Colour["text-subtler"] }}>
+        No recent activity to display
+    </Typography.BodySM>
+</div>;
+```
+
+---
+
+## Error states
+
+### API / fetch error
+
+```tsx
+import { Alert } from "@lifesg/react-design-system/alert";
+import { Layout } from "@lifesg/react-design-system/layout";
+
+if (error) {
+    return (
+        <Layout.Container type="grid">
+            <Layout.ColDiv xsCols={8} lgCols={12}>
+                <Alert
+                    type="error"
+                    actionLink={{
+                        children: "Try again",
+                        onClick: () => window.location.reload(),
+                    }}
+                >
+                    {error.message}
+                </Alert>
+            </Layout.ColDiv>
+        </Layout.Container>
+    );
+}
+```
+
+### 404 Not found
+
+```tsx
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Button } from "@lifesg/react-design-system/button";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+<Card
+    style={{
+        textAlign: "center",
+        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+    }}
+>
+    <Typography.HeadingXL>404</Typography.HeadingXL>
+    <Typography.HeadingSM>Page not found</Typography.HeadingSM>
+    <Typography.BodyBL>
+        The page you're looking for doesn't exist or has been moved
+    </Typography.BodyBL>
+    <Button.Default
+        style={{ marginTop: Spacing["spacing-24"] }}
+        onClick={() => navigate("/")}
+    >
+        Go to home
+    </Button.Default>
+</Card>;
+```
+
+### Permission denied
+
+```tsx
+<Card
+    style={{
+        textAlign: "center",
+        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+    }}
+>
+    <Typography.HeadingSM>Access denied</Typography.HeadingSM>
+    <Typography.BodyBL>
+        You don't have permission to view this page
+    </Typography.BodyBL>
+    <Button.Default
+        styleType="secondary"
+        style={{ marginTop: Spacing["spacing-24"] }}
+        onClick={() => navigate("/")}
+    >
+        Go to home
+    </Button.Default>
+</Card>
+```
+
+---
+
+## Success states
+
+### Inline success
+
+```tsx
+<Alert
+    type="success"
+    actionLink={{ children: "View details", onClick: handleViewDetails }}
+>
+    {successMessage}
+</Alert>
+```
+
+### Toast notification
+
+```tsx
+Toast.success("Changes saved successfully"); // auto-dismisses
+Toast.error("Failed to save changes");
+```
+
+Use `Toast` for non-critical feedback. Use `Alert` for errors requiring action.
+
+### Full-page success (major operations)
+
+```tsx
+import { Card } from "@lifesg/react-design-system/card";
+import { Typography } from "@lifesg/react-design-system/typography";
+import { Button } from "@lifesg/react-design-system/button";
+import { Spacing } from "@lifesg/react-design-system/theme";
+
+<Card
+    style={{
+        textAlign: "center",
+        padding: `${Spacing["spacing-64"]} ${Spacing["spacing-32"]}`,
+    }}
+>
+    <Typography.HeadingMD>
+        Application submitted successfully
+    </Typography.HeadingMD>
+    <Typography.BodyBL>Your application is being processed</Typography.BodyBL>
+    <div
+        style={{
+            display: "flex",
+            gap: Spacing["spacing-16"],
+            justifyContent: "center",
+            marginTop: Spacing["spacing-32"],
+        }}
+    >
+        <Button.Default onClick={() => navigate("/applications")}>
+            View applications
+        </Button.Default>
+        <Button.Default styleType="secondary" onClick={() => navigate("/")}>
+            Go to home
+        </Button.Default>
+    </div>
+</Card>;
+```
+
+---
+
+## State management pattern
+
+```tsx
+const [state, setState] = useState({
+    data: null,
+    isLoading: true,
+    error: null,
+});
+
+// In component:
+if (state.isLoading) return <LoadingState />;
+if (state.error) return <ErrorState message={state.error} />;
+if (!state.data || state.data.length === 0) return <EmptyState />;
+return <DataDisplay data={state.data} />;
+```
+
+---
+
+## Rules
+
+-   Show loading feedback for any operation taking longer than 200ms
+-   Prefer skeleton loading over a spinner for content-heavy initial page loads
+-   Always provide a way out of an error state (retry, go home)
+-   Empty state messages: 1–2 sentences max, action-oriented, sentence case
+-   Error messages: name the specific problem — never "An error occurred"
+-   `Toast` auto-dismisses — use for confirmations; use `Alert` for errors needing action
+-   Full-page state containers: `padding: spacing-64 spacing-32`, `textAlign: center`, inside a `Card`
+-   Disable interactive elements during loading to prevent race conditions
+-   Use `style={{}}` with `Spacing` and `Colour` tokens for all custom spacing and colour
+
+## Anti-patterns
+
+-   Do not show a spinner for operations under 200ms — causes flicker
+-   Do not show an empty container with no state message in a listing page
+-   Do not use `Toast` for critical errors — user may miss it
+-   Do not use generic error text — always tell the user what failed
+-   Do not leave submit buttons enabled during async — always set `disabled` + `loading`
+-   Do not hardcode `px` values or hex colours — always use `Spacing` and `Colour` tokens
diff --git a/docs/skills/cc-flagship-ds/resources/v4/patterns/setup.md b/docs/skills/fds-build/resources/v4/setup/setup.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/patterns/setup.md
rename to docs/skills/fds-build/resources/v4/setup/setup.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/templates/form.md b/docs/skills/fds-build/resources/v4/templates/form.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/templates/form.md
rename to docs/skills/fds-build/resources/v4/templates/form.md
diff --git a/docs/skills/cc-flagship-ds/resources/v4/templates/listing.md b/docs/skills/fds-build/resources/v4/templates/listing.md
similarity index 100%
rename from docs/skills/cc-flagship-ds/resources/v4/templates/listing.md
rename to docs/skills/fds-build/resources/v4/templates/listing.md
diff --git a/scripts/init-skills.js b/scripts/init-skills.js
index 8daf92b353..7d4dbb3c76 100644
--- a/scripts/init-skills.js
+++ b/scripts/init-skills.js
@@ -6,7 +6,7 @@ const path = require("path");
 const CWD = process.cwd();
 
 // Source: skills bundled with this package
-const SKILLS_SRC = path.resolve(__dirname, "../docs/skills/cc-flagship-ds");
+const SKILLS_SRC = path.resolve(__dirname, "../docs/skills/fds-build");
 
 // IDE detection: marker folder → destination path
 const IDE_TARGETS = {
@@ -28,7 +28,7 @@ const IDE_TARGETS = {
     },
     Generic: {
         marker: null, // fallback
-        dest: ".agents/skills/cc-flagship-ds",
+        dest: ".agents/skills/fds-build",
     },
 };
 

From 51fdc9534eff95f09d23ab0563ef6c78e5d48c30 Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Wed, 2 Sep 2026 17:22:13 +0800
Subject: [PATCH 03/15] [MISC][XY] Move fds-build to root skills folder and add
 install instructions

---
 .npmignore                                    |   1 +
 README.md                                     |  10 +
 .../resources/v3/components/accordion.md      | 115 --
 .../resources/v3/components/alert.md          |  56 -
 .../resources/v3/components/animation.md      |  17 -
 .../resources/v3/components/avatar.md         |  13 -
 .../resources/v3/components/badge.md          |  21 -
 .../resources/v3/components/box-container.md  |  54 -
 .../resources/v3/components/breadcrumb.md     |  69 --
 .../v3/components/button-with-icon.md         |  32 -
 .../resources/v3/components/button.md         |  75 --
 .../resources/v3/components/calendar.md       | 109 --
 .../resources/v3/components/checkbox.md       |  56 -
 .../v3/components/countdown-timer.md          |  24 -
 .../resources/v3/components/data-table.md     | 145 ---
 .../resources/v3/components/date-navigator.md |  27 -
 .../resources/v3/components/divider.md        |  21 -
 .../resources/v3/components/drawer.md         |  80 --
 .../resources/v3/components/error-display.md  | 114 --
 .../v3/components/feedback-rating.md          |  64 --
 .../resources/v3/components/file-download.md  |  41 -
 .../resources/v3/components/file-upload.md    |  91 --
 .../resources/v3/components/filter.md         | 210 ----
 .../resources/v3/components/footer.md         |  95 --
 .../v3/components/form-date-input.md          |  85 --
 .../v3/components/form-date-range-input.md    | 139 ---
 .../v3/components/form-e-signature.md         |  46 -
 .../resources/v3/components/form-input.md     |  88 --
 .../v3/components/form-masked-input.md        |  55 -
 .../v3/components/form-multi-select.md        | 112 --
 .../v3/components/form-nested-multi-select.md | 173 ---
 .../v3/components/form-nested-select.md       | 165 ---
 .../v3/components/form-otp-verification.md    | 164 ---
 .../v3/components/form-phone-number-input.md  |  80 --
 .../components/form-predictive-text-input.md  | 102 --
 .../resources/v3/components/form-select.md    | 122 ---
 .../resources/v3/components/form-slider.md    | 115 --
 .../resources/v3/components/form-textarea.md  | 122 ---
 .../v3/components/form-time-range-picker.md   |  84 --
 .../v3/components/form-timepicker.md          |  68 --
 .../v3/components/form-unit-number-input.md   | 132 ---
 .../components/fullscreen-image-carousel.md   | 123 ---
 .../v3/components/histogram-slider.md         |  40 -
 .../resources/v3/components/icon-button.md    |  25 -
 .../resources/v3/components/image-button.md   |  14 -
 .../resources/v3/components/input.md          |  45 -
 .../v3/components/language-switcher.md        |  17 -
 .../resources/v3/components/layout.md         | 138 ---
 .../resources/v3/components/link-list.md      |  89 --
 .../resources/v3/components/local-nav.md      |  95 --
 .../resources/v3/components/masthead.md       |  14 -
 .../fds-build/resources/v3/components/menu.md | 115 --
 .../resources/v3/components/modal.md          | 114 --
 .../resources/v3/components/navbar.md         | 203 ----
 .../v3/components/notification-banner.md      |  67 --
 .../resources/v3/components/pagination.md     | 104 --
 .../fds-build/resources/v3/components/pill.md |  58 -
 .../resources/v3/components/popover.md        |  72 --
 .../v3/components/progress-indicator.md       |  48 -
 .../resources/v3/components/radio-button.md   |  69 --
 .../resources/v3/components/schedule.md       |  72 --
 .../resources/v3/components/sidenav.md        | 190 ----
 .../v3/components/singpass-button.md          |  15 -
 .../v3/components/smart-app-banner.md         |  29 -
 .../fds-build/resources/v3/components/tab.md  |  85 --
 .../fds-build/resources/v3/components/tag.md  |  71 --
 .../resources/v3/components/text-list.md      |  44 -
 .../v3/components/time-slot-bar-week.md       |  67 --
 .../resources/v3/components/time-slot-bar.md  |  42 -
 .../v3/components/time-slot-week-view.md      |  63 --
 .../resources/v3/components/timeline.md       |  59 --
 .../resources/v3/components/timetable.md      |  82 --
 .../resources/v3/components/toast.md          |  67 --
 .../resources/v3/components/toggle.md         | 120 ---
 .../resources/v3/components/tooltip.md        |  62 --
 .../resources/v3/components/typography.md     |  92 --
 .../v3/components/uneditable-section.md       |  94 --
 .../resources/v4/components/accordion.md      | 115 --
 .../resources/v4/components/alert.md          |  56 -
 .../resources/v4/components/animation.md      |  17 -
 .../resources/v4/components/avatar.md         |  13 -
 .../resources/v4/components/badge.md          |  21 -
 .../resources/v4/components/box-container.md  |  54 -
 .../resources/v4/components/breadcrumb.md     |  69 --
 .../resources/v4/components/button.md         |  78 --
 .../resources/v4/components/calendar.md       | 109 --
 .../resources/v4/components/checkbox.md       |  56 -
 .../v4/components/countdown-timer.md          |  24 -
 .../resources/v4/components/data-table.md     | 145 ---
 .../resources/v4/components/date-navigator.md |  27 -
 .../resources/v4/components/divider.md        |  21 -
 .../resources/v4/components/drawer.md         |  80 --
 .../resources/v4/components/error-display.md  | 114 --
 .../v4/components/feedback-rating.md          |  64 --
 .../resources/v4/components/file-download.md  |  41 -
 .../resources/v4/components/file-upload.md    |  91 --
 .../resources/v4/components/filter.md         | 211 ----
 .../resources/v4/components/footer.md         |  95 --
 .../v4/components/form-date-input.md          |  92 --
 .../v4/components/form-date-range-input.md    | 146 ---
 .../v4/components/form-e-signature.md         |  46 -
 .../resources/v4/components/form-input.md     |  88 --
 .../v4/components/form-masked-input.md        |  55 -
 .../v4/components/form-multi-select.md        | 112 --
 .../v4/components/form-nested-multi-select.md | 173 ---
 .../v4/components/form-nested-select.md       | 165 ---
 .../v4/components/form-otp-verification.md    | 164 ---
 .../v4/components/form-phone-number-input.md  |  87 --
 .../components/form-predictive-text-input.md  | 102 --
 .../resources/v4/components/form-select.md    | 122 ---
 .../resources/v4/components/form-slider.md    | 115 --
 .../resources/v4/components/form-textarea.md  | 122 ---
 .../v4/components/form-time-range-picker.md   |  91 --
 .../v4/components/form-timepicker.md          |  75 --
 .../v4/components/form-unit-number-input.md   | 139 ---
 .../components/fullscreen-image-carousel.md   | 123 ---
 .../v4/components/histogram-slider.md         |  40 -
 .../resources/v4/components/image-button.md   |  14 -
 .../resources/v4/components/input.md          |  45 -
 .../v4/components/language-switcher.md        |  17 -
 .../resources/v4/components/layout.md         | 143 ---
 .../resources/v4/components/link-list.md      |  89 --
 .../resources/v4/components/local-nav.md      |  95 --
 .../resources/v4/components/masthead.md       |  14 -
 .../fds-build/resources/v4/components/menu.md | 115 --
 .../resources/v4/components/modal.md          | 114 --
 .../resources/v4/components/navbar.md         | 203 ----
 .../v4/components/notification-banner.md      |  67 --
 .../resources/v4/components/pagination.md     | 104 --
 .../fds-build/resources/v4/components/pill.md |  58 -
 .../resources/v4/components/popover.md        |  72 --
 .../v4/components/progress-indicator.md       |  48 -
 .../resources/v4/components/radio-button.md   |  69 --
 .../resources/v4/components/schedule.md       |  72 --
 .../resources/v4/components/sidenav.md        | 190 ----
 .../v4/components/singpass-button.md          |  15 -
 .../v4/components/smart-app-banner.md         |  29 -
 .../fds-build/resources/v4/components/tab.md  |  85 --
 .../fds-build/resources/v4/components/tag.md  |  71 --
 .../resources/v4/components/text-list.md      |  44 -
 .../v4/components/time-slot-bar-week.md       |  67 --
 .../resources/v4/components/time-slot-bar.md  |  42 -
 .../v4/components/time-slot-week-view.md      |  63 --
 .../resources/v4/components/timeline.md       |  59 --
 .../resources/v4/components/timetable.md      |  82 --
 .../resources/v4/components/toast.md          |  67 --
 .../resources/v4/components/toggle.md         | 120 ---
 .../resources/v4/components/typography.md     |  92 --
 .../v4/components/uneditable-section.md       |  94 --
 package.json                                  |   3 +-
 scripts/generate-skill-props.ts               | 369 +++++++
 {docs/skills => skills}/fds-build/SKILL-v4.md |   2 -
 {docs/skills => skills}/fds-build/SKILL.md    |  10 +-
 .../skills => skills}/fds-build/catalogue.md  |  25 +-
 .../fds-build/evals/evals.json                | 202 ++++
 .../resources/v3/components/accordion.md      | 321 ++++++
 .../resources/v3/components/alert.md          | 114 ++
 .../resources/v3/components/animation.md      |  63 ++
 .../resources/v3/components/avatar.md         |  45 +
 .../resources/v3/components/badge.md          |  68 ++
 .../resources/v3/components/box-container.md  | 176 ++++
 .../resources/v3/components/breadcrumb.md     | 157 +++
 .../v3/components/button-with-icon.md         |  19 +
 .../resources/v3/components/button.md         | 136 +++
 .../resources/v3/components/calendar.md       | 259 +++++
 .../fds-build/resources/v3/components/card.md |   8 -
 .../resources/v3/components/checkbox.md       |  98 ++
 .../v3/components/countdown-timer.md          |  71 ++
 .../resources/v3/components/data-table.md     | 309 ++++++
 .../resources/v3/components/date-navigator.md | 115 ++
 .../resources/v3/components/divider.md        | 103 ++
 .../resources/v3/components/drawer.md         | 139 +++
 .../resources/v3/components/error-display.md  | 327 ++++++
 .../v3/components/feedback-rating.md          | 126 +++
 .../resources/v3/components/file-download.md  | 182 ++++
 .../resources/v3/components/file-upload.md    | 399 +++++++
 .../resources/v3/components/filter.md         | 727 +++++++++++++
 .../resources/v3/components/footer.md         | 291 +++++
 .../v3/components/form-date-input.md          | 250 +++++
 .../v3/components/form-date-range-input.md    | 326 ++++++
 .../v3/components/form-e-signature.md         | 170 +++
 .../resources/v3/components/form-input.md     | 160 +++
 .../v3/components/form-masked-input.md        | 244 +++++
 .../v3/components/form-multi-select.md        | 320 ++++++
 .../v3/components/form-nested-multi-select.md | 364 +++++++
 .../v3/components/form-nested-select.md       | 361 +++++++
 .../v3/components/form-otp-verification.md    | 247 +++++
 .../v3/components/form-phone-number-input.md  | 267 +++++
 .../components/form-predictive-text-input.md  | 268 +++++
 .../resources/v3/components/form-select.md    | 332 ++++++
 .../resources/v3/components/form-slider.md    | 286 +++++
 .../resources/v3/components/form-textarea.md  | 206 ++++
 .../v3/components/form-time-range-picker.md   | 283 +++++
 .../v3/components/form-timepicker.md          | 232 ++++
 .../v3/components/form-unit-number-input.md   | 288 +++++
 .../components/fullscreen-image-carousel.md   | 486 +++++++++
 .../v3/components/histogram-slider.md         | 193 ++++
 .../resources/v3/components/icon-button.md    |  14 +
 .../resources/v3}/components/icon.md          |   8 -
 .../resources/v3/components/image-button.md   |  57 +
 .../resources/v3/components/input.md          | 128 +++
 .../v3/components/language-switcher.md        |  55 +
 .../resources/v3/components/layout.md         | 388 +++++++
 .../resources/v3/components/link-list.md      | 278 +++++
 .../resources/v3/components/local-nav.md      | 331 ++++++
 .../resources/v3/components/masthead.md       |  44 +
 .../fds-build/resources/v3/components/menu.md | 338 ++++++
 .../resources/v3/components/modal.md          | 224 ++++
 .../resources/v3/components/navbar.md         | 995 ++++++++++++++++++
 .../v3/components/notification-banner.md      | 371 +++++++
 .../resources/v3/components/pagination.md     | 213 ++++
 .../fds-build/resources/v3/components/pill.md |  95 ++
 .../resources/v3/components/popover.md        | 295 ++++++
 .../v3/components/progress-indicator.md       |  97 ++
 .../resources/v3/components/radio-button.md   | 111 ++
 .../resources/v3/components/schedule.md       | 429 ++++++++
 .../resources/v3/components/sidenav.md        | 438 ++++++++
 .../v3/components/singpass-button.md          |  49 +
 .../v3/components/smart-app-banner.md         | 163 +++
 .../fds-build/resources/v3/components/tab.md  | 228 ++++
 .../resources/v3/components/table.md          |  65 ++
 .../fds-build/resources/v3/components/tag.md  | 118 +++
 .../resources/v3/components/text-list.md      | 169 +++
 .../v3/components/time-slot-bar-week.md       | 191 ++++
 .../resources/v3/components/time-slot-bar.md  | 222 ++++
 .../v3/components/time-slot-week-view.md      | 210 ++++
 .../resources/v3/components/timeline.md       | 184 ++++
 .../resources/v3/components/timetable.md      | 522 +++++++++
 .../resources/v3/components/toast.md          | 172 +++
 .../resources/v3/components/toggle.md         | 288 +++++
 .../resources/v3/components/tooltip.md        |  37 +
 .../resources/v3/components/typography.md     | 156 +++
 .../v3/components/uneditable-section.md       | 299 ++++++
 .../layout-composition-patterns.md            |   0
 .../resources/v3/foundations/tokens.md        |   0
 .../fds-build/resources/v3/patterns/states.md |   0
 .../fds-build/resources/v3/setup/setup.md     |   0
 .../fds-build/resources/v3/templates/form.md  |   0
 .../resources/v3/templates/listing.md         |   0
 .../resources/v4/components/accordion.md      | 321 ++++++
 .../resources/v4/components/alert.md          | 114 ++
 .../resources/v4/components/animation.md      |  63 ++
 .../resources/v4/components/avatar.md         |  45 +
 .../resources/v4/components/badge.md          |  68 ++
 .../resources/v4/components/box-container.md  | 176 ++++
 .../resources/v4/components/breadcrumb.md     | 157 +++
 .../resources/v4/components/button.md         | 139 +++
 .../resources/v4/components/calendar.md       | 259 +++++
 .../fds-build/resources/v4/components/card.md |   8 -
 .../resources/v4/components/checkbox.md       |  98 ++
 .../v4/components/countdown-timer.md          |  71 ++
 .../resources/v4/components/data-table.md     | 309 ++++++
 .../resources/v4/components/date-navigator.md | 115 ++
 .../resources/v4/components/divider.md        | 103 ++
 .../resources/v4/components/drawer.md         | 139 +++
 .../resources/v4/components/error-display.md  | 327 ++++++
 .../v4/components/feedback-rating.md          | 126 +++
 .../resources/v4/components/file-download.md  | 182 ++++
 .../resources/v4/components/file-upload.md    | 399 +++++++
 .../resources/v4/components/filter.md         | 728 +++++++++++++
 .../resources/v4/components/footer.md         | 291 +++++
 .../v4/components/form-date-input.md          | 257 +++++
 .../v4/components/form-date-range-input.md    | 333 ++++++
 .../v4/components/form-e-signature.md         | 170 +++
 .../resources/v4/components/form-input.md     | 160 +++
 .../v4/components/form-masked-input.md        | 244 +++++
 .../v4/components/form-multi-select.md        | 320 ++++++
 .../v4/components/form-nested-multi-select.md | 364 +++++++
 .../v4/components/form-nested-select.md       | 361 +++++++
 .../v4/components/form-otp-verification.md    | 247 +++++
 .../v4/components/form-phone-number-input.md  | 274 +++++
 .../components/form-predictive-text-input.md  | 268 +++++
 .../resources/v4/components/form-select.md    | 332 ++++++
 .../resources/v4/components/form-slider.md    | 286 +++++
 .../resources/v4/components/form-textarea.md  | 206 ++++
 .../v4/components/form-time-range-picker.md   | 290 +++++
 .../v4/components/form-timepicker.md          | 239 +++++
 .../v4/components/form-unit-number-input.md   | 295 ++++++
 .../components/fullscreen-image-carousel.md   | 486 +++++++++
 .../v4/components/histogram-slider.md         | 193 ++++
 .../resources/v4}/components/icon.md          |   8 -
 .../resources/v4/components/image-button.md   |  57 +
 .../resources/v4/components/input.md          | 128 +++
 .../v4/components/language-switcher.md        |  55 +
 .../resources/v4/components/layout.md         | 393 +++++++
 .../resources/v4/components/link-list.md      | 278 +++++
 .../resources/v4/components/local-nav.md      | 331 ++++++
 .../resources/v4/components/masthead.md       |  44 +
 .../fds-build/resources/v4/components/menu.md | 338 ++++++
 .../resources/v4/components/modal.md          | 224 ++++
 .../resources/v4/components/navbar.md         | 995 ++++++++++++++++++
 .../v4/components/notification-banner.md      | 371 +++++++
 .../resources/v4/components/pagination.md     | 213 ++++
 .../fds-build/resources/v4/components/pill.md |  95 ++
 .../resources/v4/components/popover.md        | 295 ++++++
 .../v4/components/progress-indicator.md       |  97 ++
 .../resources/v4/components/radio-button.md   | 111 ++
 .../resources/v4/components/schedule.md       | 429 ++++++++
 .../resources/v4/components/sidenav.md        | 438 ++++++++
 .../v4/components/singpass-button.md          |  49 +
 .../v4/components/smart-app-banner.md         | 163 +++
 .../fds-build/resources/v4/components/tab.md  | 228 ++++
 .../resources/v4/components/table.md          |  65 ++
 .../fds-build/resources/v4/components/tag.md  | 118 +++
 .../resources/v4/components/text-list.md      | 169 +++
 .../v4/components/time-slot-bar-week.md       | 191 ++++
 .../resources/v4/components/time-slot-bar.md  | 222 ++++
 .../v4/components/time-slot-week-view.md      | 210 ++++
 .../resources/v4/components/timeline.md       | 184 ++++
 .../resources/v4/components/timetable.md      | 522 +++++++++
 .../resources/v4/components/toast.md          | 172 +++
 .../resources/v4/components/toggle.md         | 288 +++++
 .../resources/v4/components/typography.md     | 156 +++
 .../v4/components/uneditable-section.md       | 299 ++++++
 .../layout-composition-patterns.md            |   0
 .../resources/v4/foundations/tokens.md        |   0
 .../fds-build/resources/v4/patterns/states.md |   0
 .../fds-build/resources/v4/setup/setup.md     |   0
 .../fds-build/resources/v4/templates/form.md  |   0
 .../resources/v4/templates/listing.md         |   0
 stories/getting-started/installation.mdx      |  10 +
 321 files changed, 35604 insertions(+), 12147 deletions(-)
 delete mode 100644 docs/skills/fds-build/resources/v3/components/accordion.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/alert.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/animation.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/avatar.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/badge.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/box-container.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/breadcrumb.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/button-with-icon.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/button.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/calendar.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/checkbox.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/countdown-timer.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/data-table.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/date-navigator.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/divider.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/drawer.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/error-display.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/feedback-rating.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/file-download.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/file-upload.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/filter.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/footer.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-date-input.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-date-range-input.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-e-signature.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-input.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-masked-input.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-multi-select.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-nested-multi-select.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-nested-select.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-otp-verification.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-phone-number-input.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-predictive-text-input.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-select.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-slider.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-textarea.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-time-range-picker.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-timepicker.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/form-unit-number-input.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/histogram-slider.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/icon-button.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/image-button.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/input.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/language-switcher.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/layout.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/link-list.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/local-nav.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/masthead.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/menu.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/modal.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/navbar.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/notification-banner.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/pagination.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/pill.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/popover.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/progress-indicator.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/radio-button.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/schedule.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/sidenav.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/singpass-button.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/smart-app-banner.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/tab.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/tag.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/text-list.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/time-slot-bar-week.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/time-slot-bar.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/time-slot-week-view.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/timeline.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/timetable.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/toast.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/toggle.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/tooltip.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/typography.md
 delete mode 100644 docs/skills/fds-build/resources/v3/components/uneditable-section.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/accordion.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/alert.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/animation.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/avatar.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/badge.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/box-container.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/breadcrumb.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/button.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/calendar.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/checkbox.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/countdown-timer.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/data-table.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/date-navigator.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/divider.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/drawer.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/error-display.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/feedback-rating.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/file-download.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/file-upload.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/filter.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/footer.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-date-input.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-date-range-input.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-e-signature.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-input.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-masked-input.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-multi-select.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-nested-multi-select.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-nested-select.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-otp-verification.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-phone-number-input.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-predictive-text-input.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-select.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-slider.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-textarea.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-time-range-picker.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-timepicker.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/form-unit-number-input.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/histogram-slider.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/image-button.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/input.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/language-switcher.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/layout.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/link-list.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/local-nav.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/masthead.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/menu.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/modal.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/navbar.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/notification-banner.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/pagination.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/pill.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/popover.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/progress-indicator.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/radio-button.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/schedule.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/sidenav.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/singpass-button.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/smart-app-banner.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/tab.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/tag.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/text-list.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/time-slot-bar-week.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/time-slot-bar.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/time-slot-week-view.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/timeline.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/timetable.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/toast.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/toggle.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/typography.md
 delete mode 100644 docs/skills/fds-build/resources/v4/components/uneditable-section.md
 create mode 100644 scripts/generate-skill-props.ts
 rename {docs/skills => skills}/fds-build/SKILL-v4.md (96%)
 rename {docs/skills => skills}/fds-build/SKILL.md (97%)
 rename {docs/skills => skills}/fds-build/catalogue.md (91%)
 rename {docs/skills => skills}/fds-build/evals/evals.json (60%)
 create mode 100644 skills/fds-build/resources/v3/components/accordion.md
 create mode 100644 skills/fds-build/resources/v3/components/alert.md
 create mode 100644 skills/fds-build/resources/v3/components/animation.md
 create mode 100644 skills/fds-build/resources/v3/components/avatar.md
 create mode 100644 skills/fds-build/resources/v3/components/badge.md
 create mode 100644 skills/fds-build/resources/v3/components/box-container.md
 create mode 100644 skills/fds-build/resources/v3/components/breadcrumb.md
 create mode 100644 skills/fds-build/resources/v3/components/button-with-icon.md
 create mode 100644 skills/fds-build/resources/v3/components/button.md
 create mode 100644 skills/fds-build/resources/v3/components/calendar.md
 rename {docs/skills => skills}/fds-build/resources/v3/components/card.md (82%)
 create mode 100644 skills/fds-build/resources/v3/components/checkbox.md
 create mode 100644 skills/fds-build/resources/v3/components/countdown-timer.md
 create mode 100644 skills/fds-build/resources/v3/components/data-table.md
 create mode 100644 skills/fds-build/resources/v3/components/date-navigator.md
 create mode 100644 skills/fds-build/resources/v3/components/divider.md
 create mode 100644 skills/fds-build/resources/v3/components/drawer.md
 create mode 100644 skills/fds-build/resources/v3/components/error-display.md
 create mode 100644 skills/fds-build/resources/v3/components/feedback-rating.md
 create mode 100644 skills/fds-build/resources/v3/components/file-download.md
 create mode 100644 skills/fds-build/resources/v3/components/file-upload.md
 create mode 100644 skills/fds-build/resources/v3/components/filter.md
 create mode 100644 skills/fds-build/resources/v3/components/footer.md
 create mode 100644 skills/fds-build/resources/v3/components/form-date-input.md
 create mode 100644 skills/fds-build/resources/v3/components/form-date-range-input.md
 create mode 100644 skills/fds-build/resources/v3/components/form-e-signature.md
 create mode 100644 skills/fds-build/resources/v3/components/form-input.md
 create mode 100644 skills/fds-build/resources/v3/components/form-masked-input.md
 create mode 100644 skills/fds-build/resources/v3/components/form-multi-select.md
 create mode 100644 skills/fds-build/resources/v3/components/form-nested-multi-select.md
 create mode 100644 skills/fds-build/resources/v3/components/form-nested-select.md
 create mode 100644 skills/fds-build/resources/v3/components/form-otp-verification.md
 create mode 100644 skills/fds-build/resources/v3/components/form-phone-number-input.md
 create mode 100644 skills/fds-build/resources/v3/components/form-predictive-text-input.md
 create mode 100644 skills/fds-build/resources/v3/components/form-select.md
 create mode 100644 skills/fds-build/resources/v3/components/form-slider.md
 create mode 100644 skills/fds-build/resources/v3/components/form-textarea.md
 create mode 100644 skills/fds-build/resources/v3/components/form-time-range-picker.md
 create mode 100644 skills/fds-build/resources/v3/components/form-timepicker.md
 create mode 100644 skills/fds-build/resources/v3/components/form-unit-number-input.md
 create mode 100644 skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
 create mode 100644 skills/fds-build/resources/v3/components/histogram-slider.md
 create mode 100644 skills/fds-build/resources/v3/components/icon-button.md
 rename {docs/skills/fds-build/resources/v4 => skills/fds-build/resources/v3}/components/icon.md (92%)
 create mode 100644 skills/fds-build/resources/v3/components/image-button.md
 create mode 100644 skills/fds-build/resources/v3/components/input.md
 create mode 100644 skills/fds-build/resources/v3/components/language-switcher.md
 create mode 100644 skills/fds-build/resources/v3/components/layout.md
 create mode 100644 skills/fds-build/resources/v3/components/link-list.md
 create mode 100644 skills/fds-build/resources/v3/components/local-nav.md
 create mode 100644 skills/fds-build/resources/v3/components/masthead.md
 create mode 100644 skills/fds-build/resources/v3/components/menu.md
 create mode 100644 skills/fds-build/resources/v3/components/modal.md
 create mode 100644 skills/fds-build/resources/v3/components/navbar.md
 create mode 100644 skills/fds-build/resources/v3/components/notification-banner.md
 create mode 100644 skills/fds-build/resources/v3/components/pagination.md
 create mode 100644 skills/fds-build/resources/v3/components/pill.md
 create mode 100644 skills/fds-build/resources/v3/components/popover.md
 create mode 100644 skills/fds-build/resources/v3/components/progress-indicator.md
 create mode 100644 skills/fds-build/resources/v3/components/radio-button.md
 create mode 100644 skills/fds-build/resources/v3/components/schedule.md
 create mode 100644 skills/fds-build/resources/v3/components/sidenav.md
 create mode 100644 skills/fds-build/resources/v3/components/singpass-button.md
 create mode 100644 skills/fds-build/resources/v3/components/smart-app-banner.md
 create mode 100644 skills/fds-build/resources/v3/components/tab.md
 create mode 100644 skills/fds-build/resources/v3/components/table.md
 create mode 100644 skills/fds-build/resources/v3/components/tag.md
 create mode 100644 skills/fds-build/resources/v3/components/text-list.md
 create mode 100644 skills/fds-build/resources/v3/components/time-slot-bar-week.md
 create mode 100644 skills/fds-build/resources/v3/components/time-slot-bar.md
 create mode 100644 skills/fds-build/resources/v3/components/time-slot-week-view.md
 create mode 100644 skills/fds-build/resources/v3/components/timeline.md
 create mode 100644 skills/fds-build/resources/v3/components/timetable.md
 create mode 100644 skills/fds-build/resources/v3/components/toast.md
 create mode 100644 skills/fds-build/resources/v3/components/toggle.md
 create mode 100644 skills/fds-build/resources/v3/components/tooltip.md
 create mode 100644 skills/fds-build/resources/v3/components/typography.md
 create mode 100644 skills/fds-build/resources/v3/components/uneditable-section.md
 rename {docs/skills => skills}/fds-build/resources/v3/foundations/layout-composition-patterns.md (100%)
 rename {docs/skills => skills}/fds-build/resources/v3/foundations/tokens.md (100%)
 rename {docs/skills => skills}/fds-build/resources/v3/patterns/states.md (100%)
 rename {docs/skills => skills}/fds-build/resources/v3/setup/setup.md (100%)
 rename {docs/skills => skills}/fds-build/resources/v3/templates/form.md (100%)
 rename {docs/skills => skills}/fds-build/resources/v3/templates/listing.md (100%)
 create mode 100644 skills/fds-build/resources/v4/components/accordion.md
 create mode 100644 skills/fds-build/resources/v4/components/alert.md
 create mode 100644 skills/fds-build/resources/v4/components/animation.md
 create mode 100644 skills/fds-build/resources/v4/components/avatar.md
 create mode 100644 skills/fds-build/resources/v4/components/badge.md
 create mode 100644 skills/fds-build/resources/v4/components/box-container.md
 create mode 100644 skills/fds-build/resources/v4/components/breadcrumb.md
 create mode 100644 skills/fds-build/resources/v4/components/button.md
 create mode 100644 skills/fds-build/resources/v4/components/calendar.md
 rename {docs/skills => skills}/fds-build/resources/v4/components/card.md (82%)
 create mode 100644 skills/fds-build/resources/v4/components/checkbox.md
 create mode 100644 skills/fds-build/resources/v4/components/countdown-timer.md
 create mode 100644 skills/fds-build/resources/v4/components/data-table.md
 create mode 100644 skills/fds-build/resources/v4/components/date-navigator.md
 create mode 100644 skills/fds-build/resources/v4/components/divider.md
 create mode 100644 skills/fds-build/resources/v4/components/drawer.md
 create mode 100644 skills/fds-build/resources/v4/components/error-display.md
 create mode 100644 skills/fds-build/resources/v4/components/feedback-rating.md
 create mode 100644 skills/fds-build/resources/v4/components/file-download.md
 create mode 100644 skills/fds-build/resources/v4/components/file-upload.md
 create mode 100644 skills/fds-build/resources/v4/components/filter.md
 create mode 100644 skills/fds-build/resources/v4/components/footer.md
 create mode 100644 skills/fds-build/resources/v4/components/form-date-input.md
 create mode 100644 skills/fds-build/resources/v4/components/form-date-range-input.md
 create mode 100644 skills/fds-build/resources/v4/components/form-e-signature.md
 create mode 100644 skills/fds-build/resources/v4/components/form-input.md
 create mode 100644 skills/fds-build/resources/v4/components/form-masked-input.md
 create mode 100644 skills/fds-build/resources/v4/components/form-multi-select.md
 create mode 100644 skills/fds-build/resources/v4/components/form-nested-multi-select.md
 create mode 100644 skills/fds-build/resources/v4/components/form-nested-select.md
 create mode 100644 skills/fds-build/resources/v4/components/form-otp-verification.md
 create mode 100644 skills/fds-build/resources/v4/components/form-phone-number-input.md
 create mode 100644 skills/fds-build/resources/v4/components/form-predictive-text-input.md
 create mode 100644 skills/fds-build/resources/v4/components/form-select.md
 create mode 100644 skills/fds-build/resources/v4/components/form-slider.md
 create mode 100644 skills/fds-build/resources/v4/components/form-textarea.md
 create mode 100644 skills/fds-build/resources/v4/components/form-time-range-picker.md
 create mode 100644 skills/fds-build/resources/v4/components/form-timepicker.md
 create mode 100644 skills/fds-build/resources/v4/components/form-unit-number-input.md
 create mode 100644 skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
 create mode 100644 skills/fds-build/resources/v4/components/histogram-slider.md
 rename {docs/skills/fds-build/resources/v3 => skills/fds-build/resources/v4}/components/icon.md (92%)
 create mode 100644 skills/fds-build/resources/v4/components/image-button.md
 create mode 100644 skills/fds-build/resources/v4/components/input.md
 create mode 100644 skills/fds-build/resources/v4/components/language-switcher.md
 create mode 100644 skills/fds-build/resources/v4/components/layout.md
 create mode 100644 skills/fds-build/resources/v4/components/link-list.md
 create mode 100644 skills/fds-build/resources/v4/components/local-nav.md
 create mode 100644 skills/fds-build/resources/v4/components/masthead.md
 create mode 100644 skills/fds-build/resources/v4/components/menu.md
 create mode 100644 skills/fds-build/resources/v4/components/modal.md
 create mode 100644 skills/fds-build/resources/v4/components/navbar.md
 create mode 100644 skills/fds-build/resources/v4/components/notification-banner.md
 create mode 100644 skills/fds-build/resources/v4/components/pagination.md
 create mode 100644 skills/fds-build/resources/v4/components/pill.md
 create mode 100644 skills/fds-build/resources/v4/components/popover.md
 create mode 100644 skills/fds-build/resources/v4/components/progress-indicator.md
 create mode 100644 skills/fds-build/resources/v4/components/radio-button.md
 create mode 100644 skills/fds-build/resources/v4/components/schedule.md
 create mode 100644 skills/fds-build/resources/v4/components/sidenav.md
 create mode 100644 skills/fds-build/resources/v4/components/singpass-button.md
 create mode 100644 skills/fds-build/resources/v4/components/smart-app-banner.md
 create mode 100644 skills/fds-build/resources/v4/components/tab.md
 create mode 100644 skills/fds-build/resources/v4/components/table.md
 create mode 100644 skills/fds-build/resources/v4/components/tag.md
 create mode 100644 skills/fds-build/resources/v4/components/text-list.md
 create mode 100644 skills/fds-build/resources/v4/components/time-slot-bar-week.md
 create mode 100644 skills/fds-build/resources/v4/components/time-slot-bar.md
 create mode 100644 skills/fds-build/resources/v4/components/time-slot-week-view.md
 create mode 100644 skills/fds-build/resources/v4/components/timeline.md
 create mode 100644 skills/fds-build/resources/v4/components/timetable.md
 create mode 100644 skills/fds-build/resources/v4/components/toast.md
 create mode 100644 skills/fds-build/resources/v4/components/toggle.md
 create mode 100644 skills/fds-build/resources/v4/components/typography.md
 create mode 100644 skills/fds-build/resources/v4/components/uneditable-section.md
 rename {docs/skills => skills}/fds-build/resources/v4/foundations/layout-composition-patterns.md (100%)
 rename {docs/skills => skills}/fds-build/resources/v4/foundations/tokens.md (100%)
 rename {docs/skills => skills}/fds-build/resources/v4/patterns/states.md (100%)
 rename {docs/skills => skills}/fds-build/resources/v4/setup/setup.md (100%)
 rename {docs/skills => skills}/fds-build/resources/v4/templates/form.md (100%)
 rename {docs/skills => skills}/fds-build/resources/v4/templates/listing.md (100%)

diff --git a/.npmignore b/.npmignore
index c1db24f185..66ebbb8bb4 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,5 +1,6 @@
 **/*
 !dist/**
+!skills/**
 !CHANGELOG.md
 !package-lock.json
 !package.json
diff --git a/README.md b/README.md
index 6528efb001..d82b616340 100644
--- a/README.md
+++ b/README.md
@@ -93,6 +93,16 @@ import { Button } from "@lifesg/react-design-system";
 
 To see the full suite of components available, visit our [Storybook documentation](https://designsystem.life.gov.sg/react/index.html?path=/docs/getting-started-installation--docs).
 
+## AI agent skill
+
+Give your AI coding assistant accurate knowledge of FDS components, import patterns, and rules — works with Claude Code, Cursor, GitHub Copilot, Codex, and other agents.
+
+```bash
+npx skills add lifesg/react-design-system
+```
+
+The skill covers component selection, correct import paths, theming setup, layout patterns, and common mistakes to avoid. Keep it current when you upgrade the package by running `npx skills add` again.
+
 ## Migrations
 
 If you are migrating from an older version of the Design System, you may refer to our [migration guides](https://github.com/LifeSG/react-design-system/wiki).
diff --git a/docs/skills/fds-build/resources/v3/components/accordion.md b/docs/skills/fds-build/resources/v3/components/accordion.md
deleted file mode 100644
index 0ba95e2748..0000000000
--- a/docs/skills/fds-build/resources/v3/components/accordion.md
+++ /dev/null
@@ -1,115 +0,0 @@
-# Accordion
-
-Import: `import { Accordion } from "@lifesg/react-design-system/accordion"`
-
-## When to use
-
-Use to reduce visual complexity when users don't need all content at once — FAQs, supplementary details, or grouped settings. Do not use when all content needs to be visible at the same time.
-
-## Composition
-
-```
-Accordion                    ← container, manages expand/collapse state
-├── Accordion.Item           ← expandable panel
-├── Accordion.Item
-└── Accordion.Item
-```
-
-All children must be `Accordion.Item`. Do not place other elements directly inside `Accordion`.
-
-## Variants
-
-| `type` on `Accordion.Item` | Usage                                |
-| -------------------------- | ------------------------------------ |
-| `"default"`                | Standard title size — default        |
-| `"small"`                  | Compact title size for dense layouts |
-
-## Usage
-
-```tsx
-import { Accordion } from "@lifesg/react-design-system/accordion";
-
-// Multiple items — all collapsed by default
-const FaqSection = () => (
-    <Accordion
-        title="Frequently asked questions"
-        headingLevel={2}
-        initialDisplay="collapse-all"
-        enableExpandAll
-    >
-        <Accordion.Item title="What is this service?">
-            <p>This service lets you manage your account settings.</p>
-        </Accordion.Item>
-        <Accordion.Item title="How do I reset my password?">
-            <p>Click "Forgot password" on the login page.</p>
-        </Accordion.Item>
-        {/* JSX in title must be wrapped in <span> — title renders inside <button> */}
-        <Accordion.Item
-            title={
-                <span>
-                    Can I use <strong>bold text</strong> in a title?
-                </span>
-            }
-        >
-            <p>Yes — wrap JSX title content in a span.</p>
-        </Accordion.Item>
-    </Accordion>
-);
-
-// Controlled item — force one item open regardless of Expand All state
-const ControlledExample = () => (
-    <Accordion initialDisplay="collapse-all">
-        <Accordion.Item title="Always expanded" expanded={true}>
-            <p>This item ignores the parent initialDisplay.</p>
-        </Accordion.Item>
-        <Accordion.Item title="Follows parent state">
-            <p>This item collapses with the rest.</p>
-        </Accordion.Item>
-    </Accordion>
-);
-```
-
-## Props
-
-### Accordion props
-
-| Prop                     | Type                               | Default        | Description                                        |
-| ------------------------ | ---------------------------------- | -------------- | -------------------------------------------------- |
-| `children`               | `JSX.Element` \| `JSX.Element[]`   | —              | Accordion items — required                         |
-| `title`                  | `string`                           | —              | Group title shown above items                      |
-| `enableExpandAll`        | `boolean`                          | `true`         | Show Expand All / Collapse All button              |
-| `initialDisplay`         | `"collapse-all"` \| `"expand-all"` | `"expand-all"` | Initial expand/collapse state of all items         |
-| `showTitleInMobile`      | `boolean`                          | `false`        | Show group title on mobile viewports               |
-| `headingLevel`           | `number`                           | `2`            | Heading level for the group title                  |
-| `id`                     | `string`                           | —              | Unique id of the component                         |
-| `className`              | `string`                           | —              | Class selector                                     |
-| `data-testid`            | `string`                           | —              | Test identifier                                    |
-| `onExpandCollapseChange` | `(expanded: boolean) => void`      | —              | Callback when Expand All / Collapse All is toggled |
-
-### Accordion.Item props
-
-| Prop          | Type                             | Default     | Description                                                       |
-| ------------- | -------------------------------- | ----------- | ----------------------------------------------------------------- |
-| `children`    | `JSX.Element` \| `JSX.Element[]` | —           | Panel content — required                                          |
-| `title`       | `string` \| `JSX.Element`        | —           | Header text of the item                                           |
-| `type`        | `"default"` \| `"small"`         | `"default"` | Title text size                                                   |
-| `expanded`    | `boolean`                        | —           | Controlled expand state; overrides `initialDisplay` for this item |
-| `collapsible` | `boolean`                        | `true`      | Whether the item can be collapsed                                 |
-| `id`          | `string`                         | —           | Unique id of the item                                             |
-| `className`   | `string`                         | —           | Class selector                                                    |
-| `data-testid` | `string`                         | —           | Test identifier                                                   |
-
-## Rules
-
--   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
--   Use `Accordion.Item` for all panels — do not place content directly in `Accordion`.
--   Wrap custom JSX titles in `<span>` — item title renders inside a `<button>` and block elements are invalid inside it.
--   Individual `expanded` on `Accordion.Item` overrides Expand All / Collapse All for that item.
--   Use `initialDisplay="collapse-all"` when content is supplementary and users are unlikely to need it immediately.
-
-## Anti-patterns
-
--   Placing content directly inside `Accordion` without `Accordion.Item` wrappers.
--   Using Accordion when all content should be visible at once — use a plain layout instead.
--   Using block elements (e.g. `<div>`) directly as `title` in `Accordion.Item` — wrap in `<span>`.
--   Skipping `headingLevel` when `title` is set — this breaks heading hierarchy for screen readers.
diff --git a/docs/skills/fds-build/resources/v3/components/alert.md b/docs/skills/fds-build/resources/v3/components/alert.md
deleted file mode 100644
index 4d258c771c..0000000000
--- a/docs/skills/fds-build/resources/v3/components/alert.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Alert
-
-Import: `import { Alert } from "@lifesg/react-design-system/alert"`
-
-## When to use
-
-Use to call out important information within page sections — warnings before a user starts a task, informational notes relevant to a specific section, or non-transient status messages. Not for form validation errors (use form error patterns instead).
-
-## Variants
-
-| `type`          | When to use                                |
-| --------------- | ------------------------------------------ |
-| `"success"`     | Action completed successfully              |
-| `"error"`       | Action failed or system error              |
-| `"warning"`     | User should proceed with caution           |
-| `"info"`        | Neutral informational message              |
-| `"description"` | Descriptive content with no status meaning |
-
-## Usage
-
-```tsx
-import { Alert } from "@lifesg/react-design-system/alert";
-
-<Alert type="warning" showIcon role="alert">
-    Your session will expire in 5 minutes. Save your work to avoid losing
-    progress.
-</Alert>;
-```
-
-## Props
-
-| Prop                 | Type                                                                   | Default              | Description                                                                |
-| -------------------- | ---------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------- |
-| `type`               | `"warning"` \| `"error"` \| `"success"` \| `"info"` \| `"description"` | —                    | Style type of the alert — required                                         |
-| `sizeType`           | `"default"` \| `"small"`                                               | `"default"`          | Size of the component                                                      |
-| `showIcon`           | `boolean`                                                              | `false`              | Show icon matching the alert type                                          |
-| `actionLink`         | `HTMLAnchorAttributes`                                                 | —                    | Action link rendered inside the alert                                      |
-| `actionLinkIcon`     | `JSX.Element`                                                          | `<ArrowRightIcon />` | Custom icon for the action link                                            |
-| `customIcon`         | `JSX.Element`                                                          | —                    | Custom replacement icon for the alert                                      |
-| `maxCollapsedHeight` | `number`                                                               | —                    | Maximum visible height of content in px; shows expand toggle when exceeded |
-
-Inherits all `HTMLDivElement` attributes.
-
-## Rules
-
--   Always use `showIcon` — icons provide immediate visual recognition of alert severity.
--   Use `actionLink` for recoverable errors (retry, undo, view details).
--   Set `role` based on how the alert appears: `"alert"` for dynamic alerts triggered by user action, `"status"` for background status updates, omit for static content visible on page load.
--   Use `maxCollapsedHeight` to avoid long content overwhelming the layout.
--   `role` is not set automatically — set `role="alert"` for dynamic alerts, `role="status"` for background updates, and omit for static content.
-
-## Anti-patterns
-
--   Using Alert for form field validation errors — use inline form error patterns instead.
--   Omitting `role` on dynamically injected alerts — screen readers will not announce them.
--   Using `type="description"` with `showIcon` — description has no semantic status meaning.
diff --git a/docs/skills/fds-build/resources/v3/components/animation.md b/docs/skills/fds-build/resources/v3/components/animation.md
deleted file mode 100644
index 96fc9e6277..0000000000
--- a/docs/skills/fds-build/resources/v3/components/animation.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Animation
-
-Import: `import { Animation } from "@lifesg/react-design-system/animation"`
-
-## Props
-
-| Prop          | Type     | Default | Description                      |
-| ------------- | -------- | ------- | -------------------------------- |
-| `id`          | `string` | —       | Unique id of the component       |
-| `className`   | `string` | —       | Class selector of the component  |
-| `data-testid` | `string` | —       | Test identifier of the component |
-
-### Customised variant additional props
-
-| Prop    | Type     | Default | Description                            |
-| ------- | -------- | ------- | -------------------------------------- |
-| `color` | `string` | —       | Color applied on the animated elements |
diff --git a/docs/skills/fds-build/resources/v3/components/avatar.md b/docs/skills/fds-build/resources/v3/components/avatar.md
deleted file mode 100644
index 6bc22170eb..0000000000
--- a/docs/skills/fds-build/resources/v3/components/avatar.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Avatar
-
-Import: `import { Avatar } from "@lifesg/react-design-system/avatar"`
-
-## Props
-
-Inherits `HTMLAttributes<HTMLDivElement>`.
-
-| Prop          | Type                      | Default     | Description                                                                         |
-| ------------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------- |
-| `children`    | `string` \| `JSX.Element` | —           | Content displayed in the avatar — typically an initial or custom element — required |
-| `sizeType`    | `"default"` \| `"small"`  | `"default"` | Size of the avatar                                                                  |
-| `data-testid` | `string`                  | `"avatar"`  | Test identifier                                                                     |
diff --git a/docs/skills/fds-build/resources/v3/components/badge.md b/docs/skills/fds-build/resources/v3/components/badge.md
deleted file mode 100644
index 32d04c1e6d..0000000000
--- a/docs/skills/fds-build/resources/v3/components/badge.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Badge
-
-Import: `import { Badge } from "@lifesg/react-design-system/badge"`
-
-## Props
-
-Inherits `HTMLAttributes<HTMLDivElement>`.
-
-| Prop          | Type                                                                                        | Default     | Description                                                     |
-| ------------- | ------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------- |
-| `variant`     | `"number"` \| `"number-with-border"` \| `"dot"` \| `"dot-with-border"` \| `"square-number"` | `"number"`  | Visual style of the badge                                       |
-| `color`       | `"default"` \| `"important"`                                                                | `"default"` | Color tone of the badge                                         |
-| `count`       | `number`                                                                                    | —           | Number to display — applies to number-based variants only       |
-| `badgeOffset` | `[string, string]`                                                                          | —           | Offset from top-right corner as `[left, top]` CSS length values |
-| `children`    | `JSX.Element`                                                                               | —           | Content to wrap — badge is positioned in the top-right corner   |
-| `data-testid` | `string`                                                                                    | `"badge"`   | Test identifier                                                 |
-
-## Rules
-
--   `count` only applies to `"number"`, `"number-with-border"`, and `"square-number"` variants.
--   When `children` is provided, the badge overlays the top-right corner of the child element.
diff --git a/docs/skills/fds-build/resources/v3/components/box-container.md b/docs/skills/fds-build/resources/v3/components/box-container.md
deleted file mode 100644
index 9ed4525216..0000000000
--- a/docs/skills/fds-build/resources/v3/components/box-container.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# BoxContainer
-
-Import: `import { BoxContainer } from "@lifesg/react-design-system/box-container"`
-
-## When to use
-
-Use for a single collapsible panel displaying form data or structured content — typically a named section within a form or detail view. Supports an optional header action and a status indicator to flag section-level errors or warnings.
-
-## Sub-components
-
-### BoxContainerSubComponentTestIds
-
-| Prop               | Type     | Description                            |
-| ------------------ | -------- | -------------------------------------- |
-| `title`            | `string` | Test id for the header title           |
-| `displayStateIcon` | `string` | Test id for the display state icon     |
-| `handle`           | `string` | Test id for the expand/collapse handle |
-
-## Variants
-
-| `displayState` | When to use                                |
-| -------------- | ------------------------------------------ |
-| `"default"`    | Normal state — no icon                     |
-| `"error"`      | Section has validation errors              |
-| `"warning"`    | Section has a warning that needs attention |
-
-## Props
-
-| Prop                    | Type                                    | Default     | Description                                                       |
-| ----------------------- | --------------------------------------- | ----------- | ----------------------------------------------------------------- |
-| `title`                 | `string` \| `JSX.Element`               | —           | Header title — required                                           |
-| `children`              | `JSX.Element` \| `JSX.Element[]`        | —           | Panel content — required                                          |
-| `collapsible`           | `boolean`                               | `true`      | Allow the panel to be collapsed                                   |
-| `expanded`              | `boolean`                               | `false`     | Controlled expand state (only valid when `collapsible` is `true`) |
-| `displayState`          | `"default"` \| `"error"` \| `"warning"` | `"default"` | Icon shown alongside title to indicate status                     |
-| `callToActionComponent` | `JSX.Element`                           | —           | Custom action rendered in the header                              |
-| `clickableHeader`       | `boolean`                               | —           | Make the entire header clickable to toggle expand/collapse        |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds`       | —           | Test ids for sub-elements                                         |
-| `id`                    | `string`                                | —           | Unique id of the component                                        |
-| `className`             | `string`                                | —           | Class selector                                                    |
-| `data-testid`           | `string`                                | —           | Test identifier                                                   |
-
-## Rules
-
--   Use `displayState` to indicate section-level status — not as a substitute for inline field errors.
--   Use `callToActionComponent` for section-level actions only — not for form submission buttons.
--   Use `collapsible={false}` when the content must always be visible.
--   Use `clickableHeader` to make the full header row the expand/collapse trigger — improves usability for dense layouts.
-
-## Anti-patterns
-
--   Using `displayState="error"` instead of inline form field errors — `displayState` signals section-level status only.
--   Using `callToActionComponent` for form submission — use a dedicated submit button outside the container.
--   Nesting BoxContainer inside another BoxContainer.
diff --git a/docs/skills/fds-build/resources/v3/components/breadcrumb.md b/docs/skills/fds-build/resources/v3/components/breadcrumb.md
deleted file mode 100644
index da62443b36..0000000000
--- a/docs/skills/fds-build/resources/v3/components/breadcrumb.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# Breadcrumb
-
-Import: `import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb"`
-
-## When to use
-
-Use on pages within a multi-level hierarchy to help users navigate to parent pages.
-
-Do not use on:
-
--   The home page
--   Pages with no parent
--   Focused flows such as forms or wizards
-
-## Variants
-
-| `separatorStyle`      | When to use              |
-| --------------------- | ------------------------ |
-| `"chevron"` (default) | Standard pages           |
-| `"slash"`             | Alternative visual style |
-
-## Usage
-
-```tsx
-import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
-
-<Breadcrumb
-    links={[
-        { children: "Home", href: "/" },
-        { children: "Services", href: "/services" },
-        { children: "Apply" },
-    ]}
-/>;
-```
-
-## Props
-
-| Prop             | Type                          | Default     | Description                                                                                              |
-| ---------------- | ----------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
-| `links`          | `HTMLAnchorElement[]`         | —           | Breadcrumb items — **required**. Each item accepts standard anchor attributes (`children`, `href`, etc.) |
-| `separatorStyle` | `"chevron" \| "slash"`        | `"chevron"` | Separator style between items                                                                            |
-| `fadeColor`      | `string[] \| FadeColorSet`    | —           | Gradient color for scroll fade on overflow; set to match page background                                 |
-| `fadePosition`   | `"left" \| "right" \| "both"` | `"both"`    | Which edges show the scroll fade                                                                         |
-| `itemStyle`      | `CSS-JS string`               | —           | Custom style applied to each breadcrumb item                                                             |
-| `id`             | `string`                      | —           | Unique identifier                                                                                        |
-| `className`      | `string`                      | —           | Class selector                                                                                           |
-| `data-testid`    | `string`                      | —           | Test identifier                                                                                          |
-
-### FadeColorSet
-
-| Prop    | Type       | Description                 |
-| ------- | ---------- | --------------------------- |
-| `left`  | `string[]` | Color(s) for the left fade  |
-| `right` | `string[]` | Color(s) for the right fade |
-
-## Rules
-
--   Always place the current page last in `links` — omit `href` on the last item.
--   Keep breadcrumb trails to 4 items or fewer; 5 or more items automatically collapse the middle into an overflow menu.
--   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
--   The last item in `links` is rendered as the current page (non-clickable, `aria-current="page"`). Omit `href` on the last item.
--   When 5 or more items are present, middle items automatically collapse into an overflow menu.
--   On mobile, breadcrumbs scroll horizontally with a fade effect at the edges controlled by `fadeColor` and `fadePosition`.
-
-## Anti-patterns
-
--   Do not add `href` to the last breadcrumb item — it represents the current page and must not be clickable.
--   Do not use breadcrumbs on single-level or flat navigation structures.
--   Do not use breadcrumbs inside forms or wizard flows.
diff --git a/docs/skills/fds-build/resources/v3/components/button-with-icon.md b/docs/skills/fds-build/resources/v3/components/button-with-icon.md
deleted file mode 100644
index f828084707..0000000000
--- a/docs/skills/fds-build/resources/v3/components/button-with-icon.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# ButtonWithIcon
-
-> **Not available in v4.** If you are building for v4, do not use this component.
-
-Import: `import { ButtonWithIcon } from "@lifesg/react-design-system/button-with-icon"`
-
-## Sub-components
-
-| Sub-component            | When to use                    |
-| ------------------------ | ------------------------------ |
-| `ButtonWithIcon.Default` | Standard size                  |
-| `ButtonWithIcon.Small`   | Dense layouts, toolbars        |
-| `ButtonWithIcon.Large`   | Only when explicitly specified |
-
-## Props
-
-Also inherits all props from `HTMLButtonElement` (e.g. `disabled`, `onClick`, `children`).
-
-| Prop                    | Type                                                  | Default     | Description                                        |
-| ----------------------- | ----------------------------------------------------- | ----------- | -------------------------------------------------- |
-| `icon`                  | `JSX.Element`                                         | —           | Icon component to render                           |
-| `iconPosition`          | `"left"` \| `"right"`                                 | `"left"`    | Icon position relative to label                    |
-| `styleType`             | `"default"` \| `"secondary"` \| `"light"` \| `"link"` | `"default"` | Visual style of the button                         |
-| `danger`                | `boolean`                                             | `false`     | Applies a red color scheme for destructive actions |
-| `loading`               | `boolean`                                             | `false`     | Replaces the icon with a loading spinner           |
-| `focusableWhenDisabled` | `boolean`                                             | `false`     | Keeps button focusable when disabled               |
-
-## Rules
-
--   `styleType` is mandatory.
--   Use `iconPosition="right"` only for directional actions (next, continue, external link).
--   Combine `loading` and `disabled` during async operations to prevent double-submission.
diff --git a/docs/skills/fds-build/resources/v3/components/button.md b/docs/skills/fds-build/resources/v3/components/button.md
deleted file mode 100644
index dbfaf65db9..0000000000
--- a/docs/skills/fds-build/resources/v3/components/button.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Button
-
-Import: `import { Button } from "@lifesg/react-design-system/button"`
-
-## When to use
-
-```
-┌─ "Which button component?"
-│
-├─ Icon only (no text)?
-│  └─ IconButton — aria-label required
-│
-├─ Text + icon together?
-│  └─ ButtonWithIcon — icon left (default) or right for directional actions
-│
-└─ Text only?
-   └─ Button
-```
-
-## Sub-components
-
-| Sub-component    | When to use                                             |
-| ---------------- | ------------------------------------------------------- |
-| `Button.Default` | Standard size — use for all buttons including hero CTAs |
-| `Button.Small`   | Dense layouts, toolbars                                 |
-| `Button.Large`   | Only when explicitly specified — do not use by default  |
-
-## Variants
-
-| `styleType`   | When to use                           |
-| ------------- | ------------------------------------- |
-| `"default"`   | Main action on the page               |
-| `"secondary"` | Cancel, go back, alternative option   |
-| `"light"`     | On colored or dark backgrounds        |
-| `"link"`      | Tertiary, de-emphasized inline action |
-
-Add `danger` for destructive actions (delete, remove) — applies to any `styleType`.
-
-## Usage
-
-```tsx
-import { Button } from "@lifesg/react-design-system/button";
-
-<Button.Default styleType="default" onClick={() => {}}>
-    Save changes
-</Button.Default>;
-```
-
-## Props
-
-| Prop                    | Type                                                  | Default     | Description                                        |
-| ----------------------- | ----------------------------------------------------- | ----------- | -------------------------------------------------- |
-| `styleType`             | `"default"` \| `"secondary"` \| `"light"` \| `"link"` | `"default"` | Visual style of the button                         |
-| `loading`               | `boolean`                                             | `false`     | Displays a loading spinner                         |
-| `danger`                | `boolean`                                             | `false`     | Applies a red color scheme for destructive actions |
-| `focusableWhenDisabled` | `boolean`                                             | `false`     | Keeps button focusable when disabled               |
-
-Also inherits all props from `HTMLButtonElement` (e.g. `disabled`, `type`, `onClick`, `children`).
-
-## Rules
-
--   `styleType` is mandatory.
--   Use sentence case for all labels — "Save changes" not "Save Changes".
--   Use concise verb + noun labels — avoid "OK", "Yes", "Click here".
--   Do not use `Button.Large` unless explicitly required — `Button.Default` is correct for hero CTAs.
--   Combine `loading` and `disabled` during async operations to prevent double-submission.
--   Never use raw `<button>` elements — always use design system button components.
--   Do not nest buttons inside buttons or links.
--   `danger` applies to any `styleType`.
-
-## Anti-patterns
-
--   Do not use `Button.Large` as a default choice — it is a special case only.
--   Do not use vague labels like "OK" or "Yes" — labels must describe the action.
--   Do not use `loading` alone without also setting `disabled`.
diff --git a/docs/skills/fds-build/resources/v3/components/calendar.md b/docs/skills/fds-build/resources/v3/components/calendar.md
deleted file mode 100644
index f3340e089f..0000000000
--- a/docs/skills/fds-build/resources/v3/components/calendar.md
+++ /dev/null
@@ -1,109 +0,0 @@
-# Calendar
-
-Import: `import { Calendar } from "@lifesg/react-design-system/calendar"`
-
-## When to use
-
--   Displaying an inline date picker when a full-page or panel calendar is preferable over a dropdown.
--   Use `variant="single"` for standard single-date selection.
--   Use `variant="multi"` when the user must pick multiple non-contiguous dates (e.g. recurring appointments).
-
-## Usage
-
-### variant="single" — single date selection
-
-```tsx
-import { useState } from "react";
-import { Calendar } from "@lifesg/react-design-system/calendar";
-
-const AppointmentCalendar = () => {
-    const [date, setDate] = useState("2024-06-15");
-
-    return (
-        <Calendar
-            variant="single"
-            value={date}
-            minDate="2024-01-01"
-            maxDate="2024-12-31"
-            onChange={(selected) => setDate(selected)}
-        />
-    );
-};
-```
-
-### variant="multi" — multiple date selection
-
-Note `values` (plural) and `onChange` receives the full updated array.
-
-```tsx
-import { useState } from "react";
-import { Calendar } from "@lifesg/react-design-system/calendar";
-
-const MultiDateCalendar = () => {
-    const [dates, setDates] = useState<string[]>([]);
-
-    return (
-        <Calendar
-            variant="multi"
-            values={dates}
-            minDate="2024-01-01"
-            maxDate="2024-12-31"
-            maxSelectable={5}
-            onChange={(selected) => setDates(selected)}
-        />
-    );
-};
-```
-
-## Props — shared
-
-| Prop                       | Type                                | Default      | Description                                                          |
-| -------------------------- | ----------------------------------- | ------------ | -------------------------------------------------------------------- |
-| `variant`                  | `"single" \| "multi"`               | `"single"`   | Calendar selection mode                                              |
-| `styleType`                | `"bordered" \| "no-border"`         | `"bordered"` | Whether a border is rendered                                         |
-| `disabledDates`            | `string[]`                          | —            | Dates to disable, in `YYYY-MM-DD` format                             |
-| `minDate`                  | `string`                            | —            | Minimum selectable date in `YYYY-MM-DD` format (inclusive)           |
-| `maxDate`                  | `string`                            | —            | Maximum selectable date in `YYYY-MM-DD` format (inclusive)           |
-| `showActiveMonthDaysOnly`  | `boolean`                           | `false`      | Show only the selected month's dates                                 |
-| `onHover`                  | `(value: string) => void`           | —            | Called with hovered date (`YYYY-MM-DD`) or empty string when leaving |
-| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void` | —            | Called when visible month/year changes                               |
-| `id`                       | `string`                            | —            | Unique identifier of the component                                   |
-| `className`                | `string`                            | —            | Class selector of the component                                      |
-| `data-testid`              | `string`                            | —            | Test identifier of the component                                     |
-
-## Props — variant="single"
-
-| Prop       | Type                      | Default | Description                           |
-| ---------- | ------------------------- | ------- | ------------------------------------- |
-| `value`    | `string`                  | —       | Selected date in `YYYY-MM-DD` format  |
-| `onChange` | `(value: string) => void` | —       | Called when the selected date changes |
-
-## Props — variant="multi"
-
-| Prop            | Type                         | Default | Description                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------ |
-| `values`        | `string[]`                   | —       | Array of selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                     | —       | Minimum number of dates required for a valid selection |
-| `maxSelectable` | `number`                     | —       | Maximum number of dates that can be selected           |
-| `onChange`      | `(values: string[]) => void` | —       | Called when the selection changes                      |
-
-## YearMonthDisplay
-
-| Prop    | Type     | Description                           |
-| ------- | -------- | ------------------------------------- |
-| `year`  | `number` | Current visible year in `YYYY` format |
-| `month` | `number` | Current visible month, 1–12           |
-
-## Rules
-
--   `variant="single"` uses `value: string` and `onChange: (date: string) => void`.
--   `variant="multi"` uses `values: string[]` and `onChange: (dates: string[]) => void` — note the plural prop names.
--   All dates must be in `YYYY-MM-DD` format.
--   Use `minDate`/`maxDate` to constrain selectable range.
--   Use `disabledDates` for specific non-selectable dates within the allowed range.
-
-## Anti-patterns
-
--   Do not pass `value` to `variant="multi"` — the prop is `values` (plural).
--   Do not pass `values` to `variant="single"` — the prop is `value` (singular).
--   Do not use Calendar inside a form for simple date entry — prefer `Form.DateInput` for that pattern.
diff --git a/docs/skills/fds-build/resources/v3/components/checkbox.md b/docs/skills/fds-build/resources/v3/components/checkbox.md
deleted file mode 100644
index cf2bb2ad68..0000000000
--- a/docs/skills/fds-build/resources/v3/components/checkbox.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Checkbox
-
-Import: `import { Checkbox } from "@lifesg/react-design-system/checkbox"`
-
-## When to use
-
--   Simple boolean selections where a compact tick-box is sufficient.
--   Table row selection (single or "select all").
--   Filter lists with multiple independent options.
--   "Select all" patterns using the `indeterminate` state.
-
-Prefer `Toggle` over `Checkbox` when building form inputs that need a visible card-style label container.
-
-## Variants
-
-| `displaySize` | When to use                    |
-| ------------- | ------------------------------ |
-| `"default"`   | Standard use                   |
-| `"small"`     | Dense layouts, inline controls |
-
-## Usage
-
-```tsx
-import { Checkbox } from "@lifesg/react-design-system/checkbox";
-
-<label>
-    <Checkbox checked={agreed} onChange={(e) => {}} />I agree to the terms and
-    conditions
-</label>;
-```
-
-## Props
-
-| Prop                    | Type                                               | Default     | Description                                                                  |
-| ----------------------- | -------------------------------------------------- | ----------- | ---------------------------------------------------------------------------- |
-| `displaySize`           | `"default"` \| `"small"`                           | `"default"` | Display size of the component                                                |
-| `checked`               | `boolean`                                          | —           | Controlled checked state                                                     |
-| `indeterminate`         | `boolean`                                          | —           | Indeterminate state — use for "select all" when only some items are selected |
-| `focusableWhenDisabled` | `boolean`                                          | —           | Keeps component focusable when disabled, preventing all user interaction     |
-| `onChange`              | `(e: React.ChangeEvent<HTMLInputElement>) => void` | —           | Called when the checked state changes — inherited from `InputHTMLAttributes` |
-
-Also inherits all props from `React.InputHTMLAttributes<HTMLInputElement>` (e.g. `name`, `value`, `disabled`, `aria-*`).
-
-## Rules
-
--   Always pair with a visible label — wrap in `<label>` or use `aria-label`.
--   Use `indeterminate` for "select all" controls when only some items in a list are selected — not as a permanent state.
--   Use the same `name` attribute when grouping checkboxes in a form.
--   No dedicated `disabled` prop — use the inherited `disabled` from `InputHTMLAttributes`, or `focusableWhenDisabled` to retain focus while blocking interaction.
--   `indeterminate` is a visual state; manage controlled `checked` separately.
-
-## Anti-patterns
-
--   Do not use `indeterminate` as a permanent or final state — it is a transitional indicator only.
--   Do not use `Checkbox` alone without a label — always provide accessible text.
--   Do not use `Checkbox` when only one option from a set can be selected — use `RadioButton` instead.
diff --git a/docs/skills/fds-build/resources/v3/components/countdown-timer.md b/docs/skills/fds-build/resources/v3/components/countdown-timer.md
deleted file mode 100644
index 81c701bb60..0000000000
--- a/docs/skills/fds-build/resources/v3/components/countdown-timer.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# CountdownTimer
-
-Import: `import { CountdownTimer } from "@lifesg/react-design-system/countdown-timer"`
-
-## Props
-
-| Prop               | Type                                            | Default        | Description                                                                          |
-| ------------------ | ----------------------------------------------- | -------------- | ------------------------------------------------------------------------------------ |
-| `show` \*          | `boolean`                                       | —              | Starts the countdown timer when true                                                 |
-| `timer` \*         | `number`                                        | —              | Countdown duration in seconds                                                        |
-| `timestamp`        | `number`                                        | —              | Unix timestamp (ms) at which the countdown ends; required if `timer` is not provided |
-| `notifyTimer`      | `number`                                        | —              | Notification threshold in seconds                                                    |
-| `offset`           | `{ top: number; left: number; right: number; }` | `{ top: 168 }` | Sticky position on desktop/tablet (px)                                               |
-| `mobileOffset`     | `{ top: number; }`                              | `{ top: 80 }`  | Sticky position on mobile (px)                                                       |
-| `align`            | `"left" \| "right"`                             | `"right"`      | Horizontal alignment of the sticky component                                         |
-| `fixed`            | `boolean`                                       | `true`         | Whether the component is sticky when scrolled out of view                            |
-| `reminderInterval` | `number`                                        | `120`          | Interval in seconds for polite screen reader reminders                               |
-| `onTick`           | `(seconds: number) => void`                     | —              | Called every second when value ≤ `notifyTimer` (not guaranteed to be precise)        |
-| `onNotify`         | `() => void`                                    | —              | Called once when the timer value drops below `notifyTimer`                           |
-| `onFinish`         | `() => void`                                    | —              | Called when the timer reaches zero                                                   |
-| `className`        | `string`                                        | —              | Class selector of the component                                                      |
-| `data-testid`      | `string`                                        | —              | Test identifier of the component                                                     |
-
-`*` = required
diff --git a/docs/skills/fds-build/resources/v3/components/data-table.md b/docs/skills/fds-build/resources/v3/components/data-table.md
deleted file mode 100644
index 85afc4b459..0000000000
--- a/docs/skills/fds-build/resources/v3/components/data-table.md
+++ /dev/null
@@ -1,145 +0,0 @@
-# DataTable
-
-Import: `import { DataTable } from "@lifesg/react-design-system/data-table"`
-
-## When to use
-
--   Displaying tabular data with optional sorting, row selection, and custom cell rendering.
--   Use `enableMultiSelect` + `enableSelectAll` when users need to act on multiple rows at once.
-
-## Usage
-
-### Column definitions, sorting, selection, and custom cell rendering
-
-```tsx
-import { useState, useMemo } from "react";
-import {
-    DataTable,
-    SortIndicatorsProps,
-} from "@lifesg/react-design-system/data-table";
-import { Pill } from "@lifesg/react-design-system/pill";
-
-const rows = [
-    { id: "1", name: "Alice", status: "active", score: 90 },
-    { id: "2", name: "Bob", status: "inactive", score: 72 },
-    { id: "3", name: "Carol", status: "active", score: 85 },
-];
-
-const Example = () => {
-    const [selectedIds, setSelectedIds] = useState<string[]>([]);
-    const [sortState, setSortState] = useState<SortIndicatorsProps>({
-        score: "desc",
-    });
-
-    // onSelect: toggle a single row id
-    const handleSelect = (rowId: string, isSelected: boolean) => {
-        setSelectedIds((prev) =>
-            isSelected ? [...prev, rowId] : prev.filter((id) => id !== rowId)
-        );
-    };
-
-    // onSelectAll: isAllSelected=true means "clear all"; false means "select all"
-    const handleSelectAll = (isAllSelected: boolean) => {
-        setSelectedIds(isAllSelected ? [] : rows.map((r) => r.id));
-    };
-
-    const handleHeaderClick = (fieldKey: string) => {
-        if (fieldKey === "score") {
-            setSortState({ score: sortState.score === "asc" ? "desc" : "asc" });
-        }
-    };
-
-    const sorted = useMemo(
-        () =>
-            [...rows].sort((a, b) =>
-                sortState.score === "asc"
-                    ? a.score - b.score
-                    : b.score - a.score
-            ),
-        [sortState]
-    );
-
-    return (
-        <DataTable
-            headers={[
-                { fieldKey: "name", label: "Name", keyColumn: true },
-                { fieldKey: "status", label: "Status" },
-                { fieldKey: "score", label: "Score", clickable: true },
-            ]}
-            rows={sorted.map((row) => ({
-                ...row,
-                // custom cell: render status as a Pill
-                status: <Pill type="outline">{row.status}</Pill>,
-            }))}
-            selectedIds={selectedIds}
-            disabledIds={["2"]}
-            sortIndicators={sortState}
-            enableMultiSelect
-            enableSelectAll
-            onSelect={handleSelect}
-            onSelectAll={handleSelectAll}
-            onHeaderClick={handleHeaderClick}
-        />
-    );
-};
-```
-
-## Props
-
-| Prop                    | Type                                           | Default     | Description                                               |
-| ----------------------- | ---------------------------------------------- | ----------- | --------------------------------------------------------- |
-| `headers` \*            | `(string \| HeaderItemProps)[]`                | —           | Configuration for each header column                      |
-| `rows`                  | `RowProps[]`                                   | —           | The list of data                                          |
-| `selectedIds`           | `string[]`                                     | —           | The ids of selected items                                 |
-| `disabledIds`           | `string[]`                                     | —           | The ids of disabled items                                 |
-| `sortIndicators`        | `{ [fieldKey]: "asc" \| "desc" }`              | —           | Sort indicator display state for each column              |
-| `alternatingRows`       | `boolean`                                      | —           | Every alternate row gets a different background colour    |
-| `loadState`             | `"success" \| "loading"`                       | `"success"` | Table load state; shows animation while loading           |
-| `renderCustomEmptyView` | `() => React.ReactNode`                        | —           | Custom view rendered when the table is empty              |
-| `emptyView`             | `ErrorDisplayAttributes`                       | —           | Override props for the empty view display                 |
-| `enableMultiSelect`     | `boolean`                                      | —           | Enables a checkbox in each row for multi-selection        |
-| `enableSelectAll`       | `boolean`                                      | —           | Enables a header checkbox to select all / clear selection |
-| `enableStickyHeader`    | `boolean`                                      | —           | Fixes the header to the top                               |
-| `enableActionBar`       | `boolean`                                      | —           | Shows an action bar when one or more rows are selected    |
-| `actionBarContent`      | `React.ReactNode`                              | —           | Custom content rendered within the action bar             |
-| `onClearSelectionClick` | `() => void`                                   | —           | Called when the clear button in the action bar is clicked |
-| `onSelect`              | `(rowId: string, isSelected: boolean) => void` | —           | Called when a row is selected                             |
-| `onSelectAll`           | `(isAllSelected: boolean) => void`             | —           | Called when all rows are selected                         |
-| `onHeaderClick`         | `(fieldKey: string) => void`                   | —           | Called with the column field key when a header is clicked |
-| `id`                    | `string`                                       | —           | Unique identifier of the component                        |
-| `className`             | `string`                                       | —           | Class selector of the component                           |
-| `data-testid`           | `string`                                       | —           | Test identifier of the component                          |
-
-`*` = required
-
-## HeaderItemProps
-
-| Prop          | Type                        | Default | Description                                                            |
-| ------------- | --------------------------- | ------- | ---------------------------------------------------------------------- |
-| `fieldKey` \* | `string`                    | —       | Key name in the row item object                                        |
-| `label` \*    | `string \| React.ReactNode` | —       | Display label for the column header                                    |
-| `clickable`   | `boolean`                   | —       | If true, `onHeaderClick` is called when the cell is clicked            |
-| `style`       | `CSSProperties`             | —       | Custom styles for the column header cell                               |
-| `keyColumn`   | `boolean`                   | —       | Marks this column as descriptive for screen reader row checkbox labels |
-
-## RowProps
-
-| Prop         | Type                                                                           | Default | Description                             |
-| ------------ | ------------------------------------------------------------------------------ | ------- | --------------------------------------- |
-| `id` \*      | `string`                                                                       | —       | Row id                                  |
-| `[fieldKey]` | `string \| number \| React.ReactNode \| (row, renderProps) => React.ReactNode` | —       | Other properties on the row item object |
-
-## Rules
-
--   Each row object must have a unique `id: string` field.
--   `selectedIds` and `disabledIds` are arrays of row `id` strings — manage them in external state.
--   `onSelect(rowId, isSelected)` fires per row; toggle the id into/out of your `selectedIds` array.
--   `onSelectAll(isAllSelected)` fires when the header checkbox is clicked; `isAllSelected` is `true` when the action should clear all selections (the parameter name is inverted — see example).
--   For sortable columns, set `clickable: true` on the header and handle `onHeaderClick(fieldKey)`.
--   Custom cell rendering: set a row field to a `ReactNode` or a render function `(row, renderProps) => ReactNode`.
-
-## Anti-patterns
-
--   Do not derive `selectedIds` from row data alone without external state — the table is uncontrolled for selection without it.
--   Do not omit `id` on row objects — selection and disabled logic will break silently.
--   Do not add `clickable: true` to a header without wiring `onHeaderClick` — clicks will silently do nothing.
diff --git a/docs/skills/fds-build/resources/v3/components/date-navigator.md b/docs/skills/fds-build/resources/v3/components/date-navigator.md
deleted file mode 100644
index bbaa0c0f5e..0000000000
--- a/docs/skills/fds-build/resources/v3/components/date-navigator.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# DateNavigator
-
-Import: `import { DateNavigator } from "@lifesg/react-design-system/date-navigator"`
-
-## Props
-
-| Prop                     | Type                            | Default         | Description                                                            |
-| ------------------------ | ------------------------------- | --------------- | ---------------------------------------------------------------------- |
-| `selectedDate` \*        | `string`                        | —               | Current displayed date in `YYYY-MM-DD` format                          |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void` | —               | Called on left arrow navigation button click                           |
-| `onRightArrowClick` \*   | `(currentDate: string) => void` | —               | Called on right arrow navigation button click                          |
-| `minDate`                | `string`                        | —               | Minimum date allowed for navigation in `YYYY-MM-DD` format (inclusive) |
-| `maxDate`                | `string`                        | —               | Maximum date allowed for navigation in `YYYY-MM-DD` format (inclusive) |
-| `loading`                | `boolean`                       | —               | Disables navigation buttons while loading                              |
-| `showDateAsShortForm`    | `boolean`                       | —               | Shows the date in short form                                           |
-| `showCurrentDateAsToday` | `boolean`                       | —               | Shows today's system date as "Today"                                   |
-| `onCalendarDateSelect`   | `(currentDate: string) => void` | —               | Called on a calendar date selection                                    |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`        | `document body` | Root element that hosts the calendar dropdown                          |
-| `id`                     | `string`                        | —               | Identifier of the component                                            |
-| `className`              | `string`                        | —               | Class selector of the component                                        |
-| `data-testid`            | `string`                        | —               | Test identifier of the component                                       |
-
-`*` = required
-
-## Rules
-
--   Only override `dropdownRootNode` if you need the dropdown to share a stacking context with a scroll container — may cause z-index issues.
diff --git a/docs/skills/fds-build/resources/v3/components/divider.md b/docs/skills/fds-build/resources/v3/components/divider.md
deleted file mode 100644
index 2603aed8a3..0000000000
--- a/docs/skills/fds-build/resources/v3/components/divider.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Divider
-
-Import: `import { Divider } from "@lifesg/react-design-system/divider"`
-
-## Props
-
-Inherits all props from `HTMLElement`.
-
-| Prop          | Type                                           | Default   | Description                                                   |
-| ------------- | ---------------------------------------------- | --------- | ------------------------------------------------------------- |
-| `thickness`   | `number`                                       | `1`       | Height of the Divider in px                                   |
-| `lineStyle`   | `"solid" \| "dashed"`                          | `"solid"` | Style of the divider line                                     |
-| `layoutType`  | `"flex" \| "grid"`                             | `"flex"`  | Layout type context                                           |
-| `color`       | `string \| (props: ThemeStyleProps) => string` | —         | Color of the divider line                                     |
-| `mobileCols`  | `number \| number[]`                           | `4`       | Column span on mobile; only applies with `layoutType="grid"`  |
-| `tabletCols`  | `number \| number[]`                           | `8`       | Column span on tablet; only applies with `layoutType="grid"`  |
-| `desktopCols` | `number \| number[]`                           | `12`      | Column span on desktop; only applies with `layoutType="grid"` |
-
-## Rules
-
--   `mobileCols`, `tabletCols`, `desktopCols` follow the same semantics as `Layout.ColDiv` — see ColDiv docs for details.
diff --git a/docs/skills/fds-build/resources/v3/components/drawer.md b/docs/skills/fds-build/resources/v3/components/drawer.md
deleted file mode 100644
index f2b3ced59e..0000000000
--- a/docs/skills/fds-build/resources/v3/components/drawer.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Drawer
-
-Import: `import { Drawer } from "@lifesg/react-design-system/drawer"`
-
-## When to use
-
-Use to show supplementary content or actions without navigating away from the current page — for example, filter panels or detail views.
-
-Do not use for:
-
--   Primary forms that require focused attention
--   Flows that need the full viewport
-
-## Usage
-
-```tsx
-import { useState } from "react";
-import { Drawer } from "@lifesg/react-design-system/drawer";
-import { Button } from "@lifesg/react-design-system/button";
-import { Text } from "@lifesg/react-design-system/text";
-
-const FilterDrawer = () => {
-    const [show, setShow] = useState(false);
-
-    const handleClose = () => setShow(false);
-
-    return (
-        <>
-            <Button.Default onClick={() => setShow(true)}>
-                Open filters
-            </Button.Default>
-
-            <Drawer
-                show={show}
-                heading="Filter options"
-                onClose={handleClose}
-                onOverlayClick={handleClose}
-            >
-                <div style={{ padding: "1.5rem" }}>
-                    <Text.H4 style={{ marginBottom: "0.75rem" }}>
-                        Category
-                    </Text.H4>
-                    <Text.Body style={{ marginBottom: "2rem" }}>
-                        Filter content goes here.
-                    </Text.Body>
-                    <Button.Default styleType="secondary" onClick={handleClose}>
-                        Close
-                    </Button.Default>
-                </div>
-            </Drawer>
-        </>
-    );
-};
-```
-
-## Props
-
-| Prop             | Type              | Default | Description                                 |
-| ---------------- | ----------------- | ------- | ------------------------------------------- |
-| `show`           | `boolean`         | —       | Controls visibility                         |
-| `heading`        | `string`          | —       | Header text of the drawer panel             |
-| `onClose`        | `() => void`      | —       | Called when the close button is clicked     |
-| `onOverlayClick` | `() => void`      | —       | Called when the backdrop overlay is clicked |
-| `children`       | `React.ReactNode` | —       | Panel content                               |
-| `id`             | `string`          | —       | Unique identifier                           |
-| `className`      | `string`          | —       | Class selector                              |
-| `data-testid`    | `string`          | —       | Test identifier                             |
-
-## Rules
-
--   Always provide `onClose` so users can dismiss the panel via the close button.
--   Provide `onOverlayClick` to allow dismissal by clicking outside the panel; set it to the same handler as `onClose` unless the overlay should not close the panel.
--   Use `heading` to give the drawer a descriptive title for the user and for screen readers.
--   The drawer slides in from the right edge of the viewport.
--   Content scrolls independently within the panel when it exceeds the panel height.
-
-## Anti-patterns
-
--   Do not use the Drawer for full forms — use a dedicated page or Modal instead.
--   Do not omit `onClose` — users must have a way to dismiss the panel.
diff --git a/docs/skills/fds-build/resources/v3/components/error-display.md b/docs/skills/fds-build/resources/v3/components/error-display.md
deleted file mode 100644
index c605f4904d..0000000000
--- a/docs/skills/fds-build/resources/v3/components/error-display.md
+++ /dev/null
@@ -1,114 +0,0 @@
-# ErrorDisplay
-
-Import: `import { ErrorDisplay } from "@lifesg/react-design-system/error-display"`
-
-## When to use
-
-Use for full-page or full-section states where the primary content cannot be shown — HTTP errors, empty results, session states, and system messages. It handles illustration, title, description, and action button as a unit.
-
-Do not build custom error pages with raw Typography + Button — always use `ErrorDisplay` so illustrations and copy stay consistent across products.
-
-## Variants
-
-| `type`                          | When to use                                                      |
-| ------------------------------- | ---------------------------------------------------------------- |
-| `"no-item-found"`               | Search or filter returned no results                             |
-| `"404"`                         | Page not found                                                   |
-| `"403"`                         | Access denied / permission error                                 |
-| `"500"`                         | Internal server error                                            |
-| `"400"`                         | Bad request                                                      |
-| `"408"`                         | Request timeout                                                  |
-| `"502"`                         | Bad gateway                                                      |
-| `"503"`                         | Service unavailable                                              |
-| `"504"`                         | Gateway timeout                                                  |
-| `"maintenance"`                 | Planned downtime — requires `additionalProps.dateString`         |
-| `"inactivity"`                  | Session timeout warning — requires `additionalProps.secondsLeft` |
-| `"logout"`                      | User has been logged out                                         |
-| `"warning"`                     | General warning state                                            |
-| `"confirmation"`                | Action confirmed (e.g. submission complete)                      |
-| `"link-error"`                  | Broken or expired link                                           |
-| `"insufficient-credits"`        | User lacks credits to proceed                                    |
-| `"payment-unsuccessful"`        | Payment failed                                                   |
-| `"transfer-unsuccessful"`       | Transfer failed                                                  |
-| `"unsupported-browser"`         | Browser not supported                                            |
-| `"partially-supported-browser"` | Browser partially supported                                      |
-
-## Usage
-
-```tsx
-import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
-
-{
-    /* No search results */
-}
-<ErrorDisplay
-    type="no-item-found"
-    title="No results found"
-    description="Try adjusting your search or filters."
-    actionButton={{ children: "Clear filters", onClick: handleClear }}
-/>;
-
-{
-    /* Page not found */
-}
-<ErrorDisplay type="404" />;
-
-{
-    /* Maintenance with scheduled date */
-}
-<ErrorDisplay
-    type="maintenance"
-    additionalProps={{ dateString: "1 Jan 2025, 8:00am to 10:00am" }}
-/>;
-
-{
-    /* Session inactivity warning */
-}
-<ErrorDisplay
-    type="inactivity"
-    additionalProps={{ secondsLeft: 60, reminderInterval: 30 }}
-/>;
-```
-
-## Props
-
-| Prop                 | Type                                                                                                                                                                                                                                                                                                                           | Default               | Description                                        |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | -------------------------------------------------- |
-| `type` \*            | `"400" \| "403" \| "404" \| "408" \| "500" \| "502" \| "503" \| "504" \| "confirmation" \| "inactivity" \| "insufficient-credits" \| "link-error" \| "logout" \| "warning" \| "maintenance" \| "no-item-found" \| "payment-unsuccessful" \| "transfer-unsuccessful" \| "unsupported-browser" \| "partially-supported-browser"` | —                     | The type of error                                  |
-| `img`                | `HTMLImageElement`                                                                                                                                                                                                                                                                                                             | —                     | Error image properties                             |
-| `title`              | `string`                                                                                                                                                                                                                                                                                                                       | —                     | Title of the ErrorDisplay                          |
-| `description`        | `string \| JSX.Element`                                                                                                                                                                                                                                                                                                        | —                     | Description of the ErrorDisplay                    |
-| `actionButton`       | `HTMLButtonElement`                                                                                                                                                                                                                                                                                                            | `children: "Proceed"` | Action button at the bottom                        |
-| `illustrationScheme` | `"base" \| "bookingsg" \| "rbs"`                                                                                                                                                                                                                                                                                               | —                     | Use a resource scheme instead of the default theme |
-| `additionalProps`    | `MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes`                                                                                                                                                                                                                                                            | —                     | Additional properties for certain error types      |
-| `imageOnly`          | `boolean`                                                                                                                                                                                                                                                                                                                      | —                     | Renders only the image                             |
-
-`*` = required
-
-## MaintenanceAdditionalAttributes
-
-| Prop            | Type     | Default | Description                            |
-| --------------- | -------- | ------- | -------------------------------------- |
-| `dateString` \* | `string` | —       | Date display for the maintenance error |
-
-## InactivityAdditionalAttributes
-
-| Prop             | Type     | Default | Description                                          |
-| ---------------- | -------- | ------- | ---------------------------------------------------- |
-| `secondsLeft` \* | `number` | —       | Time remaining in seconds for the inactivity display |
-
-## Rules
-
--   Always use `ErrorDisplay` for error/empty states — never build custom error pages with raw components.
--   `type` is required — it determines the default illustration, title, and description.
--   Override `title` and `description` only when the defaults don't fit your context.
--   `actionButton` accepts standard `ButtonProps` — label and `onClick` are the common fields.
--   `"maintenance"` requires `additionalProps.dateString` to render the scheduled date in the description.
--   `"inactivity"` requires `additionalProps.secondsLeft` for the countdown display.
--   For listing pages use `type="no-item-found"` — it has the correct "empty results" illustration.
-
-## Anti-patterns
-
--   Do not use `imageOnly` unless rendering inside a constrained space where text would overflow.
--   Do not hardcode error page titles/descriptions that duplicate what `ErrorDisplay` already provides by default.
--   Do not use `type="warning"` as a generic placeholder — it implies a system-level warning, not a validation message (use `Alert` for that).
diff --git a/docs/skills/fds-build/resources/v3/components/feedback-rating.md b/docs/skills/fds-build/resources/v3/components/feedback-rating.md
deleted file mode 100644
index 92bb2f0851..0000000000
--- a/docs/skills/fds-build/resources/v3/components/feedback-rating.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# FeedbackRating
-
-Import: `import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating"`
-
-## When to use
-
-Use at the end of a flow or session to collect a star rating and an optional submission action from the user.
-
-## Usage
-
-### Complete controlled pattern
-
-```tsx
-import { useState } from "react";
-import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating";
-
-const RatingWidget = () => {
-    // Track rating separately — onSubmit does NOT receive it
-    const [rating, setRating] = useState(0);
-
-    const handleSubmit = () => {
-        // Read from state, not from onSubmit arguments (there are none)
-        submitFeedback({ stars: rating });
-    };
-
-    return (
-        <FeedbackRating
-            rating={rating}
-            onRatingChange={(value) => setRating(value)}
-            onSubmit={handleSubmit}
-            description="How was your experience?"
-            buttonLabel="Send feedback"
-        />
-    );
-};
-```
-
-**Key gotcha:** `onSubmit` has the signature `() => void` — it carries no payload. The rating value is only available through the `rating` state you control via `onRatingChange`.
-
-## Props
-
-| Prop                | Type                      | Default                  | Description                                        |
-| ------------------- | ------------------------- | ------------------------ | -------------------------------------------------- |
-| `rating` \*         | `number`                  | —                        | Current selected rating state                      |
-| `onRatingChange` \* | `(value: number) => void` | —                        | Called when a star is clicked                      |
-| `onSubmit` \*       | `() => void`              | —                        | Called when the submit button is clicked           |
-| `imgSrc`            | `string`                  | Default banner image     | Banner image src; pass empty string to hide banner |
-| `description`       | `string`                  | `"Rate your experience"` | Description text displayed above the stars         |
-| `buttonLabel`       | `string`                  | `"Submit"`               | Submit button label                                |
-| `id`                | `string`                  | —                        | Unique id of the component                         |
-| `className`         | `string`                  | —                        | Class selector of the component                    |
-| `data-testid`       | `string`                  | —                        | Test identifier of the component                   |
-
-`*` = required
-
-## Rules
-
--   All three props — `rating`, `onRatingChange`, `onSubmit` — are required.
--   `onSubmit` does **not** receive the rating value. Track the rating separately via `onRatingChange` state and read it inside `onSubmit`.
--   `rating` must be controlled state; the component does not manage selection internally.
-
-## Anti-patterns
-
--   Do not try to read the rating from inside `onSubmit`'s arguments — it receives none. Always use the state value set by `onRatingChange`.
diff --git a/docs/skills/fds-build/resources/v3/components/file-download.md b/docs/skills/fds-build/resources/v3/components/file-download.md
deleted file mode 100644
index 504a7851cc..0000000000
--- a/docs/skills/fds-build/resources/v3/components/file-download.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# FileDownload
-
-Import: `import { FileDownload } from "@lifesg/react-design-system/file-download"`
-
-## Sub-components
-
--   `FileItemProps` — shape of each item in `fileItems`
-
-## Props
-
-| Prop            | Type                                                     | Default      | Description                               |
-| --------------- | -------------------------------------------------------- | ------------ | ----------------------------------------- |
-| `fileItems` \*  | `FileItemProps[]`                                        | —            | The files to be rendered                  |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —            | Called when a file item is clicked        |
-| `title`         | `string \| JSX.Element`                                  | —            | A title to be displayed for the component |
-| `description`   | `string \| JSX.Element`                                  | —            | The description to be displayed           |
-| `styleType`     | `"bordered" \| "no-border"`                              | `"bordered"` | The style type for the component          |
-| `id`            | `string`                                                 | —            | The unique id of the component            |
-| `className`     | `string`                                                 | —            | The class selector of the component       |
-| `data-testid`   | `string`                                                 | —            | The test identifier for the component     |
-
-`*` = required
-
-## FileItemProps
-
-| Prop                    | Type                        | Default | Description                                   |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------- |
-| `id` \*                 | `string`                    | —       | The unique identifier of the file             |
-| `name` \*               | `string`                    | —       | The name of the file                          |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file                     |
-| `filePath` \*           | `string`                    | —       | The remote path of the file                   |
-| `size`                  | `number`                    | —       | The size of the file in bytes                 |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Custom error message when file download fails |
-| `thumbnailImageDataUrl` | `string`                    | —       | The thumbnail of the file                     |
-| `truncateText`          | `boolean`                   | `true`  | Indicates if text should be truncated         |
-| `ready`                 | `boolean`                   | `true`  | Indicates if the file is ready for download   |
-
-## Rules
-
--   `fileItems` and `onDownload` are required.
--   On `FileItemProps`: `id`, `name`, `mimeType`, and `filePath` are required.
diff --git a/docs/skills/fds-build/resources/v3/components/file-upload.md b/docs/skills/fds-build/resources/v3/components/file-upload.md
deleted file mode 100644
index 8c1f2d6e3c..0000000000
--- a/docs/skills/fds-build/resources/v3/components/file-upload.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# FileUpload
-
-Import: `import { FileUpload } from "@lifesg/react-design-system/file-upload"`
-
-## When to use
-
--   Forms that require users to attach one or more files (e.g. supporting documents, ID scans, images).
--   Use `sortable` when file order matters for downstream processing.
--   Use `editableFileItems` when image files need alt-text or descriptions.
--   Use `readOnly` on review or summary screens to display uploaded files without allowing changes.
-
-## Usage
-
-```tsx
-import { FileUpload } from "@lifesg/react-design-system/file-upload";
-
-<FileUpload
-    title="Upload supporting documents"
-    description="PDF, JPG, or PNG. Max 5 MB each."
-    accept=".pdf,.jpg,.png"
-    fileItems={fileItems}
-    onChange={(files) => {}}
-    onDelete={(item) => {}}
-/>;
-```
-
-## Props
-
-| Prop                       | Type                                   | Default      | Description                                                             |
-| -------------------------- | -------------------------------------- | ------------ | ----------------------------------------------------------------------- |
-| `fileItems`                | `FileItemProps[]`                      | —            | Files currently displayed in the list                                   |
-| `title`                    | `string \| JSX.Element`                | —            | Title displayed above the upload area                                   |
-| `description`              | `string \| JSX.Element`                | —            | Supporting text inside the upload area                                  |
-| `styleType`                | `"bordered" \| "no-border"`            | `"bordered"` | Visual style of the component                                           |
-| `maxFiles`                 | `number`                               | —            | Maximum number of files allowed                                         |
-| `warning`                  | `string \| JSX.Element`                | —            | Warning message shown below the upload area                             |
-| `errorMessage`             | `string \| JSX.Element`                | —            | General error message for the component                                 |
-| `editableFileItems`        | `boolean`                              | —            | Allows users to edit descriptions on image file items                   |
-| `fileDescriptionMaxLength` | `number`                               | —            | Maximum length of the image file description                            |
-| `descriptionRequired`      | `boolean`                              | `true`       | When `false`, the save button is enabled even with an empty description |
-| `descriptionLabel`         | `FormLabelProps`                       | —            | Overrides the default label and subtext for the description field       |
-| `sortable`                 | `boolean`                              | —            | Allows users to reorder file items via drag                             |
-| `readOnly`                 | `boolean`                              | —            | Shows uploaded files without the upload area                            |
-| `disabled`                 | `boolean`                              | —            | Disables the component                                                  |
-| `id`                       | `string`                               | —            | Unique identifier of the component                                      |
-| `name`                     | `string`                               | —            | Name attribute of the component                                         |
-| `className`                | `string`                               | —            | Class selector of the component                                         |
-| `onChange`                 | `(files: File[]) => void`              | —            | Called when files are added via drag-drop or click                      |
-| `onEdit`                   | `(fileItem: FileItemProps) => void`    | —            | Called when a file item description is updated                          |
-| `onDelete`                 | `(fileItem: FileItemProps) => void`    | —            | Called when a file item's delete button is clicked                      |
-| `onSort`                   | `(fileItems: FileItemProps[]) => void` | —            | Called when files are reordered via drag                                |
-
-Also inherits additional props from the HTML `<input type="file">` element (e.g. `accept`).
-
-## Custom labels
-
-| Prop                             | Type     | Default          | Description                                       |
-| -------------------------------- | -------- | ---------------- | ------------------------------------------------- |
-| `customLabels.uploadButtonLabel` | `string` | `"Upload files"` | Label of the button that triggers the file dialog |
-
-## FileItemProps
-
-| Prop                    | Type                        | Required | Description                              |
-| ----------------------- | --------------------------- | -------- | ---------------------------------------- |
-| `id`                    | `string`                    | Yes      | Unique identifier for the file           |
-| `name`                  | `string`                    | Yes      | File name displayed in the list          |
-| `type`                  | `string`                    | Yes      | MIME type of the file                    |
-| `size`                  | `number`                    | Yes      | File size in bytes                       |
-| `description`           | `string`                    | —        | Alt text or description for the file     |
-| `progress`              | `number`                    | —        | Upload progress from 0 to 1              |
-| `errorMessage`          | `string \| React.ReactNode` | —        | Per-file error message                   |
-| `thumbnailImageDataUrl` | `string`                    | —        | Thumbnail data URL rendered for the file |
-| `truncateText`          | `boolean`                   | `true`   | Truncates long file names                |
-
-## Rules
-
--   Always manage `fileItems` state in the parent — the component does not store files internally.
--   Always handle `onChange` to convert incoming `File[]` into `FileItemProps[]` and add them to state.
--   Always handle `onDelete` to remove the corresponding item from state.
--   Use `maxFiles` to enforce the maximum number of attachments allowed by the backend.
--   Use `progress` on individual `FileItemProps` to show per-file upload progress.
--   Use `errorMessage` on individual `FileItemProps` to surface per-file upload errors.
--   Use the component-level `errorMessage` for overall validation errors (e.g. "At least one file is required").
--   Use `accept` (inherited from `<input type="file">`) to restrict file types to what the backend accepts.
-
-## Anti-patterns
-
--   Do not use without wiring `onChange` and `onDelete` — the list will not update.
--   Do not store files in component state inside the same component that renders `FileUpload` — hoist state to the form level.
--   Do not skip `id`, `name`, `type`, and `size` in `FileItemProps` — they are required fields.
--   Do not use `editableFileItems` for non-image files — description editing only applies to images.
diff --git a/docs/skills/fds-build/resources/v3/components/filter.md b/docs/skills/fds-build/resources/v3/components/filter.md
deleted file mode 100644
index 46a4cfa867..0000000000
--- a/docs/skills/fds-build/resources/v3/components/filter.md
+++ /dev/null
@@ -1,210 +0,0 @@
-# Filter
-
-Import: `import { Filter } from "@lifesg/react-design-system/filter"`
-
-## When to use
-
-Use on listing pages to narrow a result set. `Filter` automatically switches between a desktop sidebar and a mobile modal at the `lg-max` breakpoint.
-
-## Composition
-
-```
-Filter                                  ← recommended: auto-switches sidebar ↔ modal at lg breakpoint
-├── Filter.Item title="Sort by"         ← section header + collapsible wrapper
-│   └── {RadioButton group}             ← sort options use RadioButton, not Filter.Checkbox
-├── Filter.Item title="Category"
-│   └── Filter.Checkbox                 ← multi-select filter options
-└── Filter.Item title="..."
-    └── Filter.Checkbox
-```
-
-Manual variants (bypass auto-responsive):
-
-```
-Filter.Sidebar                          ← desktop sidebar only
-Filter.Modal                            ← mobile modal only
-Filter.Page                             ← full-page filter (mobile-only flows)
-```
-
-`Filter.Item` is the only valid direct child of `Filter`, `Filter.Sidebar`, or `Filter.Modal`. Use `RadioButton` for sort (single-select); use `Filter.Checkbox` for multi-select filters.
-
-## Variants
-
-| Variant                  | When to use                                                     |
-| ------------------------ | --------------------------------------------------------------- |
-| `<Filter>` (recommended) | Auto-responsive — desktop sidebar + mobile modal                |
-| `<Filter.Sidebar>`       | Desktop sidebar only — when bypassing auto-responsive behaviour |
-| `<Filter.Modal>`         | Mobile modal only — when bypassing auto-responsive behaviour    |
-
-## Usage
-
-### Auto-responsive Filter (recommended)
-
-`Filter` renders a sidebar on desktop and a modal on mobile automatically. Pass children as a function to receive `mode` (`"desktop" | "mobile"`) when you need to render differently per viewport.
-
-```tsx
-import { useState } from "react";
-import { Filter } from "@lifesg/react-design-system/filter";
-import { RadioButton } from "@lifesg/react-design-system/radio-button";
-
-const ListingFilter = () => {
-    const [category, setCategory] = useState("all");
-    const [activeCount, setActiveCount] = useState(0);
-
-    const handleClear = () => {
-        setCategory("all");
-        setActiveCount(0);
-    };
-
-    return (
-        <Filter
-            count={activeCount}
-            onClear={handleClear}
-            onDone={() => {
-                /* commit draft state */
-            }}
-            onDismiss={() => {
-                /* discard draft state */
-            }}
-        >
-            {(mode) => (
-                <>
-                    <Filter.Item title="Category">
-                        <RadioButton
-                            name="category"
-                            value="all"
-                            checked={category === "all"}
-                            onChange={() => setCategory("all")}
-                        >
-                            All
-                        </RadioButton>
-                        <RadioButton
-                            name="category"
-                            value="news"
-                            checked={category === "news"}
-                            onChange={() => setCategory("news")}
-                        >
-                            News
-                        </RadioButton>
-                    </Filter.Item>
-                    <Filter.Item title="Sort by" collapsible={false}>
-                        <RadioButton name="sort" value="newest" defaultChecked>
-                            Newest first
-                        </RadioButton>
-                        <RadioButton name="sort" value="oldest">
-                            Oldest first
-                        </RadioButton>
-                    </Filter.Item>
-                </>
-            )}
-        </Filter>
-    );
-};
-```
-
-Key points:
-
--   `onDone` and `onDismiss` are mobile-only callbacks; they are ignored on desktop.
--   `collapsible={false}` on sort sections keeps them always expanded.
--   `count` drives the active-filter badge in the header.
-
-## Props
-
-### Filter
-
-Auto-responsive: renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile at the `lg-max` breakpoint.
-
-| Prop                      | Type                                                               | Default   | Description                                                      |
-| ------------------------- | ------------------------------------------------------------------ | --------- | ---------------------------------------------------------------- |
-| `children`                | `React.ReactNode \| (mode: Mode) => React.ReactNode`               | —         | `Filter.Item` children — **required**                            |
-| `onClear`                 | `() => void`                                                       | —         | Called when the Clear button is pressed                          |
-| `clearButtonDisabled`     | `boolean`                                                          | `false`   | Disable the Clear button                                         |
-| `count`                   | `number`                                                           | —         | Selected filter count shown in the header when greater than zero |
-| `customLabels`            | `FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps`     | —         | Override built-in label strings                                  |
-| `onDismiss`               | `() => void`                                                       | —         | Mobile only — called when the modal is dismissed                 |
-| `onDone`                  | `() => void`                                                       | —         | Mobile only — called when Done is tapped                         |
-| `onModalOpen`             | `() => void`                                                       | —         | Mobile only — called when the modal opens                        |
-| `toggleFilterButtonStyle` | `"default" \| "secondary" \| "light" \| "link"`                    | `"light"` | Mobile only — style of the "Filters" toggle button               |
-| `insets`                  | `{ top?: number, bottom?: number, left?: number, right?: number }` | —         | Mobile only — safe-area insets for notched devices               |
-| `id`                      | `string`                                                           | —         | Unique identifier                                                |
-| `className`               | `string`                                                           | —         | Class selector                                                   |
-| `data-testid`             | `string`                                                           | —         | Test identifier                                                  |
-
-### Custom labels (Filter / Filter.Modal)
-
-| Key                       | Default                   |
-| ------------------------- | ------------------------- |
-| `headerTitle`             | `"Filters"`               |
-| `clearButtonLabel`        | `"Clear"`                 |
-| `toggleFilterButtonLabel` | `"Filters"` (mobile only) |
-| `doneButtonLabel`         | `"Done"` (mobile only)    |
-
-### Filter.Sidebar
-
-| Prop                  | Type                                                  | Default | Description                             |
-| --------------------- | ----------------------------------------------------- | ------- | --------------------------------------- |
-| `children`            | `React.ReactNode`                                     | —       | `Filter.Item` components — **required** |
-| `onClear`             | `() => void`                                          | —       | Called when the Clear button is pressed |
-| `clearButtonDisabled` | `boolean`                                             | `false` | Disable the Clear button                |
-| `count`               | `number`                                              | —       | Selected filter count                   |
-| `customLabels`        | `{ headerTitle?: string, clearButtonLabel?: string }` | —       | Override label strings                  |
-| `id`                  | `string`                                              | —       | Unique identifier                       |
-| `className`           | `string`                                              | —       | Class selector                          |
-| `data-testid`         | `string`                                              | —       | Test identifier                         |
-
-### Filter.Modal
-
-Inherits Filter.Sidebar props, plus:
-
-| Prop                      | Type                                                               | Default   | Description                                       |
-| ------------------------- | ------------------------------------------------------------------ | --------- | ------------------------------------------------- |
-| `onDismiss`               | `() => void`                                                       | —         | Called when the modal is dismissed                |
-| `onDone`                  | `() => void`                                                       | —         | Called when Done is tapped                        |
-| `onModalOpen`             | `() => void`                                                       | —         | Called when the modal opens                       |
-| `toggleFilterButtonStyle` | `"default" \| "secondary" \| "light" \| "link"`                    | `"light"` | Style of the "Filters" toggle button              |
-| `insets`                  | `{ top?: number, bottom?: number, left?: number, right?: number }` | —         | Safe-area insets for notched devices              |
-| `customLabels`            | `FilterModalCustomLabelProps`                                      | —         | Override label strings including mobile-only keys |
-
-### Filter.Item
-
-| Prop                | Type                                                 | Default | Description                                     |
-| ------------------- | ---------------------------------------------------- | ------- | ----------------------------------------------- |
-| `children`          | `React.ReactNode \| (mode: Mode) => React.ReactNode` | —       | Filter controls — **required**                  |
-| `title`             | `string`                                             | —       | Section heading                                 |
-| `collapsible`       | `boolean`                                            | `true`  | Allow collapsing the section (desktop only)     |
-| `initialExpanded`   | `boolean`                                            | `false` | Initial expand state (uncontrolled)             |
-| `expanded`          | `boolean`                                            | —       | Controlled expand state                         |
-| `onExpandChange`    | `(expanded: boolean) => void`                        | —       | Called when expand state changes (desktop only) |
-| `showDivider`       | `boolean`                                            | `true`  | Show header divider in desktop mode             |
-| `showMobileDivider` | `boolean`                                            | `true`  | Show divider in mobile mode                     |
-| `id`                | `string`                                             | —       | Unique identifier                               |
-| `className`         | `string`                                             | —       | Class selector                                  |
-| `data-testid`       | `string`                                             | —       | Test identifier                                 |
-
-### Filter.Page
-
-| Prop        | Type              | Description                          |
-| ----------- | ----------------- | ------------------------------------ |
-| `children`  | `React.ReactNode` | Page content — **required**          |
-| `onDismiss` | `() => void`      | Called when the back arrow is tapped |
-| `onDone`    | `() => void`      | Called when Done is tapped           |
-
-`Mode` is `"desktop" | "mobile"`.
-
-## Rules
-
--   `Filter` is the recommended entry point — it automatically renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile.
--   Always provide `onClear` to reset all filter state in a single handler.
--   Set `collapsible={false}` on sort sections — sort options should always be visible.
--   Pass children as a function `(mode) => ReactNode` to render different content on desktop vs mobile.
--   `Filter.Modal` has a built-in Done button — do not add an external Apply button; use `onDone` to react to it.
--   Add a keyword search input (`Form.Input`) above the `Filter` component — search is not built into `Filter`.
--   Use `count` to show the number of active filters in the header.
--   Use `Filter.Sidebar` or `Filter.Modal` directly only when overriding the responsive behaviour.
--   `Filter.Page` is used inside `Filter.Modal` only, for drill-down sub-pages.
-
-## Anti-patterns
-
--   Do not pass `viewport`, `showSearch`, or `searchText` — these props do not exist.
--   Do not add an external Apply button when using `Filter.Modal` — the built-in Done button handles it.
--   Do not use `Filter.Sidebar` and `Filter.Modal` separately unless you need to override responsive behaviour — use `Filter` instead.
diff --git a/docs/skills/fds-build/resources/v3/components/footer.md b/docs/skills/fds-build/resources/v3/components/footer.md
deleted file mode 100644
index 3454193946..0000000000
--- a/docs/skills/fds-build/resources/v3/components/footer.md
+++ /dev/null
@@ -1,95 +0,0 @@
-# Footer
-
-Import: `import { Footer } from "@lifesg/react-design-system/footer"`
-
-## When to use
-
-Place at the bottom of every page. Required on all pages.
-
-## Variants
-
-| Variant                 | When to use                                                      |
-| ----------------------- | ---------------------------------------------------------------- |
-| `<Footer />` (no props) | Standard pages — disclaimer links and copyright are theme-driven |
-| `links`                 | Pages with navigational footer links (max 2 columns)             |
-| `copyrightInfo`         | Custom copyright text required                                   |
-| `layout="stretch"`      | Full-width layout — pair with `Navbar layout="stretch"`          |
-
-## Usage
-
-```tsx
-import { Footer } from "@lifesg/react-design-system/footer";
-
-{
-    /* Standard footer — no props required */
-}
-<Footer />;
-
-{
-    /* Footer with navigation links */
-}
-<Footer
-    links={[
-        [
-            { children: "About us", href: "/about" },
-            { children: "Contact", href: "/contact" },
-        ],
-    ]}
-    lastUpdated={new Date("2025-01-01")}
-/>;
-```
-
-## Props
-
-| Prop                | Type                                 | Default       | Description                                                                                   |
-| ------------------- | ------------------------------------ | ------------- | --------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`             | —             | Navigation links in the top section — array of columns                                        |
-| `children`          | `JSX.Element \| JSX.Element[]`       | —             | Custom content for the top section; overrides `links` and addons                              |
-| `showDownloadAddon` | `boolean`                            | —             | Show app store download buttons                                                               |
-| `showResourceAddon` | `boolean`                            | —             | Show theme-specific resource links; `showDownloadAddon` takes precedence when both are `true` |
-| `disclaimerLinks`   | `DisclaimerLinks`                    | —             | Override href/onClick for mandatory disclaimer links                                          |
-| `copyrightInfo`     | `string`                             | —             | Custom copyright text; overrides auto-generated text and makes `lastUpdated` irrelevant       |
-| `logoSrc`           | `string`                             | theme default | Logo image source                                                                             |
-| `logoAlt`           | `string`                             | `""`          | Logo image alt text                                                                           |
-| `lastUpdated`       | `Date`                               | —             | Date shown in "Last updated" text (ignored when `copyrightInfo` is set)                       |
-| `hideLogo`          | `boolean`                            | —             | Hide the logo; links align to the leftmost area                                               |
-| `layout`            | `"default" \| "stretch"`             | `"default"`   | Layout type — must match Navbar `layout`                                                      |
-| `onFooterLinkClick` | `(link: FooterLinkProps<T>) => void` | —             | Called when a footer link is clicked                                                          |
-| `id`                | `string`                             | —             | Unique identifier                                                                             |
-| `className`         | `string`                             | —             | Class selector                                                                                |
-| `data-testid`       | `string`                             | —             | Test identifier                                                                               |
-
-## FooterLinkProps\<T\>
-
-Inherits `TypographyLinkProps`, plus:
-
-| Prop           | Type     | Description                                 |
-| -------------- | -------- | ------------------------------------------- |
-| `data-options` | `T`      | Custom attributes passed to the link object |
-| `data-testid`  | `string` | Test identifier                             |
-
-## DisclaimerLinks
-
-| Prop                  | Type                  | Default    | Description                                                         |
-| --------------------- | --------------------- | ---------- | ------------------------------------------------------------------- |
-| `privacy`             | `TypographyLinkProps` | predefined | Privacy Statement link — text is fixed to "Privacy Statement"       |
-| `termsOfUse`          | `TypographyLinkProps` | predefined | Terms of Use link — text is fixed to "Terms of Use"                 |
-| `reportVulnerability` | `TypographyLinkProps` | predefined | Report Vulnerability link — text is fixed to "Report Vulnerability" |
-
-## Rules
-
--   Use `<Footer />` with no props for standard pages — do not add unnecessary props.
--   `layout` must match the Navbar `layout` prop; do not mix `"default"` and `"stretch"`.
--   Wrap the app in a flex column layout so the footer stays pinned to the bottom on short pages:
-    -   Outer wrapper: `display: flex; flex-direction: column; min-height: 100vh`
-    -   Page content area: `flex: 1`
--   Disclaimer link text cannot be customised — only `href` and event handlers can be overridden via `disclaimerLinks`.
--   `copyrightInfo` overrides `lastUpdated` — do not set both.
--   When `showDownloadAddon` and `showResourceAddon` are both `true`, download takes precedence.
--   `links` is a 2D array: each inner array is one column of links.
-
-## Anti-patterns
-
--   Do not omit the flex layout wrapper — the footer will not stick to the bottom on short pages.
--   Do not pass `children` and `links` together — `children` replaces the top section entirely.
--   Do not customise disclaimer link labels — they are legally fixed strings.
diff --git a/docs/skills/fds-build/resources/v3/components/form-date-input.md b/docs/skills/fds-build/resources/v3/components/form-date-input.md
deleted file mode 100644
index fd29e86f2d..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-date-input.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# Form.DateInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a single date from the user (e.g. date of birth, appointment date, submission deadline).
--   Any form field that requires calendar-based date selection.
-
-## Usage
-
-```tsx
-const StyledDateInput = styled(Form.DateInput)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper — `max-width` constrains the component without conflicting with its internal `width: 100%`.
-
-## Props
-
-| Prop                       | Type                                | Default         | Description                                                                      |
-| -------------------------- | ----------------------------------- | --------------- | -------------------------------------------------------------------------------- |
-| `value`                    | `string`                            | —               | Selected date in `YYYY-MM-DD` format                                             |
-| `disabled`                 | `boolean`                           | —               | Disables the component; entry not allowed                                        |
-| `readOnly`                 | `boolean`                           | —               | Read-only state; selection not allowed                                           |
-| `error`                    | `boolean`                           | —               | Sets error display (not needed if `errorMessage` is set)                         |
-| `id`                       | `string`                            | —               | Unique identifier of the component                                               |
-| `className`                | `string`                            | —               | Class selector of the component                                                  |
-| `data-testid`              | `string`                            | —               | Test identifier of the component                                                 |
-| `minDate`                  | `string`                            | —               | Minimum selectable date in `YYYY-MM-DD` format (inclusive)                       |
-| `maxDate`                  | `string`                            | —               | Maximum selectable date in `YYYY-MM-DD` format (inclusive)                       |
-| `disabledDates`            | `string[]`                          | —               | Specific dates to disable, each in `YYYY-MM-DD` format                           |
-| `allowDisabledSelection`   | `boolean`                           | —               | If true, dates disabled by `minDate`/`maxDate`/`disabledDates` remain selectable |
-| `hideInputKeyboard`        | `boolean`                           | —               | Hides the input keyboard when the field is focused                               |
-| `withButton`               | `boolean`                           | `true`          | Renders Done/Cancel action buttons                                               |
-| `zIndex`                   | `number`                            | `50`            | z-index of the calendar dropdown                                                 |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`            | `document.body` | Root element hosting the calendar dropdown                                       |
-| `onChange`                 | `(date: string) => void`            | —               | Called when a date is selected; returns `YYYY-MM-DD`                             |
-| `onBlur`                   | `() => void`                        | —               | Called on field defocus                                                          |
-| `onFocus`                  | `() => void`                        | —               | Called when field is focused                                                     |
-| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void` | —               | Called when the displayed month/year changes                                     |
-
-## YearMonthDisplay
-
-| Prop    | Type     | Description                       |
-| ------- | -------- | --------------------------------- |
-| `year`  | `number` | Currently displayed year (`YYYY`) |
-| `month` | `number` | Currently displayed month (1–12)  |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## FormLabelProps
-
-| Prop       | Type                    | Default | Description                           |
-| ---------- | ----------------------- | ------- | ------------------------------------- |
-| `addon`    | `FormLabelAddonProps`   | —       | Tooltip or popover addon on the label |
-| `subtitle` | `string \| JSX.Element` | —       | Subtitle text for the label           |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `YYYY-MM-DD` string.
--   Use `minDate`/`maxDate` to constrain selectable dates to valid business ranges.
--   Use `disabledDates` for known blackout dates (e.g. public holidays).
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
--   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
--   Use `readOnly` on review or summary screens where the value should be visible but not editable.
--   Specify `dropdownRootNode` if the component is inside a scrollable container to prevent the calendar from clipping.
--   Date strings use `YYYY-MM-DD` format throughout (value, minDate, maxDate, disabledDates, onChange return).
-
-## Anti-patterns
-
--   Do not use a plain text input for date collection — the picker enforces valid date formats automatically.
--   Do not set `allowDisabledSelection` unless there is a specific UX reason to allow out-of-range dates.
--   Do not rely on `error` prop alone without an `errorMessage`; users need descriptive feedback.
--   Do not use for date-range selection — use `Form.DateRangeInput` instead.
diff --git a/docs/skills/fds-build/resources/v3/components/form-date-range-input.md b/docs/skills/fds-build/resources/v3/components/form-date-range-input.md
deleted file mode 100644
index 86d8541bef..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-date-range-input.md
+++ /dev/null
@@ -1,139 +0,0 @@
-# Form.DateRangeInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a start and end date from the user (e.g. leave period, booking period, date range filter).
--   Use `variant="week"` when the selection must always be a full calendar week.
--   Use `variant="fixed-range"` when the duration is predetermined (e.g. always 7 days).
-
-## Usage
-
-`onChange` always receives both start and end as `YYYY-MM-DD` strings, even for week and fixed-range variants.
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const LeavePeriodField = () => {
-    const [start, setStart] = useState("");
-    const [end, setEnd] = useState("");
-
-    return (
-        <Form.DateRangeInput
-            label="Leave period"
-            value={start}
-            valueEnd={end}
-            minDate="2024-01-01"
-            maxDate="2024-12-31"
-            onChange={(s, e) => {
-                setStart(s);
-                setEnd(e);
-            }}
-        />
-    );
-};
-```
-
-```tsx
-{
-    /* variant="week" — whole-week selection */
-}
-<Form.DateRangeInput
-    label="Select week"
-    variant="week"
-    value={start}
-    valueEnd={end}
-    onChange={(s, e) => {
-        setStart(s);
-        setEnd(e);
-    }}
-/>;
-
-{
-    /* variant="fixed-range" — valueEnd derived automatically; only store start */
-}
-<Form.DateRangeInput
-    label="14-day quarantine period"
-    variant="fixed-range"
-    numberOfDays={14}
-    value={start}
-    valueEnd={end}
-    onChange={(s, e) => {
-        setStart(s);
-        setEnd(e);
-    }}
-/>;
-```
-
-Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper:
-
-```tsx
-const StyledDateRangeInput = styled(Form.DateRangeInput)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-## Props
-
-| Prop                       | Type                                           | Default         | Description                                                                      |
-| -------------------------- | ---------------------------------------------- | --------------- | -------------------------------------------------------------------------------- |
-| `value`                    | `string`                                       | —               | Start date in `YYYY-MM-DD` format                                                |
-| `valueEnd`                 | `string`                                       | —               | End date in `YYYY-MM-DD` format (range/fixed-range only)                         |
-| `variant`                  | `"range" \| "week" \| "fixed-range"`           | `"range"`       | Selection type                                                                   |
-| `numberOfDays`             | `number`                                       | `7`             | Days to select when `variant="fixed-range"`                                      |
-| `disabled`                 | `boolean`                                      | —               | Disables the component; entry not allowed                                        |
-| `readOnly`                 | `boolean`                                      | —               | Read-only state; selection not allowed                                           |
-| `error`                    | `boolean`                                      | —               | Sets error display (not needed if `errorMessage` is set)                         |
-| `id`                       | `string`                                       | —               | Unique identifier of the component                                               |
-| `className`                | `string`                                       | —               | Class selector of the component                                                  |
-| `data-testid`              | `string`                                       | —               | Test identifier of the component                                                 |
-| `minDate`                  | `string`                                       | —               | Minimum selectable date in `YYYY-MM-DD` format (inclusive)                       |
-| `maxDate`                  | `string`                                       | —               | Maximum selectable date in `YYYY-MM-DD` format (inclusive)                       |
-| `disabledDates`            | `string[]`                                     | —               | Specific dates to disable, each in `YYYY-MM-DD` format                           |
-| `allowDisabledSelection`   | `boolean`                                      | —               | If true, dates disabled by `minDate`/`maxDate`/`disabledDates` remain selectable |
-| `hideInputKeyboard`        | `boolean`                                      | —               | Hides the input keyboard when the field is focused                               |
-| `withButton`               | `boolean`                                      | `true`          | Renders Done/Cancel action buttons                                               |
-| `zIndex`                   | `number`                                       | `50`            | z-index of the calendar dropdown                                                 |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                       | `document.body` | Root element hosting the calendar dropdown                                       |
-| `onChange`                 | `(startDate: string, endDate: string) => void` | —               | Called when a selection is made; returns start and end dates in `YYYY-MM-DD`     |
-| `onBlur`                   | `() => void`                                   | —               | Called on field defocus                                                          |
-| `onFocus`                  | `() => void`                                   | —               | Called when field is focused                                                     |
-| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void`            | —               | Called when displayed month/year changes                                         |
-
-## YearMonthDisplay
-
-| Prop    | Type     | Description                       |
-| ------- | -------- | --------------------------------- |
-| `year`  | `number` | Currently displayed year (`YYYY`) |
-| `month` | `number` | Currently displayed month (1–12)  |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` (start) and `valueEnd` (end) for controlled usage; `onChange` receives both as `YYYY-MM-DD` strings.
--   Use `minDate`/`maxDate` to restrict selection to valid business date ranges.
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
--   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
--   Use `readOnly` on review screens where the range should be visible but not editable.
--   Specify `dropdownRootNode` if the component is inside a scrollable container.
--   `valueEnd` is only relevant for `variant="range"` and `variant="fixed-range"`.
--   `numberOfDays` only applies when `variant="fixed-range"`.
-
-## Anti-patterns
-
--   Do not use for single-date selection — use `Form.DateInput` instead.
--   Do not set `numberOfDays` unless `variant="fixed-range"` is also set.
--   Do not rely on `error` alone without an `errorMessage`.
--   Do not allow end date before start date — validate in `onChange` before updating state.
diff --git a/docs/skills/fds-build/resources/v3/components/form-e-signature.md b/docs/skills/fds-build/resources/v3/components/form-e-signature.md
deleted file mode 100644
index 436e42c585..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-e-signature.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Form.ESignature
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Forms that legally require a handwritten signature from the user (e.g. consent forms, declarations, agreements).
--   Use `description` to guide the user on how to sign (e.g. "Sign within the box using your mouse or touchscreen").
-
-## Props
-
-| Prop              | Type                              | Default          | Description                                                                            |
-| ----------------- | --------------------------------- | ---------------- | -------------------------------------------------------------------------------------- |
-| `value`           | `string`                          | —                | Pre-filled signature as a base64-encoded PNG data URL                                  |
-| `description`     | `string`                          | —                | Helper text displayed below the signature canvas                                       |
-| `disabled`        | `boolean`                         | —                | Disables the signature canvas                                                          |
-| `loadingProgress` | `number`                          | —                | Upload progress between 0 and 1; shows a progress indicator                            |
-| `loadingLabel`    | `string`                          | `"Uploading..."` | Text above the progress indicator (requires `loadingProgress`)                         |
-| `id`              | `string`                          | —                | Unique identifier of the component                                                     |
-| `className`       | `string`                          | —                | Class selector of the component                                                        |
-| `data-testid`     | `string`                          | —                | Test identifier of the component                                                       |
-| `onChange`        | `(value: string \| null) => void` | —                | Called when the signature changes; returns base64 PNG data URL, or `null` when cleared |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; the value is a base64-encoded PNG string.
--   Use `loadingProgress` and `loadingLabel` to indicate server upload progress after the signature is submitted.
--   Set `errorMessage` when signature validation fails (e.g. canvas is empty on submit).
--   Use `disabled` when the signature field should be locked (e.g. after submission or in a locked step).
--   `value` and the `onChange` return value are both base64-encoded PNG strings.
--   `loadingProgress` and `loadingLabel` are used to show upload progress after the signature is captured.
-
-## Anti-patterns
-
--   Do not use for typed signatures or checkbox confirmations — this component is for handwritten drawing input only.
--   Do not store the raw base64 string in a URL parameter or cookie — it is large; use server-side storage.
--   Do not omit `description` — users need guidance on where and how to draw their signature.
diff --git a/docs/skills/fds-build/resources/v3/components/form-input.md b/docs/skills/fds-build/resources/v3/components/form-input.md
deleted file mode 100644
index 4a1eaedb9e..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-input.md
+++ /dev/null
@@ -1,88 +0,0 @@
-# Form.Input
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use for any single-line text entry inside a form. Always prefer `Form.Input` over the bare `Input` component when a label or error message is required.
-
-## Variants
-
-| `styleType`            | When to use                                                                                 |
-| ---------------------- | ------------------------------------------------------------------------------------------- |
-| `"bordered"` (default) | Standard form fields — provides clear affordance                                            |
-| `"no-border"`          | Inline editing or contexts where a surrounding container already provides visual separation |
-
-## Usage
-
-```tsx
-import { Form } from "@lifesg/react-design-system/form";
-
-<Form.Input
-    label="Full name"
-    placeholder="Enter your name"
-    value={value}
-    onChange={(e) => {}}
-/>;
-```
-
-## Props
-
-### Input specific props
-
-| Prop          | Type                          | Default      | Description                                                         |
-| ------------- | ----------------------------- | ------------ | ------------------------------------------------------------------- |
-| `spacing`     | `number`                      | —            | Number of characters before a space is inserted — `type="tel"` only |
-| `error`       | `boolean`                     | —            | Show error styling — not needed if `errorMessage` is set            |
-| `allowClear`  | `boolean`                     | `false`      | Show clear icon button inside the field                             |
-| `onClear`     | `() => void`                  | —            | Called when clear icon is clicked                                   |
-| `styleType`   | `"no-border"` \| `"bordered"` | `"bordered"` | Border style variant                                                |
-| `data-testid` | `string`                      | —            | Test identifier for the component                                   |
-
-Also inherits all props from `HTMLInputElement`.
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-### FormLabelProps
-
-| Prop       | Type                      | Default | Description                              |
-| ---------- | ------------------------- | ------- | ---------------------------------------- |
-| `addon`    | `FormLabelAddonProps`     | —       | Tooltip or popover attached to the label |
-| `disabled` | `string`                  | —       | Greyed-out label state                   |
-| `subtitle` | `string` \| `JSX.Element` | —       | Secondary text beneath the main label    |
-
-### FormLabelAddonProps
-
-| Prop          | Type                       | Default               | Description                                               |
-| ------------- | -------------------------- | --------------------- | --------------------------------------------------------- |
-| `content`     | `string` \| `JSX.Element`  | —                     | **Required.** Content shown in the tooltip/popover bubble |
-| `type`        | `"tooltip"` \| `"popover"` | `"popover"`           | Addon display type                                        |
-| `icon`        | `JSX.Element`              | `<ICircleFillIcon />` | Icon used for the addon trigger                           |
-| `id`          | `string`                   | —                     | Unique identifier for the addon                           |
-| `zIndex`      | `number`                   | —                     | Custom z-index for the popover                            |
-| `data-testid` | `string`                   | —                     | Test identifier for the addon                             |
-
-## Rules
-
--   Set `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
--   Use `readOnly` on review or summary screens — not `disabled`. Disabled implies interaction is unavailable; read-only implies the field is intentionally non-editable in context.
--   Use `allowClear` for optional fields and search-like inputs; pair with `onClear` to reset controlled value.
--   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
--   Provide `errorMessage` rather than `error` alone — the string drives both the visual state and the accessible error text.
--   Use `label` as a plain string for simple labels; use `FormLabelProps` (with `subtitle` or `addon`) only when additional context is needed.
--   `error` is redundant when `errorMessage` is provided — `errorMessage` implies the error state automatically.
--   `spacing` only has effect when `type="tel"`.
--   `styleType="no-border"` removes the visible border — use only in contexts with a background that provides visual separation.
-
-## Anti-patterns
-
--   Do not use `disabled` on review screens — use `readOnly`.
--   Do not set both `error` and `errorMessage` — `errorMessage` is sufficient.
--   Do not use `spacing` with input types other than `"tel"`.
--   Do not use `styleType="no-border"` in a form context without a containing element that visually distinguishes the field.
diff --git a/docs/skills/fds-build/resources/v3/components/form-masked-input.md b/docs/skills/fds-build/resources/v3/components/form-masked-input.md
deleted file mode 100644
index 4f863977e3..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-masked-input.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# Form.MaskedInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Displaying sensitive data that should be partially hidden by default with a user-controlled reveal toggle (e.g. NRIC, FIN, passport number, bank account number).
--   Read-only fields that are loaded asynchronously and should show a loading / error state.
-
-## Props
-
-Inherits all props from `Form.Input`. Additional props:
-
-| Prop                | Type                               | Default            | Description                                                                                    |
-| ------------------- | ---------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------- |
-| `maskRange`         | `number[]`                         | —                  | `[startIndex, endIndex]` — character index range to mask                                       |
-| `unmaskRange`       | `number[]`                         | —                  | `[startIndex, endIndex]` — character index range to NOT mask                                   |
-| `maskRegex`         | `RegExp`                           | —                  | Regex matched characters are replaced with `maskChar`                                          |
-| `maskTransformer`   | `(value: string) => string`        | —                  | Custom function to transform the masked value                                                  |
-| `maskChar`          | `string`                           | `"•"`              | Character used for masking                                                                     |
-| `iconMask`          | `string`                           | `<EyeSlashIcon />` | Icon shown when the field is masked                                                            |
-| `iconUnmask`        | `string`                           | `<EyeIcon />`      | Icon shown when the field is unmasked                                                          |
-| `iconActiveColor`   | `string`                           | `Color.Primary`    | Color of the mask icon in active state                                                         |
-| `iconInactiveColor` | `string`                           | `Color.Neutral[3]` | Color of the mask icon in inactive state                                                       |
-| `transformInput`    | `"uppercase" \| "lowercase"`       | —                  | Auto-transforms input casing                                                                   |
-| `loadState`         | `"loading" \| "fail" \| "success"` | —                  | Async load state — only applies in `readOnly` mode                                             |
-| `onMask`            | `() => void`                       | —                  | Called when the field becomes masked                                                           |
-| `onUnmask`          | `() => void`                       | —                  | Called when the field becomes unmasked                                                         |
-| `onTryAgain`        | `() => void`                       | —                  | Called when the "Try again" button is clicked in `loadState="fail"` mode (requires `readOnly`) |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Choose one masking strategy per instance: `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer`.
--   Use `maskRange` for fixed-position sensitive segments (e.g. `[1, 4]` for NRIC middle characters).
--   Use `maskRegex` when the characters to mask follow a pattern rather than a fixed range.
--   Use `transformInput="uppercase"` for identifiers that are conventionally uppercase (e.g. NRIC, passport).
--   Use `loadState` only when `readOnly` is also `true` — for fields that are fetched asynchronously.
--   Provide `onTryAgain` when `loadState="fail"` so users can retry the fetch.
--   `loadState` only takes effect when `readOnly` is also `true`.
--   Provide only one of `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer` per instance.
-
-## Anti-patterns
-
--   Do not use for non-sensitive fields — masking adds friction and should be reserved for data that genuinely requires it.
--   Do not set `loadState` without `readOnly` — it has no effect in editable mode.
--   Do not combine multiple masking strategies (`maskRange` + `maskRegex`) on the same instance.
diff --git a/docs/skills/fds-build/resources/v3/components/form-multi-select.md b/docs/skills/fds-build/resources/v3/components/form-multi-select.md
deleted file mode 100644
index d8cfb1d42f..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-multi-select.md
+++ /dev/null
@@ -1,112 +0,0 @@
-# Form.MultiSelect
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when users can select more than one option from a predefined list. For single selections use `Form.Select`. For hierarchical options use `Form.NestedMultiSelect`.
-
-## Variants
-
-| `variant`   | When to use                                              |
-| ----------- | -------------------------------------------------------- |
-| `"default"` | Standard form context                                    |
-| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
-
-## Usage
-
-```tsx
-import { Form } from "@lifesg/react-design-system/form";
-
-const options = [
-    { value: "doc", label: "Document" },
-    { value: "img", label: "Image" },
-    { value: "pdf", label: "PDF" },
-];
-
-<Form.MultiSelect
-    label="File types"
-    options={options}
-    selectedOptions={selected}
-    valueExtractor={(opt) => opt.value}
-    listExtractor={(opt) => opt.label}
-    displayValueExtractor={(opt) => opt.label}
-    onSelectOptions={(opts) => {}}
-/>;
-```
-
-## Props
-
-### MultiSelect specific props
-
-| Prop                    | Type                                     | Default         | Description                                                              |
-| ----------------------- | ---------------------------------------- | --------------- | ------------------------------------------------------------------------ |
-| `options`               | `T[]`                                    | —               | **Required.** List of option objects                                     |
-| `selectedOptions`       | `T[]`                                    | —               | Controlled array of selected options                                     |
-| `valueExtractor`        | `(option: T) => V`                       | —               | Derives the value from an option                                         |
-| `listExtractor`         | `(option: T) => string`                  | —               | Derives the display text for dropdown list items                         |
-| `displayValueExtractor` | `(option: T) => string`                  | —               | Derives the display text shown in the selector when options are selected |
-| `name`                  | `string`                                 | —               | Name attribute of the component                                          |
-| `placeholder`           | `string`                                 | `"Select"`      | Placeholder text                                                         |
-| `disabled`              | `boolean`                                | —               | Disables selection                                                       |
-| `error`                 | `boolean`                                | —               | Show error styling — not needed if `errorMessage` is set                 |
-| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"` | `"success"`     | Visual state for async option loading                                    |
-| `optionTruncationType`  | `"end"` \| `"middle"`                    | `"end"`         | Truncation style for long option text                                    |
-| `enableSearch`          | `boolean`                                | `false`         | Enable text-based search in the dropdown                                 |
-| `searchFunction`        | `(searchValue: string) => T[]`           | —               | Custom search function                                                   |
-| `maxSelectable`         | `number`                                 | —               | Maximum number of options that can be selected                           |
-| `onSelectOptions`       | `(options: T[]) => void`                 | —               | Called when selection changes, or Select all / Unselect all is clicked   |
-| `onShowOptions`         | `() => void`                             | —               | Called when the dropdown opens                                           |
-| `onHideOptions`         | `() => void`                             | —               | Called when the dropdown closes                                          |
-| `onRetry`               | `() => void`                             | —               | Called when retry is clicked after a failed load                         |
-| `onSearch`              | `() => void`                             | —               | Called when a search is executed                                         |
-| `hideNoResultsDisplay`  | `boolean`                                | —               | Suppress the default no-results UI                                       |
-| `customLabels`          | `DropdownCustomLabelProps`               | —               | Override default dropdown label strings                                  |
-| `variant`               | `"default"` \| `"small"`                 | `"default"`     | Size variant                                                             |
-| `alignment`             | `"left"` \| `"right"`                    | `"left"`        | Dropdown alignment relative to the trigger                               |
-| `dropdownZIndex`        | `number`                                 | `50`            | Custom z-index for the dropdown                                          |
-| `dropdownWidth`         | `string`                                 | —               | Fixed width for the dropdown                                             |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                 | `document.body` | Root element that hosts the dropdown                                     |
-| `data-testid`           | `string`                                 | —               | Test identifier for the component                                        |
-
-### DropdownCustomLabelProps
-
-| Prop                   | Type                    | Description                                                        |
-| ---------------------- | ----------------------- | ------------------------------------------------------------------ |
-| `searchPlaceholder`    | `string`                | Placeholder for the search field                                   |
-| `noResultsLabel`       | `string`                | Replaces the default no-results label                              |
-| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label                      |
-| `selectAllButtonLabel` | `string`                | Label for the Select all button                                    |
-| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                                     |
-| `allSelectedLabel`     | `string`                | Label shown when all options are selected                          |
-| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected (e.g. "X selected") |
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
-
-## Rules
-
--   Always provide `options` — the component has no meaning without it.
--   Provide `valueExtractor` and `listExtractor` for typed option arrays — treat as required.
--   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing raw values instead of labels in the closed selector.
--   Use `maxSelectable` when there is a business rule limiting how many options can be chosen; the component enforces it automatically.
--   Use `enableSearch` when the list exceeds ~10 items.
--   Provide `customLabels` to localise or contextualise "Select all", "Clear all", and count labels.
--   Use `optionsLoadState` to communicate async loading states.
--   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
--   `onSelectOptions` receives the complete updated selection array — not a delta.
--   Unlike `Form.Select`, there is no `readOnly` prop — use `disabled` for non-editable states.
-
-## Anti-patterns
-
--   Do not use `Form.MultiSelect` when only one option can be selected — use `Form.Select`.
--   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
--   Do not set both `error` and `errorMessage`.
--   Do not manage selection capping manually in `onSelectOptions` — use `maxSelectable` instead.
diff --git a/docs/skills/fds-build/resources/v3/components/form-nested-multi-select.md b/docs/skills/fds-build/resources/v3/components/form-nested-multi-select.md
deleted file mode 100644
index 7c83b83154..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-nested-multi-select.md
+++ /dev/null
@@ -1,173 +0,0 @@
-# Form.NestedMultiSelect
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when users can select multiple options from a hierarchically organised list of up to 3 levels. For hierarchical single-select use `Form.NestedSelect`. For flat multi-select use `Form.MultiSelect`.
-
-## Variants
-
-| `variant`   | When to use           |
-| ----------- | --------------------- |
-| `"default"` | Standard form context |
-| `"small"`   | Compact layouts       |
-
-| `mode`       | When to use                                                                              |
-| ------------ | ---------------------------------------------------------------------------------------- |
-| `"default"`  | System decides initial expand state                                                      |
-| `"expand"`   | Expand all categories on open — for short, browsable lists                               |
-| `"collapse"` | Collapse all categories on open — for long lists where search is the primary interaction |
-
-## Usage
-
-### Multi-select with parallel keyPaths / values arrays
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
-
-interface SkillValue {
-    id: string;
-    name: string;
-}
-
-const options: L1OptionProps<SkillValue, SkillValue, SkillValue>[] = [
-    {
-        key: "design",
-        label: "Design",
-        subItems: [
-            {
-                key: "design-ux",
-                label: "UX Design",
-                value: { id: "ux", name: "UX Design" },
-            },
-            {
-                key: "design-ui",
-                label: "UI Design",
-                value: { id: "ui", name: "UI Design" },
-            },
-        ],
-    },
-    {
-        key: "engineering",
-        label: "Engineering",
-        subItems: [
-            {
-                key: "eng-fe",
-                label: "Frontend",
-                value: { id: "fe", name: "Frontend" },
-            },
-            {
-                key: "eng-be",
-                label: "Backend",
-                value: { id: "be", name: "Backend" },
-            },
-        ],
-    },
-];
-
-const NestedMultiSelectExample = () => {
-    // keyPaths[i] and values[i] always refer to the same selection — keep them in sync
-    const [keyPaths, setKeyPaths] = useState<string[][]>([
-        ["design", "design-ux"], // pre-selected: UX Design
-    ]);
-    const [values, setValues] = useState<SkillValue[]>([
-        { id: "ux", name: "UX Design" },
-    ]);
-
-    return (
-        <Form.NestedMultiSelect<SkillValue, SkillValue, SkillValue>
-            label="Skills"
-            options={options}
-            selectedKeyPaths={keyPaths}
-            // onSelectOptions provides the NEXT full selection state — replace, don't merge
-            onSelectOptions={(nextKeyPaths, nextValues) => {
-                setKeyPaths(nextKeyPaths);
-                setValues(nextValues as SkillValue[]);
-            }}
-            valueToStringFunction={(val) => val.name}
-            enableSearch
-        />
-    );
-};
-```
-
-**The parallel-array contract:** index `i` in `keyPaths` and index `i` in `values` always describe the same selected item. `onSelectOptions` delivers the complete next state — replace both arrays together, never splice one independently. Initialise both arrays with matching entries when pre-populating selections.
-
-## Props
-
-### NestedMultiSelect specific props
-
-| Prop                    | Type                                                            | Default         | Description                                                                                                            |
-| ----------------------- | --------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| `options`               | `L1OptionProps<V1, V2, V3>[]`                                   | —               | **Required.** Nested option array (up to 3 levels)                                                                     |
-| `selectedKeyPaths`      | `string[][]`                                                    | —               | Array of key paths for all selected options                                                                            |
-| `placeholder`           | `string`                                                        | `"Select"`      | Placeholder text                                                                                                       |
-| `disabled`              | `boolean`                                                       | —               | Disables selection                                                                                                     |
-| `readOnly`              | `boolean`                                                       | —               | Read-only state — selection not allowed                                                                                |
-| `error`                 | `boolean`                                                       | —               | Show error styling — not needed if `errorMessage` is set                                                               |
-| `mode`                  | `"default"` \| `"expand"` \| `"collapse"`                       | `"default"`     | Initial expand/collapse state of categories when the dropdown opens                                                    |
-| `valueToStringFunction` | `(value: V1 \| V2 \| V3) => string`                             | —               | Converts values to display strings. Single function used for all levels — assumes values are homogeneous across levels |
-| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"`                        | `"success"`     | Visual state for async option loading                                                                                  |
-| `optionTruncationType`  | `"end"` \| `"middle"`                                           | `"end"`         | Truncation style for long option text                                                                                  |
-| `enableSearch`          | `boolean`                                                       | `false`         | Enable text-based search in the dropdown                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                       | `false`         | Suppress the default no-results UI                                                                                     |
-| `customLabels`          | `DropdownCustomLabelProps`                                      | —               | Override default dropdown label strings                                                                                |
-| `onSelectOptions`       | `(keyPaths: string[][], values: Array<V1 \| V2 \| V3>) => void` | —               | Called when selections change                                                                                          |
-| `onShowOptions`         | `() => void`                                                    | —               | Called when the dropdown opens                                                                                         |
-| `onHideOptions`         | `() => void`                                                    | —               | Called when the dropdown closes                                                                                        |
-| `onRetry`               | `() => void`                                                    | —               | Called when retry is clicked after a failed load                                                                       |
-| `onSearch`              | `() => void`                                                    | —               | Called when a search is executed                                                                                       |
-| `onBlur`                | `() => void`                                                    | —               | Called when the field loses focus                                                                                      |
-| `variant`               | `"default"` \| `"small"`                                        | `"default"`     | Size variant                                                                                                           |
-| `alignment`             | `"left"` \| `"right"`                                           | `"left"`        | Dropdown alignment relative to the trigger                                                                             |
-| `dropdownZIndex`        | `number`                                                        | `50`            | Custom z-index for the dropdown                                                                                        |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                        | `document.body` | Root element that hosts the dropdown                                                                                   |
-| `dropdownWidth`         | `string`                                                        | —               | Fixed width for the dropdown                                                                                           |
-| `className`             | `string`                                                        | —               | Class selector for the component                                                                                       |
-| `data-testid`           | `string`                                                        | —               | Test identifier for the component                                                                                      |
-
-### DropdownCustomLabelProps
-
-| Prop                   | Type                    | Description                                    |
-| ---------------------- | ----------------------- | ---------------------------------------------- |
-| `searchPlaceholder`    | `string`                | Placeholder for the search field               |
-| `noResultsLabel`       | `string`                | Replaces the default no-results label          |
-| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label  |
-| `selectAllButtonLabel` | `string`                | Label for the Select all button                |
-| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                 |
-| `allSelectedLabel`     | `string`                | Label shown when all options are selected      |
-| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected |
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
-
-## Rules
-
--   Every option node must have a unique `key` string — key paths are used for controlled state.
--   Provide `valueToStringFunction` when values are not plain strings. The same function is applied to values at all nesting levels — ensure values are homogeneous across levels, or that the function handles all types.
--   Use `enableSearch` when the total option count across all levels is large.
--   Use `readOnly` on review screens — not `disabled`.
--   Provide `customLabels` to localise "Select all", "Clear all", and count labels.
--   `options` is the only mandatory component-specific prop.
--   Options follow the same nested structure as `Form.NestedSelect`: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
--   `selectedKeyPaths` is an array of key-path arrays — one per selected item.
--   `onSelectOptions` receives the complete updated `keyPaths` and `values` arrays on every change.
--   `valueToStringFunction` uses a single callback for all nesting levels — values across levels must be the same type or handled uniformly.
-
-## Anti-patterns
-
--   Do not use `Form.NestedMultiSelect` for flat option lists — use `Form.MultiSelect`.
--   Do not use when only one option can be selected — use `Form.NestedSelect`.
--   Do not use duplicate `key` values across options — selection state will break.
--   Do not set both `error` and `errorMessage`.
--   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
diff --git a/docs/skills/fds-build/resources/v3/components/form-nested-select.md b/docs/skills/fds-build/resources/v3/components/form-nested-select.md
deleted file mode 100644
index e36a12a655..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-nested-select.md
+++ /dev/null
@@ -1,165 +0,0 @@
-# Form.NestedSelect
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when options are organised in a hierarchy of up to 3 levels — e.g. industry → sector → role, or country → state → city. For flat single-select use `Form.Select`. For hierarchical multi-select use `Form.NestedMultiSelect`.
-
-## Variants
-
-| `variant`   | When to use           |
-| ----------- | --------------------- |
-| `"default"` | Standard form context |
-| `"small"`   | Compact layouts       |
-
-| `mode`       | When to use                                                                            |
-| ------------ | -------------------------------------------------------------------------------------- |
-| `"default"`  | System decides initial expand state based on selected path                             |
-| `"expand"`   | Expand all categories on open — useful when the list is short and browsing is expected |
-| `"collapse"` | Collapse all categories on open — useful for long lists where search is primary        |
-
-## Usage
-
-### Three-level hierarchy with controlled keyPath
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
-
-interface RoleValue {
-    id: string;
-    label: string;
-}
-
-const options: L1OptionProps<RoleValue, RoleValue, RoleValue>[] = [
-    {
-        key: "engineering",
-        label: "Engineering",
-        subItems: [
-            {
-                key: "engineering-frontend",
-                label: "Frontend",
-                subItems: [
-                    {
-                        key: "engineering-frontend-react",
-                        label: "React Developer",
-                        value: { id: "fe-react", label: "React Developer" },
-                    },
-                    {
-                        key: "engineering-frontend-vue",
-                        label: "Vue Developer",
-                        value: { id: "fe-vue", label: "Vue Developer" },
-                    },
-                ],
-            },
-            {
-                key: "engineering-backend",
-                label: "Backend",
-                value: { id: "be", label: "Backend Developer" },
-            },
-        ],
-    },
-];
-
-const NestedSelectExample = () => {
-    // keyPath is the path of keys from root to selected node
-    const [keyPath, setKeyPath] = useState<string[]>([]);
-    const [value, setValue] = useState<RoleValue | undefined>();
-
-    return (
-        <Form.NestedSelect<RoleValue, RoleValue, RoleValue>
-            label="Job role"
-            options={options}
-            selectedKeyPath={keyPath}
-            // onChange receives the full key path and the node's value
-            onChange={(path, val) => {
-                setKeyPath(path);
-                setValue(val);
-            }}
-            valueToStringFunction={(val) => val.label}
-            selectableCategory // intermediate nodes (e.g. "Backend") are also selectable
-            enableSearch
-        />
-    );
-};
-```
-
-**keyPath explains the selection:** `["engineering", "engineering-frontend", "engineering-frontend-react"]` means the user drilled through Engineering → Frontend → React Developer. An empty array means nothing is selected.
-
-## Props
-
-### NestedSelect specific props
-
-| Prop                    | Type                                                 | Default         | Description                                                         |
-| ----------------------- | ---------------------------------------------------- | --------------- | ------------------------------------------------------------------- |
-| `options`               | `L1OptionProps<V1, V2, V3>[]`                        | —               | **Required.** Nested option array (up to 3 levels)                  |
-| `selectedKeyPath`       | `string[]`                                           | —               | Key path of the selected option (e.g. `["1", "1-2"]`)               |
-| `placeholder`           | `string`                                             | `"Select"`      | Placeholder text                                                    |
-| `disabled`              | `boolean`                                            | —               | Disables selection                                                  |
-| `readOnly`              | `boolean`                                            | —               | Read-only state — selection not allowed                             |
-| `error`                 | `boolean`                                            | —               | Show error styling — not needed if `errorMessage` is set            |
-| `mode`                  | `"default"` \| `"expand"` \| `"collapse"`            | `"default"`     | Initial expand/collapse state of categories when the dropdown opens |
-| `valueToStringFunction` | `(value: V1 \| V2 \| V3) => string`                  | —               | Converts the selected value to a display string                     |
-| `selectableCategory`    | `boolean`                                            | —               | Allow selecting a parent category node directly                     |
-| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"`             | `"success"`     | Visual state for async option loading                               |
-| `optionTruncationType`  | `"end"` \| `"middle"`                                | `"end"`         | Truncation style for long option text                               |
-| `enableSearch`          | `boolean`                                            | —               | Enable text-based search in the dropdown                            |
-| `customLabels`          | `DropdownCustomLabelProps`                           | —               | Override default dropdown label strings                             |
-| `hideNoResultsDisplay`  | `boolean`                                            | —               | Suppress the default no-results UI                                  |
-| `onSelectOption`        | `(keyPath: string[], value: V1 \| V2 \| V3) => void` | —               | Called when an option is selected                                   |
-| `onShowOptions`         | `() => void`                                         | —               | Called when the dropdown opens                                      |
-| `onHideOptions`         | `() => void`                                         | —               | Called when the dropdown closes                                     |
-| `onRetry`               | `() => void`                                         | —               | Called when retry is clicked after a failed load                    |
-| `onSearch`              | `() => void`                                         | —               | Called when a search is executed                                    |
-| `onBlur`                | `() => void`                                         | —               | Called when the field loses focus                                   |
-| `variant`               | `"default"` \| `"small"`                             | `"default"`     | Size variant                                                        |
-| `alignment`             | `"left"` \| `"right"`                                | `"left"`        | Dropdown alignment relative to the trigger                          |
-| `dropdownZIndex`        | `number`                                             | `50`            | Custom z-index for the dropdown                                     |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                             | `document.body` | Root element that hosts the dropdown                                |
-| `dropdownWidth`         | `string`                                             | —               | Fixed width for the dropdown                                        |
-| `className`             | `string`                                             | —               | Class selector for the component                                    |
-| `data-testid`           | `string`                                             | —               | Test identifier for the component                                   |
-
-### DropdownCustomLabelProps
-
-| Prop                   | Type                    | Description                                    |
-| ---------------------- | ----------------------- | ---------------------------------------------- |
-| `searchPlaceholder`    | `string`                | Placeholder for the search field               |
-| `noResultsLabel`       | `string`                | Replaces the default no-results label          |
-| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label  |
-| `selectAllButtonLabel` | `string`                | Label for the Select all button                |
-| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                 |
-| `allSelectedLabel`     | `string`                | Label shown when all options are selected      |
-| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected |
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
-
-## Rules
-
--   Every option node must have a unique `key` string — the key path is used for controlled state.
--   Provide `valueToStringFunction` when values are not plain strings and the selected display needs to be derived from the value.
--   Enable `selectableCategory` only when selecting a parent category is a valid business outcome — otherwise category nodes serve as navigational groupings only.
--   Use `enableSearch` when the total option count across all levels is large.
--   Use `readOnly` on review screens — not `disabled`.
--   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
--   `options` is the only mandatory component-specific prop.
--   Options follow a nested structure: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
--   `selectedKeyPath` is an array of keys tracing the path to the selected leaf (e.g. `["parent-key", "child-key"]`).
--   `selectableCategory` enables selection of non-leaf (parent category) nodes.
-
-## Anti-patterns
-
--   Do not use `Form.NestedSelect` for flat option lists — use `Form.Select`.
--   Do not use when multiple selections are needed — use `Form.NestedMultiSelect`.
--   Do not use duplicate `key` values across options — selection state will break.
--   Do not set both `error` and `errorMessage`.
diff --git a/docs/skills/fds-build/resources/v3/components/form-otp-verification.md b/docs/skills/fds-build/resources/v3/components/form-otp-verification.md
deleted file mode 100644
index 6fd2e5f9c5..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-otp-verification.md
+++ /dev/null
@@ -1,164 +0,0 @@
-# Form.OtpVerification
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Flows that require identity verification via a one-time password sent to a phone number or email address.
--   The component manages the full multi-step UI: input contact → send OTP → enter OTP → verify.
-
-## Usage
-
-### Email variant
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
-
-const EmailOtpExample = () => {
-    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
-    const [email, setEmail] = useState("");
-
-    return (
-        <Form.OtpVerification
-            label="Verify your email"
-            type="email"
-            emailValue={email}
-            onEmailChange={setEmail}
-            otpState={otpState}
-            onOtpStateChange={setOtpState}
-            onSendOtp={async () => {
-                // Throw to surface the error inline — do NOT return an error string
-                const res = await api.sendEmailOtp(email);
-                if (!res.ok) throw new Error("Invalid email address");
-            }}
-            onVerifyOtp={async (otpInput) => {
-                const res = await api.verifyOtp(otpInput);
-                if (!res.ok)
-                    throw new Error("Incorrect OTP. Please try again.");
-            }}
-            onResendOtp={async () => {
-                const res = await api.sendEmailOtp(email);
-                if (!res.ok) throw new Error("Could not resend OTP");
-            }}
-            verifyOtpCountdownTimer={300}
-        />
-    );
-};
-```
-
-### Phone variant (`fixedCountry` required)
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
-import { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input";
-
-const PhoneOtpExample = () => {
-    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
-    const [phone, setPhone] = useState<PhoneNumberInputValue>({ number: "" });
-
-    return (
-        <Form.OtpVerification
-            label="Verify your mobile number"
-            type="phone-number"
-            phoneNumberValue={phone}
-            onPhoneNumberChange={setPhone}
-            fixedCountry // required when type="phone-number"; hides country selector
-            otpState={otpState}
-            onOtpStateChange={setOtpState}
-            onSendOtp={async () => {
-                const res = await api.sendSmsOtp(phone.number);
-                if (!res.ok) throw new Error("Invalid phone number");
-            }}
-            onVerifyOtp={async (otpInput) => {
-                const res = await api.verifyOtp(otpInput);
-                if (!res.ok)
-                    throw new Error("Incorrect OTP. Please try again.");
-            }}
-            onResendOtp={async () => {
-                const res = await api.sendSmsOtp(phone.number);
-                if (!res.ok) throw new Error("Could not resend OTP");
-            }}
-            verifyOtpCountdownTimer={180}
-        />
-    );
-};
-```
-
-**Key gotcha — callbacks must throw, not return error strings.**
-The component catches the thrown error and displays `error.message` inline.
-Returning a value (or nothing) always signals success and advances the state machine.
-
-## Props
-
-| Prop                      | Type                                                      | Default | Description                                                    |
-| ------------------------- | --------------------------------------------------------- | ------- | -------------------------------------------------------------- |
-| `type`                    | `"phone-number" \| "email"`                               | —       | Verification channel                                           |
-| `otpState`                | `"default" \| "sent" \| "verified"`                       | —       | Controlled state of the OTP flow                               |
-| `onOtpStateChange`        | `(otpState: OtpVerificationState) => void`                | —       | Called when the flow state changes                             |
-| `onSendOtp`               | `() => Promise<void>`                                     | —       | Called when the user requests an OTP; throw to show error      |
-| `onVerifyOtp`             | `(otp: string) => Promise<void>`                          | —       | Called when the user submits the OTP; throw to show error      |
-| `onResendOtp`             | `() => Promise<void>`                                     | —       | Called when the user requests a resend; throw to show error    |
-| `sendOtpError`            | `string`                                                  | —       | Error message shown if OTP send fails                          |
-| `sendOtpPlaceholder`      | `string`                                                  | —       | Placeholder for the contact input field                        |
-| `verifyOtpError`          | `string`                                                  | —       | Error message shown if OTP verification fails                  |
-| `verifyOtpTitle`          | `string`                                                  | —       | Title for the verify OTP section                               |
-| `verifyOtpMessage`        | `string`                                                  | —       | Description for the verify OTP section                         |
-| `verifyOtpCountdownTimer` | `number`                                                  | `60`    | Seconds before the resend button is re-enabled                 |
-| `otpReminderInterval`     | `number`                                                  | `120`   | Seconds between accessibility reminder announcements           |
-| `otpValue`                | `{ prefix?: string; separator?: string; value?: string }` | —       | Current OTP input value with optional display prefix/separator |
-| `onOtpChange`             | `(value: string) => void`                                 | —       | Called when the OTP input value changes                        |
-| `showVerifyOtpThumbnail`  | `boolean`                                                 | `false` | Shows a thumbnail in the verify OTP section                    |
-| `verifyOtpIcon`           | `React.ReactNode`                                         | —       | Custom icon for the verify OTP section                         |
-| `id`                      | `string`                                                  | —       | Unique identifier of the component                             |
-| `className`               | `string`                                                  | —       | Class selector of the component                                |
-| `data-testid`             | `string`                                                  | —       | Test identifier of the component                               |
-
-## Phone-number-specific props
-
-| Prop                  | Type                                     | Description                                            |
-| --------------------- | ---------------------------------------- | ------------------------------------------------------ |
-| `phoneNumberValue`    | `PhoneNumberInputValue`                  | Controlled phone number value                          |
-| `onPhoneNumberChange` | `(value: PhoneNumberInputValue) => void` | Called when phone input changes                        |
-| `fixedCountry`        | `true`                                   | Locks the country code; required for phone-number type |
-
-## Email-specific props
-
-| Prop            | Type                      | Description                     |
-| --------------- | ------------------------- | ------------------------------- |
-| `emailValue`    | `string`                  | Controlled email value          |
-| `onEmailChange` | `(value: string) => void` | Called when email input changes |
-
-## PhoneNumberInputValue
-
-| Prop          | Type     | Description                 |
-| ------------- | -------- | --------------------------- |
-| `number`      | `string` | Phone number                |
-| `countryCode` | `string` | Country code (e.g. `"+65"`) |
-
-## Form-specific props
-
-| Prop    | Type                       | Description |
-| ------- | -------------------------- | ----------- |
-| `label` | `string \| FormLabelProps` | Field label |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Control `otpState` externally and update it via `onOtpStateChange` — the component does not manage its own state.
--   `onSendOtp`, `onVerifyOtp`, and `onResendOtp` must be async functions; throw an error inside them to trigger the corresponding error display (`sendOtpError`, `verifyOtpError`).
--   Always pass `fixedCountry` when `type="phone-number"` — the prop is required to lock the country selector.
--   Set `verifyOtpCountdownTimer` to match the actual OTP expiry window from your backend.
--   Pass `sendOtpError` and `verifyOtpError` from server responses so users receive actionable feedback.
--   `otpState` is externally controlled — the component does not manage its own flow state.
--   `fixedCountry` is required when `type="phone-number"`.
-
-## Anti-patterns
-
--   Do not try to manage the step sequence manually — use `otpState` and let `onOtpStateChange` drive transitions.
--   Do not use for non-identity-verification scenarios — for simple code inputs, use a plain `Form.Input`.
--   Do not omit `fixedCountry` for `type="phone-number"` — the country selector will be shown unexpectedly.
--   Do not use synchronous functions for `onSendOtp`, `onVerifyOtp`, or `onResendOtp` — they must return Promises.
diff --git a/docs/skills/fds-build/resources/v3/components/form-phone-number-input.md b/docs/skills/fds-build/resources/v3/components/form-phone-number-input.md
deleted file mode 100644
index 5e86725a46..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-phone-number-input.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Form.PhoneNumberInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-Type import: `import type { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input"`
-
-## When to use
-
--   Collecting a phone number that requires a country code prefix.
--   International forms where users may have numbers from different countries.
--   Use `fixedCountry` when the service only accepts numbers from one country (e.g. Singapore-only services).
-
-## Usage
-
-```tsx
-const StyledPhoneNumberInput = styled(Form.PhoneNumberInput)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
-
-## Props
-
-| Prop                      | Type                                     | Default    | Description                                                             |
-| ------------------------- | ---------------------------------------- | ---------- | ----------------------------------------------------------------------- |
-| `value`                   | `PhoneNumberInputValue`                  | —          | Controlled value containing country code and number                     |
-| `allowClear`              | `boolean`                                | —          | Shows a clear icon button inside the input                              |
-| `noBorder`                | `boolean`                                | `false`    | Removes the border wrapper                                              |
-| `disabled`                | `boolean`                                | —          | Disables the component; selection not allowed                           |
-| `readOnly`                | `boolean`                                | —          | Read-only state; input not allowed                                      |
-| `error`                   | `boolean`                                | —          | Sets error display (not needed if `errorMessage` is set)                |
-| `enableSearch`            | `boolean`                                | `false`    | Enables text search within the country code dropdown                    |
-| `fixedCountry`            | `boolean`                                | `false`    | Locks the country code; hides the dropdown selector                     |
-| `id`                      | `string`                                 | —          | Unique identifier of the component                                      |
-| `name`                    | `string`                                 | —          | Name attribute of the component                                         |
-| `className`               | `string`                                 | —          | Class selector of the component                                         |
-| `data-testid`             | `string`                                 | —          | Test identifier of the component                                        |
-| `optionPlaceholder`       | `string`                                 | —          | Placeholder for the country code dropdown                               |
-| `optionSearchPlaceholder` | `string`                                 | —          | Placeholder for the country code search field (requires `enableSearch`) |
-| `pattern`                 | `string`                                 | —          | Regex the input value should match                                      |
-| `placeholder`             | `string`                                 | `"Select"` | Placeholder for the number input                                        |
-| `autoComplete`            | `string`                                 | —          | `autocomplete` attribute for the input field                            |
-| `onChange`                | `(value: PhoneNumberInputValue) => void` | —          | Called on number input change or country code selection                 |
-| `onClear`                 | `() => void`                             | —          | Called when the clear icon is clicked                                   |
-| `onBlur`                  | `() => void`                             | —          | Called on defocus                                                       |
-| `onShowOptions`           | `() => void`                             | —          | Called when the country code dropdown expands                           |
-| `onHideOptions`           | `() => void`                             | —          | Called when the country code dropdown collapses                         |
-
-## PhoneNumberInputValue
-
-| Prop          | Type     | Description                                                                                                             |
-| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `number`      | `string` | The phone number                                                                                                        |
-| `countryCode` | `string` | The country code (e.g. `"+65"`). The `+` prefix is optional on input but always included in the `onChange` return value |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; `onChange` returns `{ countryCode, number }`.
--   Use `enableSearch` when the country list is long and users need to find their country quickly.
--   Use `fixedCountry` together with a pre-set `value.countryCode` so the locked code is visible.
--   Use `allowClear` when the field can be optionally cleared by the user.
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
-
-## Anti-patterns
-
--   Do not use a plain text input for international phone numbers — formatting and country code handling must be consistent.
--   Do not use without `fixedCountry` when only one country is supported — it creates unnecessary friction.
--   Do not omit `value.countryCode` when `fixedCountry` is true — the locked code won't render without it.
diff --git a/docs/skills/fds-build/resources/v3/components/form-predictive-text-input.md b/docs/skills/fds-build/resources/v3/components/form-predictive-text-input.md
deleted file mode 100644
index 2be04e574f..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-predictive-text-input.md
+++ /dev/null
@@ -1,102 +0,0 @@
-# Form.PredictiveTextInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   The option set is too large for a static dropdown and must be fetched dynamically (e.g. address lookup, postal code search, product search, large dataset autocomplete).
--   Users need to type to narrow down results before selecting.
-
-## Usage
-
-### Location search — three extractors working together
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-interface Location {
-    id: string;
-    name: string;
-    address: string;
-}
-
-const LocationSearchExample = () => {
-    const [selected, setSelected] = useState<Location | undefined>();
-
-    const fetchOptions = async (input: string): Promise<Location[]> => {
-        const res = await api.searchLocations(input);
-        return res.results;
-    };
-
-    return (
-        <Form.PredictiveTextInput<Location, string>
-            label="Search location"
-            minimumCharacters={3} // fetch only after 3 chars typed
-            fetchOptions={fetchOptions}
-            // Populates the text field when an option is selected
-            valueExtractor={(item) => item.name}
-            // Populates each row in the dropdown list
-            listExtractor={(item) => `${item.name} — ${item.address}`}
-            // Displays the chosen value as a chip / confirmation label
-            displayValueExtractor={(item) => item.name}
-            selectedOption={selected}
-            onSelectOption={(item) => setSelected(item ?? undefined)}
-        />
-    );
-};
-```
-
-**How the three extractors divide responsibility:**
-
-| Extractor               | When it runs               | What it renders                  |
-| ----------------------- | -------------------------- | -------------------------------- |
-| `listExtractor`         | While the dropdown is open | Each option row in the list      |
-| `valueExtractor`        | After selection            | The text field value             |
-| `displayValueExtractor` | After selection            | The chip / confirmed-value label |
-
-Debounce `fetchOptions` internally (e.g. with `setTimeout` or a library) — the component calls it on every character change.
-
-## Props
-
-| Prop                    | Type                                          | Default           | Description                                                      |
-| ----------------------- | --------------------------------------------- | ----------------- | ---------------------------------------------------------------- |
-| `fetchOptions`          | `(input: string) => Promise<T[]>`             | —                 | **Required.** Async function called to populate dropdown options |
-| `selectedOption`        | `T`                                           | —                 | Controlled selected option object                                |
-| `valueExtractor`        | `(option: T) => V`                            | —                 | Extracts the stored value from an option                         |
-| `listExtractor`         | `(option: T) => string`                       | —                 | Extracts the display text shown in the dropdown list             |
-| `displayValueExtractor` | `(option: T) => string`                       | —                 | Extracts the display text shown in the input after selection     |
-| `onSelectOption`        | `(option: T, extractedValue: T \| V) => void` | —                 | Called when the user selects an option                           |
-| `minimumCharacters`     | `number`                                      | `3`               | Minimum characters typed before options are fetched              |
-| `placeholder`           | `string`                                      | `"Enter here..."` | Placeholder text of the input                                    |
-| `disabled`              | `boolean`                                     | —                 | Disables the component; selection not allowed                    |
-| `readOnly`              | `boolean`                                     | —                 | Read-only state; selection not allowed                           |
-| `error`                 | `boolean`                                     | —                 | Sets error display (not needed if `errorMessage` is set)         |
-| `className`             | `string`                                      | —                 | Class selector of the component                                  |
-| `data-testid`           | `string`                                      | —                 | Test identifier of the component                                 |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   `fetchOptions` is required — it must be async and return an array of option objects.
--   Debounce inside `fetchOptions` to avoid flooding the API on every keystroke.
--   Set `minimumCharacters` to a value that produces useful results — `3` is the default, but adjust for your data source.
--   Always provide `valueExtractor`, `listExtractor`, and `displayValueExtractor` — omitting any of these produces inconsistent display behaviour.
--   Use `selectedOption` and `onSelectOption` for controlled selection.
--   Set `errorMessage` when the selected option fails validation.
--   `fetchOptions` is called on every keystroke after `minimumCharacters` is reached — debounce inside the function if needed.
--   Generic type `T` is the option object shape; `V` is the extracted value type.
-
-## Anti-patterns
-
--   Do not use when the full option list is small and known upfront — use `Form.Select` or `Form.MultiSelect` instead.
--   Do not use `fetchOptions` without debouncing — each keystroke fires a new call.
--   Do not omit extractor functions — the component cannot determine what to display without them.
diff --git a/docs/skills/fds-build/resources/v3/components/form-select.md b/docs/skills/fds-build/resources/v3/components/form-select.md
deleted file mode 100644
index 961b15c28a..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-select.md
+++ /dev/null
@@ -1,122 +0,0 @@
-# Form.Select
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when users must select exactly one option from a predefined list. For multiple selections use `Form.MultiSelect`. For hierarchical options use `Form.NestedSelect`.
-
-## Variants
-
-| `variant`   | When to use                                              |
-| ----------- | -------------------------------------------------------- |
-| `"default"` | Standard form context                                    |
-| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
-
-## Usage
-
-```tsx
-import { Form } from "@lifesg/react-design-system/form";
-
-const options = [
-    { value: "sg", label: "Singapore" },
-    { value: "my", label: "Malaysia" },
-];
-
-<Form.Select
-    label="Country"
-    options={options}
-    selectedOption={selected}
-    valueExtractor={(opt) => opt.value}
-    listExtractor={(opt) => opt.label}
-    displayValueExtractor={(opt) => opt.label}
-    onSelectOption={(opt) => {}}
-/>;
-```
-
-## Props
-
-### Select specific props
-
-| Prop                         | Type                                                     | Default         | Description                                                               |
-| ---------------------------- | -------------------------------------------------------- | --------------- | ------------------------------------------------------------------------- |
-| `options`                    | `T[]`                                                    | —               | **Required.** List of option objects                                      |
-| `selectedOption`             | `T`                                                      | —               | Controlled selected option                                                |
-| `valueExtractor`             | `(option: T) => V`                                       | —               | Derives the value from an option                                          |
-| `listExtractor`              | `(option: T) => string`                                  | —               | Derives the display text for dropdown list items                          |
-| `displayValueExtractor`      | `(option: T) => string`                                  | —               | Derives the display text shown in the selector when an option is selected |
-| `valueToStringFunction`      | `(value: V) => string`                                   | —               | Converts a value to a string                                              |
-| `name`                       | `string`                                                 | —               | Name attribute of the component                                           |
-| `placeholder`                | `string`                                                 | `"Select"`      | Placeholder text                                                          |
-| `disabled`                   | `boolean`                                                | —               | Disables selection                                                        |
-| `readOnly`                   | `boolean`                                                | —               | Read-only state — selection not allowed                                   |
-| `error`                      | `boolean`                                                | —               | Show error styling — not needed if `errorMessage` is set                  |
-| `optionsLoadState`           | `"success"` \| `"loading"` \| `"failed"`                 | `"success"`     | Visual state for async option loading                                     |
-| `optionTruncationType`       | `"end"` \| `"middle"`                                    | `"end"`         | Truncation style for long option text                                     |
-| `enableSearch`               | `boolean`                                                | `false`         | Enable text-based search in the dropdown                                  |
-| `searchFunction`             | `(searchValue: string) => T[]`                           | —               | Custom search function                                                    |
-| `renderListItem`             | `(item: T, args: ListItemRenderArgs) => JSX.Element`     | —               | Custom list item renderer                                                 |
-| `renderCustomSelectedOption` | `(option: T) => JSX.Element`                             | —               | Custom renderer for the selected option display in the selector           |
-| `onSelectOption`             | `(option: T, extractedValue: T \| V) => void`            | —               | Called when an option is selected                                         |
-| `onShowOptions`              | `() => void`                                             | —               | Called when the dropdown opens                                            |
-| `onHideOptions`              | `() => void`                                             | —               | Called when the dropdown closes                                           |
-| `onRetry`                    | `() => void`                                             | —               | Called when retry is clicked after a failed load                          |
-| `onSearch`                   | `() => void`                                             | —               | Called when a search is executed                                          |
-| `hideNoResultsDisplay`       | `boolean`                                                | —               | Suppress the default no-results UI                                        |
-| `customLabels`               | `DropdownCustomLabelProps`                               | —               | Override default dropdown label strings                                   |
-| `renderCustomCallToAction`   | `(hideOptions: () => void, options: T[]) => JSX.Element` | —               | Render a custom CTA at the bottom of the dropdown                         |
-| `variant`                    | `"default"` \| `"small"`                                 | `"default"`     | Size variant                                                              |
-| `alignment`                  | `"left"` \| `"right"`                                    | `"left"`        | Dropdown alignment relative to the trigger                                |
-| `dropdownZIndex`             | `number`                                                 | `50`            | Custom z-index for the dropdown                                           |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                 | `document.body` | Root element that hosts the dropdown                                      |
-| `dropdownWidth`              | `string`                                                 | —               | Fixed width for the dropdown (overrides matching the trigger width)       |
-| `data-testid`                | `string`                                                 | —               | Test identifier for the component                                         |
-
-### ListItemRenderArgs
-
-| Prop       | Type      | Description                                 |
-| ---------- | --------- | ------------------------------------------- |
-| `selected` | `boolean` | Whether the list item is currently selected |
-
-### DropdownCustomLabelProps
-
-| Prop                   | Type                    | Description                                                        |
-| ---------------------- | ----------------------- | ------------------------------------------------------------------ |
-| `searchPlaceholder`    | `string`                | Placeholder for the search field                                   |
-| `noResultsLabel`       | `string`                | Replaces the default no-results label                              |
-| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label                      |
-| `selectAllButtonLabel` | `string`                | Label for the Select all button                                    |
-| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                                     |
-| `allSelectedLabel`     | `string`                | Label shown when all options are selected                          |
-| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected (e.g. "X selected") |
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
-
-## Rules
-
--   Always provide `options` — the component has no meaning without it.
--   Provide `valueExtractor` and `listExtractor` when the option objects are not plain strings — these are effectively required for typed option arrays.
--   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing the raw value (e.g. "sg") in the closed selector instead of the label (e.g. "Singapore").
--   Use `optionsLoadState` to communicate async loading states — set to `"loading"` while fetching, `"failed"` on error (triggers retry UI).
--   Use `enableSearch` when the list exceeds ~10 items.
--   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
--   Use `readOnly` on review screens — not `disabled`.
--   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
--   Use `dropdownWidth` when the dropdown must be wider than the trigger (e.g. long option text).
--   `options` is the only mandatory component-specific prop.
--   Only specify `dropdownRootNode` when the default `body` rendering causes scroll or z-index conflicts.
-
-## Anti-patterns
-
--   Do not use `Form.Select` when users can choose more than one option — use `Form.MultiSelect`.
--   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
--   Do not set both `error` and `errorMessage`.
--   Do not use `disabled` on review screens — use `readOnly`.
diff --git a/docs/skills/fds-build/resources/v3/components/form-slider.md b/docs/skills/fds-build/resources/v3/components/form-slider.md
deleted file mode 100644
index e8349b26d7..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-slider.md
+++ /dev/null
@@ -1,115 +0,0 @@
-# Form.Slider
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Selecting a single numeric value within a bounded range (e.g. budget, age, percentage, rating).
--   When the relative position of a value matters more than typing an exact number.
-
-## Usage
-
-### Basic slider with display-only `onChange` and API-safe `onChangeEnd`
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const BudgetSlider = () => {
-    const [displayValue, setDisplayValue] = useState(500);
-
-    const handleChange = (value: number) => {
-        // Safe: fires continuously during drag — update display only
-        setDisplayValue(value);
-    };
-
-    const handleChangeEnd = (value: number) => {
-        // Safe: fires once on mouse/touch release — trigger API calls here
-        fetchResults({ maxBudget: value });
-    };
-
-    return (
-        <Form.Slider
-            label={`Budget: $${displayValue}`}
-            min={0}
-            max={2000}
-            step={100}
-            value={displayValue}
-            onChange={handleChange}
-            onChangeEnd={handleChangeEnd}
-            showSliderLabels
-            sliderLabelPrefix="$"
-            showIndicatorLabel
-            indicatorLabelPrefix="$"
-        />
-    );
-};
-```
-
-**Never put API calls or expensive state updates in `onChange`** — it fires on every pixel of drag movement. Use `onChangeEnd` instead.
-
-### Custom track colours
-
-`colors` takes a two-element array: `[leftTrackColor, rightTrackColor]`.
-
-```tsx
-<Form.Slider
-    label="Risk level"
-    min={0}
-    max={10}
-    colors={["#4caf50", "#e0e0e0"]}
-    showSliderLabels
-    sliderLabelSuffix=" / 10"
-/>
-```
-
-## Props
-
-| Prop                   | Type                                                              | Default | Description                                                   |
-| ---------------------- | ----------------------------------------------------------------- | ------- | ------------------------------------------------------------- |
-| `value`                | `number`                                                          | —       | Controlled value                                              |
-| `min`                  | `number`                                                          | `0`     | Start of the range                                            |
-| `max`                  | `number`                                                          | `100`   | End of the range                                              |
-| `step`                 | `number`                                                          | `1`     | Interval between values                                       |
-| `disabled`             | `boolean`                                                         | —       | Disables the slider; selection not allowed                    |
-| `readOnly`             | `boolean`                                                         | —       | Read-only state                                               |
-| `id`                   | `string`                                                          | —       | Unique identifier of the component                            |
-| `className`            | `string`                                                          | —       | Class selector of the component                               |
-| `data-testid`          | `string`                                                          | —       | Test identifier of the component                              |
-| `colors`               | `(string \| ((props: ThemeStyleProps) => string \| undefined))[]` | —       | Custom colors for track segments `[leftTrack, rightTrack]`    |
-| `showSliderLabels`     | `boolean`                                                         | —       | Shows min and max labels                                      |
-| `sliderLabelPrefix`    | `string`                                                          | —       | Text prepended to min/max labels                              |
-| `sliderLabelSuffix`    | `string`                                                          | —       | Text appended to min/max labels                               |
-| `renderSliderLabel`    | `(value: number) => React.ReactNode`                              | —       | Custom renderer for min/max labels                            |
-| `showIndicatorLabel`   | `boolean`                                                         | —       | Shows the current value as an indicator label above the thumb |
-| `indicatorLabelPrefix` | `string`                                                          | —       | Text prepended to the indicator label                         |
-| `indicatorLabelSuffix` | `string`                                                          | —       | Text appended to the indicator label                          |
-| `ariaLabel`            | `string`                                                          | —       | Accessible label for screen readers                           |
-| `onChange`             | `(value: number) => void`                                         | —       | Called on every value change (fires continuously during drag) |
-| `onChangeEnd`          | `(value: number) => void`                                         | —       | Called when the thumb is released after a change              |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Always set `min` and `max` to meaningful bounds for the use case.
--   Use `step` to restrict values to meaningful increments (e.g. `step={500}` for a budget slider).
--   Use `onChangeEnd` for expensive operations (API calls, heavy computations) — `onChange` fires on every pixel of movement.
--   Enable `showSliderLabels` so users know the range bounds.
--   Enable `showIndicatorLabel` so users can see the current value while dragging.
--   Provide `ariaLabel` when the label alone does not fully describe the slider's purpose to screen readers.
--   `onChange` fires continuously during drag; use `onChangeEnd` for expensive operations such as API calls.
--   `colors` array format is `[leftTrack, rightTrack]`.
-
-## Anti-patterns
-
--   Do not use `onChange` to trigger API calls — use `onChangeEnd` to avoid flooding the network.
--   Do not use when the user needs to enter a precise value — prefer a number input in that case.
--   Do not omit `min` and `max` — the defaults (0–100) may not be appropriate for the domain.
diff --git a/docs/skills/fds-build/resources/v3/components/form-textarea.md b/docs/skills/fds-build/resources/v3/components/form-textarea.md
deleted file mode 100644
index de67735bf1..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-textarea.md
+++ /dev/null
@@ -1,122 +0,0 @@
-# Form.Textarea
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use for freeform long-text entry — descriptions, comments, reasons, or any field where users need more than one line. Use `Form.Input` for single-line text.
-
-## Usage
-
-### 1. Basic controlled textarea
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const [value, setValue] = useState("");
-
-<Form.Textarea
-    label="Description"
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    placeholder="Enter a description..."
-    rows={4}
-/>;
-```
-
-### 2. With `maxLength` — auto-renders a character counter
-
-```tsx
-<Form.Textarea
-    label="Comments"
-    maxLength={200}
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-/>;
-{
-    /* A counter "0 / 200" appears below automatically — no extra code needed */
-}
-```
-
-### 3. With `renderCustomCounter`
-
-The prop signature is `(maxLength: number, currentValueLength: number) => JSX.Element`. Note the argument order: `maxLength` first, then `currentValueLength`.
-
-```tsx
-<Form.Textarea
-    label="Comments"
-    maxLength={200}
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    renderCustomCounter={(maxLength, currentValueLength) => (
-        <span
-            style={{
-                color: currentValueLength > maxLength * 0.9 ? "red" : "inherit",
-            }}
-        >
-            {currentValueLength} of {maxLength} characters used
-        </span>
-    )}
-/>
-```
-
-### 4. With `transformValue`
-
-`transformValue` runs on every input event and replaces the raw value before it is applied. Do not duplicate this logic in `onChange`.
-
-```tsx
-<Form.Textarea
-    label="Reference code"
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    transformValue={(raw) => raw.toUpperCase()}
-    maxLength={50}
-/>;
-{
-    /* User types "abc" → stored value becomes "ABC" */
-}
-```
-
-## Props
-
-### Textarea specific props
-
-| Prop                  | Type                                                             | Default | Description                                              |
-| --------------------- | ---------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `error`               | `boolean`                                                        | —       | Show error styling — not needed if `errorMessage` is set |
-| `renderCustomCounter` | `(maxLength: number, currentValueLength: number) => JSX.Element` | —       | Render a custom character counter label                  |
-| `transformValue`      | `(value: string) => string`                                      | —       | Transform the value on change before it is applied       |
-| `prefix`              | `string`                                                         | —       | Prefix string displayed inside the textarea              |
-| `data-testid`         | `string`                                                         | —       | Test identifier for the component                        |
-
-Also inherits all props from `HTMLTextareaElement` — including `rows`, `maxLength`, `placeholder`, `disabled`, `readOnly`, `value`, `onChange`, `resize`.
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
-
-## Rules
-
--   Set `rows` to match the expected content length — a short reason field needs fewer rows than a free-text description.
--   Set `resize="none"` when the textarea height is fixed by design to prevent layout disruption.
--   Provide `maxLength` when a character limit must be enforced — the built-in counter appears automatically.
--   Use `renderCustomCounter` only when the default counter format does not meet content requirements.
--   Use `transformValue` for on-the-fly normalisation (e.g. forced capitalisation) — do not replicate this in `onChange`.
--   Provide `errorMessage` rather than `error` alone.
--   Setting native `maxLength` renders a character counter below the textarea automatically.
--   `renderCustomCounter` overrides the default counter UI when `maxLength` is set.
--   `error` is redundant when `errorMessage` is provided.
--   `transformValue` runs on every input event — use for normalisation (e.g. uppercase conversion).
-
-## Anti-patterns
-
--   Do not use `Form.Textarea` for single-line inputs — use `Form.Input`.
--   Do not implement a manual character counter in consumer code when `maxLength` is set — the built-in counter handles it.
--   Do not set both `error` and `errorMessage`.
diff --git a/docs/skills/fds-build/resources/v3/components/form-time-range-picker.md b/docs/skills/fds-build/resources/v3/components/form-time-range-picker.md
deleted file mode 100644
index 7ea46b7522..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-time-range-picker.md
+++ /dev/null
@@ -1,84 +0,0 @@
-# Form.TimeRangePicker
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a start and end time from the user (e.g. operating hours, meeting slot, booking window).
--   Use `variant="combobox"` with `interval` when users should pick from fixed time slots (e.g. every 30 minutes).
--   Use `variant="dial"` (default) for freeform time selection.
-
-## Usage
-
-```tsx
-const StyledTimeRangePicker = styled(Form.TimeRangePicker)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
-
-## Props
-
-| Prop               | Type                                    | Default         | Description                                              |
-| ------------------ | --------------------------------------- | --------------- | -------------------------------------------------------- |
-| `value`            | `TimeRangePickerValue`                  | —               | Selected time range                                      |
-| `format`           | `"12hr" \| "24hr"`                      | `"24hr"`        | Time input format                                        |
-| `variant`          | `"dial" \| "combobox"`                  | `"dial"`        | Picker UI variant                                        |
-| `disabled`         | `boolean`                               | —               | Disables the component; entry not allowed                |
-| `readOnly`         | `boolean`                               | —               | Read-only state; selection not allowed                   |
-| `error`            | `boolean`                               | —               | Sets error display (not needed if `errorMessage` is set) |
-| `id`               | `string`                                | —               | Unique identifier of the component                       |
-| `className`        | `string`                                | —               | Class selector of the component                          |
-| `style`            | `React.CSSProperties`                   | —               | Inline styles for the component                          |
-| `data-testid`      | `string`                                | —               | Test identifier of the component                         |
-| `alignment`        | `"left" \| "right"`                     | `"left"`        | Dropdown alignment relative to the field                 |
-| `dropdownZIndex`   | `number`                                | `50`            | z-index of the dropdown                                  |
-| `dropdownRootNode` | `React.RefObject<HTMLElement>`          | `document.body` | Root element containing the dropdown                     |
-| `onChange`         | `(value: TimeRangePickerValue) => void` | —               | Called when user confirms the time range                 |
-| `onBlur`           | `() => void`                            | —               | Called on defocus                                        |
-| `onFocus`          | `() => void`                            | —               | Called when field is focused                             |
-
-## Combobox-variant-specific props
-
-| Prop                     | Type     | Default | Description                                                  |
-| ------------------------ | -------- | ------- | ------------------------------------------------------------ |
-| `interval`               | `number` | `15`    | Minutes between each dropdown option                         |
-| `startLimit`             | `string` | —       | Earliest time shown in the dropdown                          |
-| `endLimit`               | `string` | —       | Latest time shown in the dropdown                            |
-| `initialScrollStartTime` | `string` | —       | Time the start dropdown scrolls to when start field is empty |
-| `initialScrollEndTime`   | `string` | —       | Time the end dropdown scrolls to when end field is empty     |
-
-## TimeRangePickerValue
-
-| Prop    | Type     | Description                                                                                                 |
-| ------- | -------- | ----------------------------------------------------------------------------------------------------------- |
-| `start` | `string` | Start time. Dial 24hr: `"HH:mm"`, dial 12hr: `"hh:mmA"`. Combobox 24hr: `"HH:mm"`, combobox 12hr: `"h:mma"` |
-| `end`   | `string` | End time, same format as `start`                                                                            |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `TimeRangePickerValue`.
--   Match `format` to the expected string format in `TimeRangePickerValue`.
--   Use `startLimit`/`endLimit` with `combobox` variant to restrict available options to valid business hours.
--   Set `errorMessage` rather than `error` alone.
--   Use `dropdownRootNode` when inside a modal or scrollable container.
--   Time string format differs between `dial` and `combobox` variants — see `TimeRangePickerValue` above.
--   `interval`, `startLimit`, `endLimit`, and `initialScroll*` props only apply when `variant="combobox"`.
-
-## Anti-patterns
-
--   Do not use for single time selection — use `Form.TimePicker` instead.
--   Do not mix dial and combobox time string formats — the format differs between variants.
--   Do not set combobox-specific props (`interval`, `startLimit`, `endLimit`, `initialScroll*`) when `variant="dial"`.
diff --git a/docs/skills/fds-build/resources/v3/components/form-timepicker.md b/docs/skills/fds-build/resources/v3/components/form-timepicker.md
deleted file mode 100644
index ea9ade5e5b..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-timepicker.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# Form.Timepicker
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-> **Casing:** the export is `Form.Timepicker` (lowercase `p`), not `Form.TimePicker`.
-
-## When to use
-
--   Collecting a single time value from the user (e.g. appointment time, start time, notification time).
--   Use `format="12hr"` for consumer-facing forms where AM/PM is more intuitive.
--   Use `format="24hr"` (default) for operational or technical contexts.
-
-## Usage
-
-```tsx
-const StyledTimepicker = styled(Form.Timepicker)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
-
-## Props
-
-| Prop               | Type                           | Default         | Description                                                                          |
-| ------------------ | ------------------------------ | --------------- | ------------------------------------------------------------------------------------ |
-| `value`            | `string`                       | —               | Selected time. 24hr: `"HH:mm"` (e.g. `"13:00"`); 12hr: `"hh:mmA"` (e.g. `"01:00PM"`) |
-| `format`           | `"12hr" \| "24hr"`             | `"24hr"`        | Time input format                                                                    |
-| `placeholder`      | `string`                       | —               | Placeholder text in the field                                                        |
-| `alignment`        | `"left" \| "right"`            | `"left"`        | Alignment of the dropdown relative to the field                                      |
-| `disabled`         | `boolean`                      | —               | Disables the component; entry not allowed                                            |
-| `error`            | `boolean`                      | —               | Sets error display (not needed if `errorMessage` is set)                             |
-| `id`               | `string`                       | —               | Unique identifier of the component                                                   |
-| `className`        | `string`                       | —               | Class selector of the component                                                      |
-| `style`            | `React.CSSProperties`          | —               | Inline styles for the component                                                      |
-| `data-testid`      | `string`                       | —               | Test identifier of the component                                                     |
-| `dropdownZIndex`   | `number`                       | —               | z-index of the dropdown popover                                                      |
-| `dropdownRootNode` | `React.RefObject<HTMLElement>` | `document.body` | Root element containing the dropdown popover                                         |
-| `onChange`         | `(value: string) => void`      | —               | Called when user confirms a time selection                                           |
-| `onBlur`           | `() => void`                   | —               | Called on defocus; pending changes are not applied                                   |
-| `onFocus`          | `() => void`                   | —               | Called when field is focused                                                         |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage.
--   Match `format` to the expected string format: `"HH:mm"` for 24hr, `"hh:mmA"` for 12hr.
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
--   Use `dropdownRootNode` when the picker is inside a modal or fixed container to avoid z-index issues.
--   Use `alignment="right"` when the picker is near the right edge of the viewport.
--   `onChange` fires only after the user clicks the Confirm button, not on every dial interaction.
--   `onBlur` does not apply any in-progress selection — use `onChange` for committed values.
-
-## Anti-patterns
-
--   Do not use for time-range selection — use `Form.TimeRangePicker` instead.
--   Do not mix 12hr format strings with `format="24hr"` or vice versa.
--   Do not rely on `onBlur` to capture the selected value — it does not commit the selection.
diff --git a/docs/skills/fds-build/resources/v3/components/form-unit-number-input.md b/docs/skills/fds-build/resources/v3/components/form-unit-number-input.md
deleted file mode 100644
index 863ae3eb97..0000000000
--- a/docs/skills/fds-build/resources/v3/components/form-unit-number-input.md
+++ /dev/null
@@ -1,132 +0,0 @@
-# Form.UnitNumberInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a Singapore unit number in `#floor-unit` format (e.g. `#01-234`).
--   Any address form that includes a unit number field for Singapore addresses.
-
-## Usage
-
-### Basic controlled usage with validation guard
-
-`onChange` returns a `floor-unit` string (e.g. `"03-12"`) or the sentinel string `"Invalid unit number"` for malformed input. Always check before persisting.
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const UnitField = () => {
-    const [value, setValue] = useState("");
-    const [error, setError] = useState("");
-
-    const handleChange = (val: string) => {
-        if (val === "Invalid unit number") {
-            setError("Please enter a valid unit number.");
-            // Do not persist — keep previous valid value in state
-        } else {
-            setError("");
-            setValue(val); // e.g. "03-12"
-        }
-    };
-
-    return (
-        <Form.UnitNumberInput
-            label="Unit number"
-            value={value}
-            onChange={handleChange}
-            errorMessage={error}
-        />
-    );
-};
-```
-
-### `onBlur` zero-pads automatically
-
-After the user tabs away, `onBlur` fires with the formatted value. The displayed value may change without any user input — update state accordingly.
-
-```tsx
-<Form.UnitNumberInput
-    label="Unit number"
-    value={value}
-    onChange={handleChange}
-    onBlur={(formatted) => {
-        // e.g. user typed "3-2" → formatted is "03-02"
-        setValue(formatted);
-    }}
-/>
-```
-
-### `onChangeRaw` — separate floor and unit
-
-Use `onChangeRaw` when downstream code needs floor and unit as distinct values, regardless of validity.
-
-```tsx
-<Form.UnitNumberInput
-    label="Unit number"
-    onChangeRaw={(parts: string[]) => {
-        const [floor, unit] = parts; // e.g. ["03", "12"]
-        setFloor(floor);
-        setUnit(unit);
-    }}
-/>
-```
-
-Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper:
-
-```tsx
-const StyledUnitNumberInput = styled(Form.UnitNumberInput)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-## Props
-
-| Prop           | Type                        | Default     | Description                                                                                              |
-| -------------- | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
-| `value`        | `string`                    | —           | Controlled value in `floor-unit` format (e.g. `"00-8888"`)                                               |
-| `name`         | `string`                    | —           | Name attribute of the component                                                                          |
-| `error`        | `boolean`                   | —           | Sets error display (not needed if `errorMessage` is set)                                                 |
-| `id`           | `string`                    | —           | Unique identifier of the component                                                                       |
-| `className`    | `string`                    | —           | Class selector of the component                                                                          |
-| `style`        | `React.CSSProperties`       | —           | Inline styles for the component                                                                          |
-| `role`         | `React.AriaRole`            | —           | ARIA role of the component                                                                               |
-| `data-testid`  | `string`                    | —           | Test identifier of the component                                                                         |
-| `placeholder`  | `string`                    | `"00-8888"` | Placeholder text; recommended to use `<floor>-<unit>` format                                             |
-| `disabled`     | `boolean`                   | —           | Disables the component; entry not allowed                                                                |
-| `readOnly`     | `boolean`                   | —           | Read-only state; entry not allowed                                                                       |
-| `tabIndex`     | `number`                    | —           | Tab order of the component                                                                               |
-| `autoComplete` | `string`                    | —           | `autocomplete` attribute for the input field                                                             |
-| `onChange`     | `(value: string) => void`   | —           | Called on value change; returns `floor-unit` string. Returns `"Invalid unit number"` if value is invalid |
-| `onChangeRaw`  | `(value: string[]) => void` | —           | Called on value change; returns `[floor, unit]` array regardless of validity                             |
-| `onBlur`       | `(value: string) => void`   | —           | Called on defocus; returns formatted `floor-unit` string (e.g. `"11-2"` → `"11-02"`)                     |
-| `onBlurRaw`    | `(value: string[]) => void` | —           | Called on defocus; returns `[floor, unit]` array                                                         |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage.
--   Check the return value of `onChange` for `"Invalid unit number"` and handle it before persisting the value.
--   Use `onChangeRaw` if you need floor and unit as separate values for downstream processing.
--   Use `onBlur` to get the zero-padded, formatted value after the user finishes typing.
--   Set `errorMessage` to explain validation failures.
--   `onChange` returns `"Invalid unit number"` for malformed input — check for this string before saving.
--   `onBlur` zero-pads the unit part (e.g. `"11-2"` → `"11-02"`).
--   Use `onChangeRaw` / `onBlurRaw` when you need floor and unit as separate values.
-
-## Anti-patterns
-
--   Do not use a plain text input for unit numbers — the component enforces the correct format automatically.
--   Do not persist the value returned from `onChange` without first checking it is not `"Invalid unit number"`.
--   Do not use for non-Singapore address formats — the component enforces the `floor-unit` structure.
diff --git a/docs/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md b/docs/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
deleted file mode 100644
index bc10fceddb..0000000000
--- a/docs/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
+++ /dev/null
@@ -1,123 +0,0 @@
-# FullscreenImageCarousel
-
-Import: `import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel"`
-
-## When to use
-
-Use to display a fullscreen overlay carousel of images or custom content (e.g. PDFs, videos) with thumbnail navigation, zoom, and optional delete controls.
-
-## Sub-components
-
--   `FullscreenImageCarouselItemProps` — union of `FullscreenImageCarouselImageItemProps` and `FullscreenImageCarouselCustomItemProps`
-
-## Usage
-
-### Mixed image and custom items
-
-Items use a discriminated union on `type`. Image items may omit `type` (defaults to image); custom items **must** set `type: "custom"` and provide `renderContent`.
-
-```tsx
-import { useState } from "react";
-import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel";
-
-const DocViewer = () => {
-    const [show, setShow] = useState(false);
-
-    const items = [
-        // Image item — type may be omitted
-        {
-            src: "https://example.com/photo.jpg",
-            alt: "Site photo",
-            fileName: "photo.jpg",
-            fileSize: "1.2 MB",
-        },
-        // Custom item — type is required
-        {
-            type: "custom" as const,
-            itemLabel: "PDF",
-            thumbnailSrc: "https://example.com/pdf-thumb.svg",
-            renderContent: () => (
-                <iframe
-                    src="https://example.com/document.pdf"
-                    title="PDF preview"
-                    style={{ width: "100%", height: "100%", border: "none" }}
-                />
-            ),
-        },
-    ];
-
-    const handleDelete = (item, index) => {
-        // Remove the item from your state; the delete button only appears
-        // because onDelete is provided.
-        removeItem(index);
-    };
-
-    return (
-        <>
-            <button onClick={() => setShow(true)}>View files</button>
-            <FullscreenImageCarousel
-                show={show}
-                items={items}
-                onClose={() => setShow(false)}
-                onDelete={handleDelete} // omit to hide delete button
-                showFirstAndLastNav
-            />
-        </>
-    );
-};
-```
-
-## Props
-
-| Prop                     | Type                                                               | Default    | Description                                                                               |
-| ------------------------ | ------------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------- |
-| `show` \*                | `boolean`                                                          | `false`    | Toggles the visibility of the Modal                                                       |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                               | —          | List of carousel items                                                                    |
-| `animationFrom`          | `"top" \| "bottom" \| "left" \| "right"`                           | `"bottom"` | The animation direction the Modal will appear from                                        |
-| `zIndex`                 | `number`                                                           | —          | Custom z-index for modal stacking                                                         |
-| `initialActiveItemIndex` | `number`                                                           | `0`        | The initial image that will be displayed                                                  |
-| `hideThumbnail`          | `boolean`                                                          | —          | Specifies if the bottom thumbnail row is visible                                          |
-| `hideNavigation`         | `boolean`                                                          | —          | Specifies if the left and right navigation buttons are visible                            |
-| `hideCounter`            | `boolean`                                                          | —          | Specifies if the pagination counter pill is visible                                       |
-| `hideMagnifier`          | `boolean`                                                          | —          | Specifies if the magnifier/zoom button is visible                                         |
-| `onDelete`               | `(item: FullscreenImageCarouselItemProps, index: number) => void`  | —          | Called when the delete button is clicked; showing the button requires providing this prop |
-| `onClose`                | `() => void`                                                       | —          | Called when the overlay is dismissed via close button or Esc key                          |
-| `insets`                 | `{ top?: number; bottom?: number; left?: number; right?: number }` | —          | Safe-area insets from viewport edges                                                      |
-
-`*` = required
-
-## FullscreenImageCarouselItemProps (shared)
-
-| Prop       | Type     | Default | Description                                      |
-| ---------- | -------- | ------- | ------------------------------------------------ |
-| `fileName` | `string` | —       | File name displayed in the info bar at the top   |
-| `fileSize` | `string` | —       | Pre-formatted file size string (e.g. `"2.4 MB"`) |
-
-## FullscreenImageCarouselImageItemProps
-
-| Prop           | Type      | Default | Description                                   |
-| -------------- | --------- | ------- | --------------------------------------------- |
-| `type`         | `"image"` | —       | Discriminant; may be omitted for image items  |
-| `src` \*       | `string`  | —       | The image src                                 |
-| `alt`          | `string`  | —       | Descriptive text for screen readers           |
-| `thumbnailSrc` | `string`  | —       | Thumbnail src; falls back to `src` if omitted |
-
-## FullscreenImageCarouselCustomItemProps
-
-| Prop               | Type                    | Default | Description                                  |
-| ------------------ | ----------------------- | ------- | -------------------------------------------- |
-| `type` \*          | `"custom"`              | —       | Discriminant; must be `"custom"`             |
-| `renderContent` \* | `() => React.ReactNode` | —       | Custom render prop for the full slide area   |
-| `thumbnailSrc`     | `string`                | —       | Thumbnail src; shows placeholder if omitted  |
-| `itemLabel`        | `string`                | —       | Label describing content type (e.g. `"PDF"`) |
-
-## Rules
-
--   Always provide `show` and `items` — both are required.
--   Always wire `onClose` to set `show` to `false`; the component does not close itself.
--   Do not reorder the `items` array while a delete is in flight.
--   The delete button only appears when `onDelete` is provided — omit the prop to hide the button entirely.
-
-## Anti-patterns
-
--   Do not use for inline image galleries — this component renders as a fullscreen modal overlay.
diff --git a/docs/skills/fds-build/resources/v3/components/histogram-slider.md b/docs/skills/fds-build/resources/v3/components/histogram-slider.md
deleted file mode 100644
index f05018847b..0000000000
--- a/docs/skills/fds-build/resources/v3/components/histogram-slider.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# HistogramSlider
-
-Import: `import { HistogramSlider } from "@lifesg/react-design-system/histogram-slider"`
-
-A range slider with a histogram distribution chart above it — used in filter panels where showing the value distribution helps users pick a range (e.g. price range, age range).
-
-## Props
-
-| Prop               | Type                                | Default | Description                                                  |
-| ------------------ | ----------------------------------- | ------- | ------------------------------------------------------------ |
-| `bins`             | `HistogramBinProps[]`               | `[]`    | Histogram data — array of `{ count, minValue }` objects      |
-| `interval`         | `number`                            | —       | **Required.** Width of each bin (e.g. `10` for 0–10, 10–20…) |
-| `value`            | `[number, number]`                  | —       | Selected range as `[start, end]`                             |
-| `onChange`         | `(value: [number, number]) => void` | —       | Fires on every drag movement                                 |
-| `onChangeEnd`      | `(value: [number, number]) => void` | —       | Fires when thumb is released — use for API calls             |
-| `disabled`         | `boolean`                           | `false` | Disables interaction                                         |
-| `readOnly`         | `boolean`                           | `false` | Display only — no interaction                                |
-| `showRangeLabels`  | `boolean`                           | —       | Show min/max value labels below the slider                   |
-| `rangeLabelPrefix` | `string`                            | —       | Prefix for range labels (e.g. `"$"`)                         |
-| `rangeLabelSuffix` | `string`                            | —       | Suffix for range labels (e.g. `" km"`)                       |
-| `renderRangeLabel` | `(value: number) => ReactNode`      | —       | Custom range label renderer — overrides prefix/suffix        |
-| `renderEmptyView`  | `() => ReactNode`                   | —       | Renders when `bins` is empty                                 |
-| `ariaLabels`       | `[string, string]`                  | —       | Accessible labels for `[minThumb, maxThumb]`                 |
-| `aria-labelledby`  | `string`                            | —       | ID of an external label element                              |
-| `aria-describedby` | `string`                            | —       | ID of an external description element                        |
-| `data-testid`      | `string`                            | —       | Test identifier                                              |
-
-## HistogramBinProps
-
-| Prop       | Type     | Description                                         |
-| ---------- | -------- | --------------------------------------------------- |
-| `count`    | `number` | Number of items in this bin — determines bar height |
-| `minValue` | `number` | Starting value of this bin                          |
-
-## Rules
-
--   `onChange` fires continuously during drag — do not put API calls here; use `onChangeEnd`.
--   `interval` must match the gap between `minValue` of consecutive bins.
--   Always provide `ariaLabels` or `aria-labelledby` for accessibility.
--   Pair with `Filter` in a filter sidebar — `HistogramSlider` is not a `Form.*` component and does not use `label`/`errorMessage`.
diff --git a/docs/skills/fds-build/resources/v3/components/icon-button.md b/docs/skills/fds-build/resources/v3/components/icon-button.md
deleted file mode 100644
index 290d9a80a0..0000000000
--- a/docs/skills/fds-build/resources/v3/components/icon-button.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# IconButton
-
-> **Not available in v4.** If you are building for v4, do not use this component.
-
-Import: `import { IconButton } from "@lifesg/react-design-system/icon-button"`
-
-## Props
-
-| Prop                    | Type                                      | Default     | Description                          |
-| ----------------------- | ----------------------------------------- | ----------- | ------------------------------------ |
-| `data-testid`           | `string`                                  | —           | Test identifier of the component     |
-| `styleType`             | `"primary"` \| `"secondary"` \| `"light"` | `"primary"` | Visual style of the button           |
-| `sizeType`              | `"large"` \| `"default"` \| `"small"`     | `"default"` | Size of the button                   |
-| `focusableWhenDisabled` | `boolean`                                 | `false`     | Keeps button focusable when disabled |
-
-Also inherits all props from `HTMLButtonElement` (e.g. `disabled`, `onClick`, `aria-label`, `children`).
-
-## Rules
-
--   `aria-label` is required on every `IconButton` — icon-only buttons have no visible text for screen readers.
--   Pass the icon component as `children`.
-
-## Anti-patterns
-
--   Omitting `aria-label` — icon-only buttons are inaccessible without it.
diff --git a/docs/skills/fds-build/resources/v3/components/image-button.md b/docs/skills/fds-build/resources/v3/components/image-button.md
deleted file mode 100644
index 9258796aad..0000000000
--- a/docs/skills/fds-build/resources/v3/components/image-button.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# ImageButton
-
-Import: `import { ImageButton } from "@lifesg/react-design-system/image-button"`
-
-## Props
-
-Inherits all props from `HTMLButtonElement`.
-
-| Prop                    | Type      | Default | Description                              |
-| ----------------------- | --------- | ------- | ---------------------------------------- |
-| `imgSrc`                | `string`  | —       | Image source to be rendered              |
-| `selected`              | `boolean` | —       | Shows the selected state                 |
-| `error`                 | `boolean` | —       | Shows the error state                    |
-| `focusableWhenDisabled` | `boolean` | `false` | Keeps the button focusable when disabled |
diff --git a/docs/skills/fds-build/resources/v3/components/input.md b/docs/skills/fds-build/resources/v3/components/input.md
deleted file mode 100644
index 4810f1eb19..0000000000
--- a/docs/skills/fds-build/resources/v3/components/input.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Input
-
-Import: `import { Input } from "@lifesg/react-design-system/input"`
-
-## When to use
-
-Use `Input` for standalone inputs that do not need a label or error message — search bars, inline editing, filter fields, or composition contexts where the form layout is provided externally. For all labelled form fields with validation messages, use `Form.Input` instead.
-
-## Variants
-
-| `styleType`            | When to use                                                                                                      |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `"bordered"` (default) | Standard standalone input — provides clear affordance                                                            |
-| `"no-border"`          | Inline editing or search bars embedded in headers/toolbars where a border would conflict with the surrounding UI |
-
-## Props
-
-| Prop          | Type                          | Default      | Description                                                         |
-| ------------- | ----------------------------- | ------------ | ------------------------------------------------------------------- |
-| `spacing`     | `number`                      | —            | Number of characters before a space is inserted — `type="tel"` only |
-| `error`       | `boolean`                     | —            | Show error state styling                                            |
-| `allowClear`  | `boolean`                     | `false`      | Show clear icon button inside the field                             |
-| `onClear`     | `() => void`                  | —            | Called when clear icon is clicked                                   |
-| `styleType`   | `"no-border"` \| `"bordered"` | `"bordered"` | Border style variant                                                |
-| `data-testid` | `string`                      | —            | Test identifier for the component                                   |
-
-Also inherits all props from `HTMLInputElement` — including `type`, `value`, `onChange`, `placeholder`, `disabled`, `readOnly`, `maxLength`, etc.
-
-## Rules
-
--   Use `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
--   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
--   Use `allowClear` for search inputs and optional fields; pair with `onClear` to reset the controlled value.
--   Set `error={true}` to communicate an invalid state visually — provide a separate error message element in the surrounding layout.
--   Use `styleType="no-border"` only when the surrounding container or background provides sufficient visual separation.
--   `Input` is the bare input field with no label or error message wrapper. Use `Form.Input` when a label or validation message is needed.
--   `spacing` only has effect when `type="tel"`.
--   `styleType="no-border"` removes the visible border — use only when the surrounding context provides sufficient visual distinction.
--   `error` drives error-state styling only; there is no built-in error message — pair with external error text if needed.
-
-## Anti-patterns
-
--   Do not use `Input` inside a form that needs labels or validation messages — use `Form.Input`.
--   Do not use `spacing` with input types other than `"tel"`.
--   Do not rely on `Input` alone to surface error messages — it has no built-in error text slot.
diff --git a/docs/skills/fds-build/resources/v3/components/language-switcher.md b/docs/skills/fds-build/resources/v3/components/language-switcher.md
deleted file mode 100644
index bf6b2852ca..0000000000
--- a/docs/skills/fds-build/resources/v3/components/language-switcher.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# LanguageSwitcher
-
-Import: `import { LanguageSwitcher } from "@lifesg/react-design-system/language-switcher"`
-
-## Props
-
-| Prop               | Type                                       | Default      | Description                                       |
-| ------------------ | ------------------------------------------ | ------------ | ------------------------------------------------- |
-| `variant`          | `"dropdown" \| "link-container"`           | `"dropdown"` | The display variant of the language switcher      |
-| `className`        | `string`                                   | —            | The className of the component for custom styling |
-| `data-testid`      | `string`                                   | —            | The test identifier of the component              |
-| `selectedLanguage` | `"en" \| "zh" \| "ms" \| "ta"`             | `"en"`       | The currently selected language code              |
-| `onSelectLanguage` | `(language: LanguageSwitcherCode) => void` | —            | Called when a language is selected                |
-
-## Rules
-
--   `LanguageSwitcherCode` is the union of supported language codes: `"en" | "zh" | "ms" | "ta"`.
diff --git a/docs/skills/fds-build/resources/v3/components/layout.md b/docs/skills/fds-build/resources/v3/components/layout.md
deleted file mode 100644
index 40cccdca8b..0000000000
--- a/docs/skills/fds-build/resources/v3/components/layout.md
+++ /dev/null
@@ -1,138 +0,0 @@
-# Layout
-
-Import: `import { Layout } from "@lifesg/react-design-system/layout"`
-
-## Composition
-
-```
-Layout.Container type="grid"        ← responsive 12-col grid (desktop) / 8-col (mobile)
-├── Layout.ColDiv xsCols lgCols     ← column span — always set xsCols
-├── Layout.ColDiv xsCols lgCols
-└── Layout.ColDiv xsCols lgCols
-
-Layout.Container type="flex"        ← horizontal flexbox row
-└── {children}
-
-Layout.Container type="flex-column" ← vertical flexbox column
-└── {children}
-```
-
-`Layout.Section` and `Layout.Content` share the same props as `Layout.Container` and can be used in place of it for semantic HTML structure. Never nest `Layout.Container` inside another `Layout.Container`. Always set `xsCols` on every `Layout.ColDiv` — never set only `lgCols`.
-
--   `Layout.ColDiv` — responsive grid column div
-
-## Usage
-
-```tsx
-import { Layout } from "@lifesg/react-design-system/layout";
-
-<Layout.Container type="grid">
-    <Layout.ColDiv xsCols={8} lgCols={6}>
-        Content
-    </Layout.ColDiv>
-</Layout.Container>;
-```
-
-| `type`          | Use case                         |
-| --------------- | -------------------------------- |
-| `"grid"`        | Responsive column grid (default) |
-| `"flex"`        | Horizontal flexbox layout        |
-| `"flex-column"` | Vertical flexbox layout          |
-
-## Breakpoints
-
-| Breakpoint | Min width | Columns | Gutter | Device                |
-| ---------- | --------- | ------- | ------ | --------------------- |
-| `xxs`      | 0px       | 8       | 16px   | Smallest mobile       |
-| `xs`       | 321px     | 8       | 16px   | Small mobile          |
-| `sm`       | 376px     | 8       | 16px   | Mobile                |
-| `md`       | 481px     | 8       | 16px   | Large mobile / tablet |
-| `lg`       | 769px     | 12      | 32px   | Desktop               |
-| `xl`       | 1201px    | 12      | 32px   | Large desktop         |
-| `xxl`      | 1441px    | 12      | 32px   | Extra-large           |
-
-### Common column widths
-
-| Use case                             | `xsCols` | `lgCols` | `xlCols` |
-| ------------------------------------ | -------- | -------- | -------- |
-| Full width                           | 8        | 12       | —        |
-| Full width (form progress indicator) | 12       | 12       | —        |
-| Narrow content (forms)               | 12       | 9        | 8        |
-| Half-width (2-up cards)              | 8        | 6        | —        |
-| Third-width (3-up cards)             | 8        | 4        | —        |
-| Quarter-width (4-up metrics)         | 8        | 6        | 3        |
-| Sidebar                              | 8        | 3        | —        |
-| Main + sidebar main                  | 8        | 9        | —        |
-
-## Responsive styles
-
-Use `MediaQuery` for media queries in styled-components — not `Breakpoint`. `Breakpoint` contains raw numbers only; `MediaQuery` produces the actual `@media` string.
-
-```tsx
-import { MediaQuery, Spacing } from "@lifesg/react-design-system/theme";
-import styled from "styled-components";
-
-const ResponsiveDiv = styled.div`
-    padding: ${Spacing["spacing-16"]};
-
-    @media ${MediaQuery.MinWidth.lg} {
-        padding: ${Spacing["spacing-32"]};
-    }
-`;
-```
-
-| Token                    | Query type          | When it applies                  |
-| ------------------------ | ------------------- | -------------------------------- |
-| `MediaQuery.MinWidth.md` | `min-width: 481px`  | md and up (tablet+)              |
-| `MediaQuery.MinWidth.lg` | `min-width: 769px`  | lg and up (desktop+)             |
-| `MediaQuery.MaxWidth.md` | `max-width: 768px`  | md and below (mobile only)       |
-| `MediaQuery.MaxWidth.lg` | `max-width: 1200px` | lg and below (non-large-desktop) |
-
-Design mobile-first — define base styles for mobile, then override with `MinWidth` for larger screens.
-
-## Props
-
-### Layout.Container / Layout.Section / Layout.Content
-
-All three extend `React.HTMLAttributes<HTMLDivElement>`.
-
-| Prop          | Type                                | Default  | Description                                                                                                         |
-| ------------- | ----------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
-| `children`    | `React.ReactNode`                   | —        | Child content                                                                                                       |
-| `type`        | `"flex" \| "flex-column" \| "grid"` | `"flex"` | Display style; use `"flex-column"` for standard vertical page content, `"grid"` for the responsive 12-column layout |
-| `stretch`     | `boolean`                           | —        | Stretch to full viewport height                                                                                     |
-| `data-testid` | `string`                            | —        | Test identifier                                                                                                     |
-
-`Layout.Section` and `Layout.Content` share the same interface as `Layout.Container`.
-
-### Layout.ColDiv
-
-Extends `React.HTMLAttributes<HTMLDivElement>`.
-
-| Prop          | Type                         | Default | Description                         |
-| ------------- | ---------------------------- | ------- | ----------------------------------- |
-| `xxsCols`     | `number \| [number, number]` | —       | Columns at xxs breakpoint (≥0px)    |
-| `xsCols`      | `number \| [number, number]` | —       | Columns at xs breakpoint (≥321px)   |
-| `smCols`      | `number \| [number, number]` | —       | Columns at sm breakpoint (≥376px)   |
-| `mdCols`      | `number \| [number, number]` | —       | Columns at md breakpoint (≥481px)   |
-| `lgCols`      | `number \| [number, number]` | —       | Columns at lg breakpoint (≥769px)   |
-| `xlCols`      | `number \| [number, number]` | —       | Columns at xl breakpoint (≥1201px)  |
-| `xxlCols`     | `number \| [number, number]` | —       | Columns at xxl breakpoint (≥1441px) |
-| `data-testid` | `string`                     | —       | Test identifier                     |
-
-Array form `[startCol, endCol]` specifies explicit grid line positions.
-
-## Rules
-
--   Do not use CSS modules or plain CSS/SCSS — styled-components only.
--   Use `MediaQuery.MinWidth.*` for responsive styles — never `Breakpoint.*` or hardcoded pixel breakpoints.
--   Use Spacing tokens for padding and margins — never hardcode pixel values.
--   Prefix transient styled-component props with `$` to prevent DOM forwarding (e.g. `$variant`).
-
-Grid rules:
-
--   Always use `type="grid"` on Container for responsive column layouts.
--   Always specify `xsCols` on ColDiv — mobile-first; never only `lgCols`.
--   Max `xsCols` is 8 (mobile/tablet), max `lgCols` is 12 (desktop).
--   Never nest `Layout.Container` inside another `Layout.Container`.
--   A column span applies to all larger viewports until overridden.
diff --git a/docs/skills/fds-build/resources/v3/components/link-list.md b/docs/skills/fds-build/resources/v3/components/link-list.md
deleted file mode 100644
index d93ef99f80..0000000000
--- a/docs/skills/fds-build/resources/v3/components/link-list.md
+++ /dev/null
@@ -1,89 +0,0 @@
-# LinkList
-
-Import: `import { LinkList } from "@lifesg/react-design-system/link-list"`
-
-## When to use
-
-Use to present a set of related links — related articles, resources, or quick-access shortcuts. Use `style="small"` for compact contexts such as sidebars or footnotes.
-
-## Sub-components
-
-### LinkListItemProps
-
-| Prop                   | Type                                                   | Default | Description                                        |
-| ---------------------- | ------------------------------------------------------ | ------- | -------------------------------------------------- |
-| `title`                | `string`                                               | —       | Link label — required                              |
-| `description`          | `string`                                               | —       | First-level supporting text below the title        |
-| `secondaryDescription` | `string`                                               | —       | Second-level supporting text below the description |
-| `options`              | `T`                                                    | —       | Custom properties to pass to the item              |
-| `onClick`              | `(event: React.MouseEvent<HTMLAnchorElement>) => void` | —       | Per-item click handler — overrides `onItemClick`   |
-| `data-testid`          | `string`                                               | —       | Test identifier for the item                       |
-
-Inherits `HTMLAnchorElement` attributes (e.g. `href`, `target`).
-
-### Custom labels
-
-| Prop       | Type     | Default       | Description                    |
-| ---------- | -------- | ------------- | ------------------------------ |
-| `viewMore` | `string` | `"View more"` | Label for the show-more button |
-| `viewLess` | `string` | `"View less"` | Label for the show-less button |
-
-## Variants
-
-| `style`     | Usage                                                  |
-| ----------- | ------------------------------------------------------ |
-| `"default"` | Standard size — use in main content areas              |
-| `"small"`   | Compact — use in sidebars, footnotes, or dense layouts |
-
-| `loadMode` | Usage                                                         |
-| ---------- | ------------------------------------------------------------- |
-| `"eager"`  | All items loaded upfront; use `maxShown` to collapse the list |
-| `"lazy"`   | Items fetched on demand; requires `loadMore` and `onLoadMore` |
-
-## Usage
-
-```tsx
-import { LinkList } from "@lifesg/react-design-system/link-list";
-
-<LinkList
-    items={[
-        {
-            title: "Apply for a grant",
-            description: "Find out if you qualify.",
-            href: "/grants/apply",
-        },
-        { title: "Check application status", href: "/grants/status" },
-        { title: "Download forms", href: "/grants/forms" },
-    ]}
-    maxShown={2}
-/>;
-```
-
-## Props
-
-| Prop           | Type                                                                               | Default     | Description                                       |
-| -------------- | ---------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |
-| `items`        | `LinkListItemProps<T>[]`                                                           | —           | Array of link items — required                    |
-| `style`        | `"default"` \| `"small"`                                                           | `"default"` | Text size style                                   |
-| `loadMode`     | `"eager"` \| `"lazy"`                                                              | `"eager"`   | Loading mode for items                            |
-| `maxShown`     | `number`                                                                           | —           | Max items shown before collapse (eager mode only) |
-| `loadMore`     | `boolean`                                                                          | —           | Whether more items can be lazy-loaded (lazy mode) |
-| `onLoadMore`   | `() => void \| Promise<void>`                                                      | —           | Callback when "View more" is clicked (lazy mode)  |
-| `onItemClick`  | `(item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement>) => void` | —           | Component-level click handler for all items       |
-| `customLabels` | `object`                                                                           | —           | Override "View more" / "View less" button labels  |
-| `className`    | `string`                                                                           | —           | Class selector                                    |
-| `data-testid`  | `string`                                                                           | —           | Test identifier                                   |
-
-## Rules
-
--   Use `maxShown` when the list has many items to avoid overwhelming the user on first load (eager mode).
--   In `"lazy"` mode, both `loadMore` and `onLoadMore` are required.
--   `onItemClick` applies to all items; per-item `onClick` in `LinkListItemProps` overrides it for that item.
--   Use per-item `onClick` when individual items need different handling; use `onItemClick` for a uniform handler across all items.
--   Use `description` to give users enough context to choose the right link without clicking.
-
-## Anti-patterns
-
--   Using lazy mode without providing `onLoadMore` — the "View more" button will be non-functional.
--   Omitting `description` when link titles are ambiguous.
--   Using LinkList for non-link content — use a list or table instead.
diff --git a/docs/skills/fds-build/resources/v3/components/local-nav.md b/docs/skills/fds-build/resources/v3/components/local-nav.md
deleted file mode 100644
index fb02440e76..0000000000
--- a/docs/skills/fds-build/resources/v3/components/local-nav.md
+++ /dev/null
@@ -1,95 +0,0 @@
-# LocalNav
-
-Import: `import { LocalNavMenu, LocalNavDropdown } from "@lifesg/react-design-system/local-nav"`
-
-## When to use
-
-Use to let users navigate between sections on the same page (in-page navigation). Two components exist for different breakpoints — use both together for full responsive coverage.
-
-## Sub-components
-
-`LocalNavMenu`, `LocalNavDropdown`
-
-## Variants
-
-| Component          | Viewport          | Behaviour                                                              |
-| ------------------ | ----------------- | ---------------------------------------------------------------------- |
-| `LocalNavMenu`     | Desktop           | Vertical link list fixed to the left of page content, sticky on scroll |
-| `LocalNavDropdown` | Tablet and mobile | Renders inline, then sticks to top of viewport after scroll            |
-
-## Usage
-
-```tsx
-import {
-    LocalNavMenu,
-    LocalNavDropdown,
-} from "@lifesg/react-design-system/local-nav";
-
-const navItems = [
-    { title: "Overview", id: "overview" },
-    { title: "Eligibility", id: "eligibility" },
-    { title: "How to apply", id: "how-to-apply" },
-];
-
-{
-    /* Desktop */
-}
-<LocalNavMenu
-    items={navItems}
-    selectedItemIndex={activeIndex}
-    onNavItemSelect={(e, item, index) => {}}
-/>;
-
-{
-    /* Mobile / tablet */
-}
-<LocalNavDropdown
-    items={navItems}
-    selectedItemIndex={activeIndex}
-    defaultLabel="Jump to section"
-    onNavItemSelect={(e, item, index) => {}}
-/>;
-```
-
-## Props
-
-### Shared props (both components)
-
-| Prop                | Type                                                                                                  | Default | Description                          |
-| ------------------- | ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------ |
-| `items`             | `LocalNavItemProps[]`                                                                                 | —       | Nav items                            |
-| `selectedItemIndex` | `number`                                                                                              | —       | Index of the currently active item   |
-| `onNavItemSelect`   | `(e: React.MouseEvent \| React.KeyboardEvent, item: LocalNavItemProps, index: number) => void`        | —       | Called when an item is selected      |
-| `renderItem`        | `(item: LocalNavItemProps, renderProps: { selected: boolean, stickied: boolean }) => React.ReactNode` | —       | Custom render function for nav items |
-| `id`                | `string`                                                                                              | —       | Unique identifier                    |
-| `className`         | `string`                                                                                              | —       | Class selector                       |
-| `data-testid`       | `string`                                                                                              | —       | Test identifier                      |
-
-### LocalNavDropdown (additional props)
-
-| Prop           | Type     | Default | Description                                             |
-| -------------- | -------- | ------- | ------------------------------------------------------- |
-| `defaultLabel` | `string` | —       | Label shown before any item is selected — **required**  |
-| `stickyOffset` | `number` | —       | Top offset in pixels when the dropdown sticks on scroll |
-
-### LocalNavItemProps
-
-| Prop    | Type                        | Description                        |
-| ------- | --------------------------- | ---------------------------------- |
-| `title` | `string \| React.ReactNode` | Display label — **required**       |
-| `id`    | `string`                    | Unique identifier for the nav item |
-
-## Rules
-
--   Use `LocalNavMenu` on desktop and `LocalNavDropdown` on tablet/mobile — render both and show/hide with CSS breakpoints.
--   Always implement scroll-spy: update `selectedItemIndex` as the user scrolls to keep the active item in sync with the visible section. This is not automatic.
--   Place `LocalNavMenu` on the left side of the page content area — not above it.
--   Set `stickyOffset` on `LocalNavDropdown` equal to the height of the fixed Navbar so the dropdown does not overlap it when sticky.
--   Keep item labels short — long labels cause overflow.
--   `defaultLabel` is required on `LocalNavDropdown` — it is the placeholder shown before any item is selected.
-
-## Anti-patterns
-
--   Do not use `LocalNavMenu` on tablet or mobile — use `LocalNavDropdown` instead.
--   Do not omit scroll-spy logic — without it, `selectedItemIndex` will not reflect the current section.
--   Do not place `LocalNavMenu` above the content — it must be a left sidebar.
diff --git a/docs/skills/fds-build/resources/v3/components/masthead.md b/docs/skills/fds-build/resources/v3/components/masthead.md
deleted file mode 100644
index 46b67fdf42..0000000000
--- a/docs/skills/fds-build/resources/v3/components/masthead.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Masthead
-
-Import: `import { Masthead } from "@lifesg/react-design-system/masthead"`
-
-## Props
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | `false` | Stretch to the maximum width of the screen, with fixed padding |
-
-## Rules
-
--   No mandatory props.
--   `Masthead` is typically included via the `Navbar` `masthead` prop — use this standalone component only when rendering the masthead outside a Navbar context.
diff --git a/docs/skills/fds-build/resources/v3/components/menu.md b/docs/skills/fds-build/resources/v3/components/menu.md
deleted file mode 100644
index 51bd049f72..0000000000
--- a/docs/skills/fds-build/resources/v3/components/menu.md
+++ /dev/null
@@ -1,115 +0,0 @@
-# Menu
-
-Import: `import { Menu } from "@lifesg/react-design-system/menu"`
-
-## When to use
-
-Use when a trigger element (button, avatar, nav link) should open a floating dropdown with a list of actions or links.
-
-Common use cases:
-
--   Avatar / user account menu in authenticated dashboards
--   Navbar link dropdown for sub-navigation
-
-## Sub-components
-
-`Menu`, `Menu.Content`, `Menu.Section`, `Menu.Item`, `Menu.Link`
-
-## Variants
-
-| Use case          | Structure                                                                                                                   |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| User account menu | First section: name + email as `Menu.Item`. Subsequent sections: `Menu.Link` for profile/settings, `Menu.Item` for sign out |
-| Nav link dropdown | Single `Menu.Section` with `Menu.Link` items                                                                                |
-| Action menu       | `Menu.Section` with `Menu.Item` elements and optional `label`                                                               |
-
-## Usage
-
-```tsx
-import { Menu } from "@lifesg/react-design-system/menu";
-import { Button } from "@lifesg/react-design-system/button";
-
-<Menu
-    menuContent={
-        <Menu.Content>
-            <Menu.Section showDivider={false}>
-                <Menu.Link href="/profile">Profile</Menu.Link>
-                <Menu.Link href="/settings">Settings</Menu.Link>
-            </Menu.Section>
-            <Menu.Section>
-                <Menu.Item label="Sign out" onClick={() => {}} />
-            </Menu.Section>
-        </Menu.Content>
-    }
->
-    <Button.Default styleType="secondary">Account</Button.Default>
-</Menu>;
-```
-
-## Props
-
-### Menu
-
-Inherits `PopoverV2TriggerProps` (except `popoverContent`), plus:
-
-| Prop          | Type                                                                                                                                                                 | Default          | Description                                         |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | --------------------------------------------------- |
-| `menuContent` | `Menu.Content`                                                                                                                                                       | —                | The popover panel — **required**                    |
-| `position`    | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | `"bottom-start"` | Visual position of the menu relative to its trigger |
-| `data-testid` | `string`                                                                                                                                                             | `"menu"`         | Test identifier                                     |
-
-### Menu.Content
-
-Inherits `HTMLAttributes<HTMLDivElement>`, plus:
-
-| Prop          | Type                                                    | Default          | Description                                                   |
-| ------------- | ------------------------------------------------------- | ---------------- | ------------------------------------------------------------- |
-| `children`    | `Menu.Section \| Menu.Section[]`                        | —                | One or more `Menu.Section` elements — **required**            |
-| `overflow`    | `"visible" \| "hidden" \| "clip" \| "scroll" \| "auto"` | —                | Controls content overflow                                     |
-| `maxHeight`   | `number`                                                | —                | Max height in pixels; overflow behavior applies when exceeded |
-| `data-testid` | `string`                                                | `"menu-content"` | Test identifier                                               |
-
-### Menu.Section
-
-Inherits `HTMLAttributes<HTMLDivElement>`, plus:
-
-| Prop          | Type                                                   | Default          | Description                        |
-| ------------- | ------------------------------------------------------ | ---------------- | ---------------------------------- |
-| `children`    | `Menu.Item \| Menu.Link \| (Menu.Item \| Menu.Link)[]` | —                | Menu items or links — **required** |
-| `label`       | `string`                                               | —                | Optional section heading           |
-| `showDivider` | `boolean`                                              | `true`           | Show a divider above the section   |
-| `data-testid` | `string`                                               | `"menu-section"` | Test identifier                    |
-
-### Menu.Item
-
-Inherits `HTMLAttributes<HTMLLIElement>`, plus:
-
-| Prop          | Type                                           | Default       | Description                                                                      |
-| ------------- | ---------------------------------------------- | ------------- | -------------------------------------------------------------------------------- |
-| `label`       | `string`                                       | —             | Primary text for the menu item                                                   |
-| `subLabel`    | `string`                                       | —             | Secondary text shown below the label                                             |
-| `data-testid` | `string`                                       | `"menu-item"` | Test identifier                                                                  |
-| `onClick`     | `(e: React.MouseEvent<HTMLLIElement>) => void` | —             | Called when the item is clicked — inherited from `HTMLAttributes<HTMLLIElement>` |
-
-### Menu.Link
-
-Inherits `HTMLAttributes<HTMLAnchorElement>`, plus:
-
-| Prop          | Type     | Default       | Description     |
-| ------------- | -------- | ------------- | --------------- |
-| `data-testid` | `string` | `"menu-link"` | Test identifier |
-
-## Rules
-
--   `Menu` wraps a trigger element as its child — the trigger can be any element (e.g. `Avatar`, `Button`, `NavbarLink`).
--   Pass `Menu.Content` as the `menuContent` prop — not as a child of `Menu`.
--   Use `Menu.Link` for navigation (href-based); use `Menu.Item` for in-page actions (onClick-based).
--   Use `Menu.Section` with `showDivider` to visually separate unrelated groups of actions.
--   For user account menus, always show the user's name and email as the first section.
--   Use `position` to control which side of the trigger the menu appears on; default `"bottom-start"` suits most cases.
-
-## Anti-patterns
-
--   Do not pass `Menu.Content` as a child of `Menu` — it must be passed as `menuContent`.
--   Do not mix navigation links and action items in the same `Menu.Section` without a divider.
--   Do not use `Menu.Item` for links that navigate to a new page — use `Menu.Link` instead.
diff --git a/docs/skills/fds-build/resources/v3/components/modal.md b/docs/skills/fds-build/resources/v3/components/modal.md
deleted file mode 100644
index 4b79a54efd..0000000000
--- a/docs/skills/fds-build/resources/v3/components/modal.md
+++ /dev/null
@@ -1,114 +0,0 @@
-# Modal
-
-Import: `import { Modal } from "@lifesg/react-design-system/modal"`
-
-## When to use
-
-Use for focused interactions that interrupt the user's flow — confirmations, detail views, or short multi-field forms that do not warrant a new page.
-
-## Sub-components
-
-`Modal`, `Modal.Box`
-
-## Variants
-
-| Use case            | Notes                                                         |
-| ------------------- | ------------------------------------------------------------- |
-| Confirmation dialog | Title, description, and primary/secondary action buttons      |
-| Detail view         | Informational content with a close button                     |
-| Short form          | Minimal fields only; complex forms belong on a dedicated page |
-
-## Usage
-
-### Confirmation dialog
-
-```tsx
-import { useState } from "react";
-import { Modal } from "@lifesg/react-design-system/modal";
-import { Button } from "@lifesg/react-design-system/button";
-import { Text } from "@lifesg/react-design-system/text";
-
-const ConfirmDeleteModal = () => {
-    const [show, setShow] = useState(false);
-
-    const handleClose = () => setShow(false);
-
-    const handleConfirm = () => {
-        // perform action
-        setShow(false);
-    };
-
-    return (
-        <>
-            <Button.Default onClick={() => setShow(true)}>
-                Delete item
-            </Button.Default>
-
-            <Modal show={show} enableOverlayClick onOverlayClick={handleClose}>
-                <Modal.Box showCloseButton onClose={handleClose}>
-                    <div style={{ padding: "2rem" }}>
-                        <Text.H3 style={{ marginBottom: "0.5rem" }}>
-                            Delete this item?
-                        </Text.H3>
-                        <Text.Body style={{ marginBottom: "1.5rem" }}>
-                            This action cannot be undone.
-                        </Text.Body>
-                        <div style={{ display: "flex", gap: "1rem" }}>
-                            <Button.Default
-                                styleType="secondary"
-                                onClick={handleClose}
-                            >
-                                Cancel
-                            </Button.Default>
-                            <Button.Default onClick={handleConfirm}>
-                                Confirm
-                            </Button.Default>
-                        </div>
-                    </div>
-                </Modal.Box>
-            </Modal>
-        </>
-    );
-};
-```
-
-## Props
-
-### Modal
-
-| Prop                    | Type                                     | Default    | Description                                                                                                              |
-| ----------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `show`                  | `boolean`                                | —          | Controls visibility — **required**                                                                                       |
-| `children`              | `JSX.Element`                            | —          | Modal content; parent element must be a valid HTML element or component that forwards a ref. Fragments are not supported |
-| `animationFrom`         | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Slide-in direction                                                                                                       |
-| `enableOverlayClick`    | `boolean`                                | —          | Allow clicking the overlay to dismiss                                                                                    |
-| `onOverlayClick`        | `() => void`                             | —          | Called when the overlay is clicked; requires `enableOverlayClick: true`                                                  |
-| `zIndex`                | `number`                                 | —          | Custom z-index (useful for stacked modals)                                                                               |
-| `rootComponentId`       | `string`                                 | —          | ID of the element to portal the modal into; defaults to `<body>`                                                         |
-| `dismissKeyboardOnShow` | `boolean`                                | `true`     | Dismiss mobile keyboard when modal opens                                                                                 |
-
-### Modal.Box
-
-| Prop              | Type         | Default | Description                                       |
-| ----------------- | ------------ | ------- | ------------------------------------------------- |
-| `showCloseButton` | `boolean`    | `true`  | Show the close button (×) in the top-right corner |
-| `onClose`         | `() => void` | —       | Called when the close button is clicked           |
-
-## Rules
-
--   Always include `showCloseButton` on `Modal.Box` — the close button is the minimum required exit mechanism.
--   `Modal` handles the overlay and animation. Always nest `Modal.Box` (or a custom content container) inside `Modal`.
--   Fragments are not supported as direct children of `Modal`.
--   Content inside `Modal.Box` scrolls automatically when it exceeds the screen height.
--   Use `animationFrom="bottom"` for mobile-friendly sheet-style modals.
--   Optionally also allow overlay dismissal via `enableOverlayClick` + `onOverlayClick`.
--   Use Typography components for all text inside the modal — not raw HTML elements.
--   Keep modal content focused — one task or decision per modal.
--   Use illustrations (image above the title) for complex messages to reduce cognitive load; skip them for simple confirmations.
-
-## Anti-patterns
-
--   Do not use a Fragment as a direct child of `Modal` — use a valid HTML element or a component that forwards a ref.
--   Do not use modals for complex multi-step forms — navigate to a dedicated page instead.
--   Do not stack modals unless using `zIndex` to manage layering explicitly.
--   Do not omit `showCloseButton` — users must always have a way to exit the modal.
diff --git a/docs/skills/fds-build/resources/v3/components/navbar.md b/docs/skills/fds-build/resources/v3/components/navbar.md
deleted file mode 100644
index d469355d22..0000000000
--- a/docs/skills/fds-build/resources/v3/components/navbar.md
+++ /dev/null
@@ -1,203 +0,0 @@
-# Navbar
-
-Import: `import { Navbar } from "@lifesg/react-design-system/navbar"`
-
-## When to use
-
-Place at the top of every page. Required on all pages. Automatically collapses navigation items into a hamburger drawer on mobile.
-
-## Variants
-
-| `layout`    | When to use                                     |
-| ----------- | ----------------------------------------------- |
-| `"default"` | Centered content container — standard pages     |
-| `"stretch"` | Full-width content — must match Footer `layout` |
-
-## Usage
-
-### Complete Navbar with link items, a submenu, and an action button
-
-`NavItemProps` is a discriminated union on `itemType`. The default (no `itemType`) is a link item. Use `itemType: "component"` for custom elements like an avatar with a dropdown.
-
-```tsx
-import { useState } from "react";
-import { Navbar } from "@lifesg/react-design-system/navbar";
-
-const AppNavbar = () => {
-    const [selectedId, setSelectedId] = useState("home");
-
-    return (
-        <Navbar
-            masthead
-            selectedId={selectedId}
-            onItemClick={(item) => item.id && setSelectedId(item.id)}
-            items={{
-                desktop: [
-                    // itemType defaults to "link"
-                    {
-                        id: "home",
-                        children: "Home",
-                        href: "/",
-                    },
-                    {
-                        id: "guides",
-                        children: "Guides",
-                        href: "/guides",
-                        // subMenu items share the same shape as top-level link items
-                        subMenu: [
-                            {
-                                id: "guides-start",
-                                children: "Getting started",
-                                href: "/guides/start",
-                            },
-                            {
-                                id: "guides-api",
-                                children: "API reference",
-                                href: "/guides/api",
-                            },
-                        ],
-                    },
-                    {
-                        // itemType: "component" — renders arbitrary JSX; no href or id needed
-                        itemType: "component",
-                        children: <UserAvatar />,
-                    },
-                ],
-            }}
-            actionButtons={{
-                desktop: [
-                    {
-                        type: "button",
-                        args: { children: "Log in", styleType: "secondary" },
-                    },
-                ],
-            }}
-            resources={{
-                primary: { brandName: "MyService", logoSrc: "/logo.svg" },
-            }}
-        />
-    );
-};
-```
-
-Key points:
-
--   Omit `itemType` (or set `itemType: "link"`) for standard anchor items.
--   `subMenu` accepts the same `NavItemCommonProps` shape as top-level items.
--   `itemType: "component"` items take `children: JSX.Element`; they do not accept `id`, `href`, or `subMenu`.
--   `selectedId` matches against the `id` field of link items to highlight the active page.
-
-## Props
-
-### Navbar
-
-| Prop                        | Type                                        | Default                    | Description                                       |
-| --------------------------- | ------------------------------------------- | -------------------------- | ------------------------------------------------- |
-| `items`                     | `NavItemsProps<T>`                          | —                          | Navigation link items — **required**              |
-| `resources`                 | `NavbarResourcesProps`                      | —                          | Brand logos (primary and optional secondary)      |
-| `actionButtons`             | `NavbarActionButtonsProps`                  | —                          | Action buttons for desktop and optional mobile    |
-| `selectedId`                | `string`                                    | —                          | ID of the currently active navigation item        |
-| `compress`                  | `boolean`                                   | `false`                    | Display navbar in compressed height               |
-| `fixed`                     | `boolean`                                   | `true`                     | Fix navbar position to the top of the viewport    |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                   | `[]`                       | Methods that should not dismiss the mobile drawer |
-| `hideNavBranding`           | `boolean`                                   | `false`                    | Hide brand logos                                  |
-| `hideNavElements`           | `boolean`                                   | `false`                    | Hide links and action buttons                     |
-| `hideLinkIndicator`         | `boolean`                                   | `false`                    | Hide the selected link indicator                  |
-| `masthead`                  | `boolean`                                   | `true`                     | Render the government masthead above the navbar   |
-| `layout`                    | `"default" \| "stretch"`                    | `"default"`                | Layout type for navbar content                    |
-| `headerLabel`               | `string`                                    | `"Main navigation menu"`   | Accessible label for the navigation header        |
-| `drawerLabel`               | `string`                                    | `"Mobile navigation menu"` | Accessible label for the mobile drawer            |
-| `onBrandClick`              | `(type: BrandType) => void`                 | —                          | Called when a brand icon is clicked               |
-| `onItemClick`               | `(item: NavItemProps<T>) => void`           | —                          | Called when a navigation item is clicked          |
-| `onActionButtonClick`       | `(actionButton: NavbarButtonProps) => void` | —                          | Called when an action button is clicked           |
-| `id`                        | `string`                                    | —                          | Unique identifier                                 |
-| `data-testid`               | `string`                                    | —                          | Test identifier                                   |
-
-### NavItemsProps
-
-| Prop      | Type                | Default | Description                                              |
-| --------- | ------------------- | ------- | -------------------------------------------------------- |
-| `desktop` | `NavItemProps<T>[]` | —       | Nav items for desktop — **required**                     |
-| `mobile`  | `NavItemProps<T>[]` | —       | Nav items for mobile; falls back to `desktop` if omitted |
-
-### NavItemProps
-
-Union of `NavItemLinkProps<T>` and `NavItemComponentProps`.
-
-**NavItemLinkProps**
-
-| Prop       | Type                      | Description        |
-| ---------- | ------------------------- | ------------------ |
-| `itemType` | `"link"`                  | Link-type nav item |
-| `subMenu`  | `NavItemCommonProps<T>[]` | Sub-menu items     |
-
-**NavItemComponentProps**
-
-| Prop       | Type          | Description                              |
-| ---------- | ------------- | ---------------------------------------- |
-| `itemType` | `"component"` | Custom component nav item — **required** |
-| `children` | `JSX.Element` | Custom component to render               |
-
-### NavItemCommonProps
-
-Inherits `TypographyLinkProps`, plus:
-
-| Prop          | Type     | Description                             |
-| ------------- | -------- | --------------------------------------- |
-| `id`          | `string` | Unique identifier; used by `selectedId` |
-| `options`     | `T`      | Additional props passed to the nav item |
-| `data-testid` | `string` | Test identifier                         |
-
-### NavbarActionButtonsProps
-
-| Prop      | Type                  | Default | Description                                                   |
-| --------- | --------------------- | ------- | ------------------------------------------------------------- |
-| `desktop` | `NavbarButtonProps[]` | —       | Action buttons for desktop — **required**                     |
-| `mobile`  | `NavbarButtonProps[]` | —       | Action buttons for mobile; falls back to `desktop` if omitted |
-
-### NavbarButtonProps
-
-| Prop            | Type                                        | Default | Description                                                  |
-| --------------- | ------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `type`          | `"download" \| "button" \| "component"`     | —       | Button type — **required**                                   |
-| `args`          | `ButtonProps \| NavbarButtonComponentProps` | —       | Props for the button                                         |
-| `uncollapsible` | `boolean`                                   | —       | Keep visible on mobile instead of collapsing into the drawer |
-
-### NavbarResourcesProps
-
-| Prop        | Type                  | Default       | Description                                                       |
-| ----------- | --------------------- | ------------- | ----------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | theme default | Primary branding — omit entirely to use the theme's built-in logo |
-| `secondary` | `NavbarBrandingProps` | —             | Secondary branding                                                |
-
-### NavbarBrandingProps
-
-| Prop        | Type     | Description                    |
-| ----------- | -------- | ------------------------------ |
-| `brandName` | `string` | Brand name of the website      |
-| `logoSrc`   | `string` | Image source of the brand logo |
-
-## Rules
-
--   Always set `masthead` — all government services must display the masthead.
--   Always provide a meaningful `id` on each `NavItemCommonProps` item — used by `selectedId` to highlight the active page.
--   `items.desktop` is required; the component crashes without it.
--   `items.mobile` is optional — falls back to `desktop` if omitted.
--   `layout` must match the `Footer` `layout` prop; do not mix `"default"` and `"stretch"`.
--   Limit action buttons to 2–3 maximum.
--   Use SVG format for brand logos.
--   When using `fixed`, add corresponding top padding to page content to prevent overlap.
--   Set `uncollapsible: true` on action buttons that must remain visible on mobile (e.g. avatar).
--   Use `itemType: "component"` for custom nav elements such as an avatar with a `Menu` dropdown.
--   Pass `type: "component"` with `args: { render: <Element /> }` for custom action button elements.
--   `BrandType` is `"primary" | "secondary"` — passed to `onBrandClick`.
--   The `"download"` button type is pre-programmed for LifeSG purposes.
--   `NavbarButtonComponentProps` accepts a `render: JSX.Element` field for custom components.
-
-## Anti-patterns
-
--   Do not omit `masthead` — it is required for government compliance.
--   Do not supply a custom `resources.primary.logoSrc` unless the service has its own brand logo — omit `resources` to let the theme render its built-in logo.
--   Do not use `hideNavElements` as a default state — it is for special page states only (e.g. maintenance).
--   Do not use `fixed: false` unless the layout explicitly requires a non-fixed header.
--   Do not add more than 3 action buttons — the navbar becomes visually cluttered.
diff --git a/docs/skills/fds-build/resources/v3/components/notification-banner.md b/docs/skills/fds-build/resources/v3/components/notification-banner.md
deleted file mode 100644
index 3352c44733..0000000000
--- a/docs/skills/fds-build/resources/v3/components/notification-banner.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# NotificationBanner
-
-Import: `import { NotificationBanner } from "@lifesg/react-design-system/notification-banner"`
-
-## When to use
-
-Use for notices that must always be visible to the user — maintenance windows, policy changes, mandatory announcements. Unlike Toast, it does not auto-dismiss. Unlike Alert, it applies to the entire page, not a specific section.
-
-## Sub-components
-
--   `NotificationBanner.Link` — Inherits `TypographyLinkProps`. Use for links within banner content.
-
-## HOC
-
-```ts
-withNotificationBanner(data: NotificationContentAttributes[])
-```
-
-### NotificationContentAttributes
-
-| Prop              | Type                                       | Default | Description                                      |
-| ----------------- | ------------------------------------------ | ------- | ------------------------------------------------ |
-| `type`            | `"text"` \| `"link"`                       | —       | Type of content — required                       |
-| `content`         | `string`                                   | —       | Text content — required                          |
-| `otherAttributes` | `TypographyLinkProps` \| `TypographyProps` | —       | Additional props passed to the content component |
-
-## Usage
-
-```tsx
-import { NotificationBanner } from "@lifesg/react-design-system/notification-banner";
-
-<NotificationBanner dismissible sticky onDismiss={() => {}}>
-    Scheduled maintenance on 1 Feb 2026, 2–4 AM.{" "}
-    <NotificationBanner.Link href="/status">
-        View status
-    </NotificationBanner.Link>
-</NotificationBanner>;
-```
-
-## Props
-
-| Prop                 | Type                                                | Default | Description                                  |
-| -------------------- | --------------------------------------------------- | ------- | -------------------------------------------- |
-| `children`           | `string` \| `JSX.Element` \| `JSX.Element[]`        | —       | Banner content                               |
-| `dismissible`        | `boolean`                                           | —       | Show dismiss button                          |
-| `visible`            | `boolean`                                           | —       | Control visibility externally                |
-| `icon`               | `JSX.Element`                                       | —       | Icon displayed in the banner                 |
-| `sticky`             | `boolean`                                           | —       | Fix banner to top on scroll                  |
-| `onDismiss`          | `() => void`                                        | —       | Called when banner is dismissed              |
-| `onClick`            | `(event: React.MouseEvent<HTMLDivElement>) => void` | —       | Called when banner is clicked                |
-| `maxCollapsedHeight` | `number`                                            | —       | Maximum visible height of content in px      |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>`     | —       | Action button at the bottom of the component |
-
-## Rules
-
--   Place directly below the Navbar — above all page content.
--   Use for page-wide or system-wide notices only — not for section-specific messages.
--   Use `dismissible={false}` for mandatory notices users must not be able to dismiss.
--   Use `NotificationBanner.Link` for all links within the banner — renders with the external link indicator automatically.
--   Use `maxCollapsedHeight` for long notices to avoid overwhelming the layout.
--   Use the `withNotificationBanner` HOC for banner content driven from a backend or external data source.
-
-## Anti-patterns
-
--   Using NotificationBanner for section-specific messages — use Alert instead.
--   Using raw anchor tags inside banner content — use `NotificationBanner.Link`.
--   Placing the banner below page content — it must sit directly below the Navbar.
diff --git a/docs/skills/fds-build/resources/v3/components/pagination.md b/docs/skills/fds-build/resources/v3/components/pagination.md
deleted file mode 100644
index d244b6dbd3..0000000000
--- a/docs/skills/fds-build/resources/v3/components/pagination.md
+++ /dev/null
@@ -1,104 +0,0 @@
-# Pagination
-
-Import: `import { Pagination } from "@lifesg/react-design-system/pagination"`
-
-## When to use
-
-Use below lists or tables when content is split across multiple pages.
-
-## Usage
-
-### Basic pagination (1-based indexing)
-
-```tsx
-import { useState } from "react";
-import { Pagination } from "@lifesg/react-design-system/pagination";
-
-const ResultsList = () => {
-    const totalItems = 243;
-    const pageSize = 10;
-    // activePage is 1-based: page 1 is the first page, not page 0
-    const [activePage, setActivePage] = useState(1);
-
-    return (
-        <>
-            <MyResultsTable
-                items={results.slice(
-                    (activePage - 1) * pageSize,
-                    activePage * pageSize
-                )}
-            />
-            <Pagination
-                totalItems={totalItems}
-                pageSize={pageSize}
-                activePage={activePage}
-                onPageChange={(page) => setActivePage(page)} // page is 1-based
-                showFirstAndLastNav
-            />
-        </>
-    );
-};
-```
-
-### With page size changer
-
-`onPageSizeChange` receives `(page, pageSize)` — reset to page 1 when size changes.
-
-```tsx
-const [activePage, setActivePage] = useState(1);
-const [pageSize, setPageSize] = useState(10);
-
-<Pagination
-    totalItems={500}
-    pageSize={pageSize}
-    activePage={activePage}
-    onPageChange={(page) => setActivePage(page)}
-    onPageSizeChange={(page, size) => {
-        setPageSize(size);
-        setActivePage(page); // component resets to page 1 on size change
-    }}
-    showFirstAndLastNav
-    showPageSizeChanger
-/>;
-```
-
-## Props
-
-| Prop                  | Type                                       | Default        | Description                                                                            |
-| --------------------- | ------------------------------------------ | -------------- | -------------------------------------------------------------------------------------- |
-| `totalItems`          | `number`                                   | —              | Total number of items across all pages — **required**                                  |
-| `activePage`          | `number`                                   | —              | Currently active page (1-based) — **required**                                         |
-| `pageSize`            | `number`                                   | `10`           | Number of items per page                                                               |
-| `pageSizeOptions`     | `PageSizeItemProps<T>[]`                   | `[10, 20, 30]` | Options for the page size changer dropdown                                             |
-| `showFirstAndLastNav` | `boolean`                                  | `false`        | Show buttons to jump to the first and last pages                                       |
-| `showPageSizeChanger` | `boolean`                                  | `false`        | Show a page size changer dropdown (desktop only); selected option overrides `pageSize` |
-| `onPageChange`        | `(page: number) => void`                   | —              | Called when a page is selected                                                         |
-| `onPageSizeChange`    | `(page: number, pageSize: number) => void` | —              | Called when the page size changes                                                      |
-| `id`                  | `string`                                   | —              | Unique identifier                                                                      |
-| `className`           | `string`                                   | —              | Class selector                                                                         |
-| `data-testid`         | `string`                                   | —              | Test identifier                                                                        |
-
-## PageSizeItemProps
-
-| Prop    | Type     | Description                        |
-| ------- | -------- | ---------------------------------- |
-| `value` | `number` | Page size value                    |
-| `label` | `string` | Display label (e.g. `"10 / page"`) |
-
-## Rules
-
--   `activePage` is 1-based — the first page is `1`, not `0`.
--   Always provide `onPageChange` to update `activePage` when the user changes page.
--   Provide `onPageSizeChange` when `showPageSizeChanger` is enabled.
--   Always center-align pagination below the results list.
--   Place pagination below the results — never above.
--   When total pages exceed 7, the component automatically shows an ellipsis — no additional props needed.
--   The page size changer is only visible in the desktop viewport.
--   The selected option in the page size changer takes precedence over `pageSize`.
-
-## Anti-patterns
-
--   Do not use `showFirstAndLastNav` and `showPageSizeChanger` together unless the dataset is large enough to warrant both — avoid cluttering the interface with excessive controls.
--   Do not left- or right-align pagination.
--   Do not place pagination above the results.
--   Do not use `pageSize` and a `pageSizeOptions` selection simultaneously without handling `onPageSizeChange` — the changer selection overrides `pageSize`.
diff --git a/docs/skills/fds-build/resources/v3/components/pill.md b/docs/skills/fds-build/resources/v3/components/pill.md
deleted file mode 100644
index e29eab5f5b..0000000000
--- a/docs/skills/fds-build/resources/v3/components/pill.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# Pill
-
-Import: `import { Pill } from "@lifesg/react-design-system/pill"`
-
-## When to use
-
-Use to communicate a status — application state, approval outcome, or processing stage. For categories, filters, or tagging, use Tag instead.
-
-## Variants
-
-| `type`      | Usage                                                    |
-| ----------- | -------------------------------------------------------- |
-| `"outline"` | Subtle, secondary label — default for most uses          |
-| `"solid"`   | Higher emphasis — use when the status needs to stand out |
-
-| `colorType` | Semantic use                  |
-| ----------- | ----------------------------- |
-| `"green"`   | Success, active, approved     |
-| `"red"`     | Error, rejected, danger       |
-| `"yellow"`  | Warning, pending, in progress |
-| `"blue"`    | Informational                 |
-| `"grey"`    | Neutral, inactive, draft      |
-| `"primary"` | Theme primary color           |
-| `"black"`   | Default, no semantic meaning  |
-
-## Usage
-
-```tsx
-import { Pill } from "@lifesg/react-design-system/pill";
-
-<Pill type="outline" colorType="green">
-    Approved
-</Pill>;
-```
-
-## Props
-
-Inherits all `HTMLDivElement` attributes.
-
-| Prop        | Type                                                                                   | Default   | Description                             |
-| ----------- | -------------------------------------------------------------------------------------- | --------- | --------------------------------------- |
-| `type`      | `"solid"` \| `"outline"`                                                               | —         | Display style — required                |
-| `colorType` | `"black"` \| `"grey"` \| `"green"` \| `"yellow"` \| `"red"` \| `"blue"` \| `"primary"` | `"black"` | Color variant                           |
-| `icon`      | `JSX.Element`                                                                          | —         | Icon displayed to the left of the label |
-| `children`  | `string`                                                                               | —         | Label text                              |
-
-## Rules
-
--   Use color semantically — do not use `"red"` for non-error states.
--   Use `"solid"` sparingly — reserve for statuses that need emphasis.
--   Keep label text to 1–2 words — text does not wrap inside a pill.
--   Pill is a static, non-interactive label — it does not accept `onClick`. Use Tag with `interactive` for clickable labels.
-
-## Anti-patterns
-
--   Using Pill for categories or filters — use Tag instead.
--   Using `"red"` for non-error states.
--   Labels longer than 2–3 words — text overflow is not handled.
diff --git a/docs/skills/fds-build/resources/v3/components/popover.md b/docs/skills/fds-build/resources/v3/components/popover.md
deleted file mode 100644
index 830c57144e..0000000000
--- a/docs/skills/fds-build/resources/v3/components/popover.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Popover
-
-Import: `import { Popover, withPopover } from "@lifesg/react-design-system/popover"`
-
-## When to use
-
-Use to show supplementary information when a user interacts with (clicks or hovers over) an element. On mobile, the popover renders as a bottom modal sheet.
-
-## Variants
-
-Two usage patterns are available:
-
--   **`withPopover` HOC** — wraps an existing element to add popover behaviour.
--   **`Popover` component** — a standalone popover that you control manually.
-
-## Usage
-
-```tsx
-import { withPopover } from "@lifesg/react-design-system/popover";
-import { Button } from "@lifesg/react-design-system/button";
-
-{
-    /* Preferred: HOC wraps an existing element */
-}
-{
-    withPopover(
-        <Button.Default styleType="link">What is this?</Button.Default>,
-        { content: "This field requires your NRIC number.", trigger: "click" }
-    );
-}
-```
-
-## Props
-
-### withPopover
-
-```ts
-withPopover(component: JSX.Element, options: PopoverHOCOptionsProps): JSX.Element
-```
-
-**PopoverHOCOptionsProps**
-
-| Prop          | Type                    | Default   | Description                    |
-| ------------- | ----------------------- | --------- | ------------------------------ |
-| `content`     | `string \| JSX.Element` | —         | Popover content — **required** |
-| `trigger`     | `"click" \| "hover"`    | `"click"` | How the popover is triggered   |
-| `id`          | `string`                | —         | Unique identifier              |
-| `data-testid` | `string`                | —         | Test identifier                |
-
-**PopoverHOCProps (on the wrapped component)**
-
-| Prop               | Type         | Description                       |
-| ------------------ | ------------ | --------------------------------- |
-| `onPopoverAppear`  | `() => void` | Called when the popover appears   |
-| `onPopoverDismiss` | `() => void` | Called when the popover dismisses |
-
-### Popover
-
-| Prop            | Type                    | Default | Description                                                       |
-| --------------- | ----------------------- | ------- | ----------------------------------------------------------------- |
-| `children`      | `string \| JSX.Element` | —       | Popover content — **required**                                    |
-| `visible`       | `boolean`               | `false` | Controls visibility                                               |
-| `onMobileClose` | `() => void`            | —       | Called when the user dismisses the popover (modal form) on mobile |
-| `id`            | `string`                | —       | Unique identifier                                                 |
-| `className`     | `string`                | —       | Class selector                                                    |
-| `data-testid`   | `string`                | —       | Test identifier                                                   |
-
-## Rules
-
--   Use `withPopover` for most cases — it handles trigger logic automatically.
--   Use the `Popover` component directly when you need full manual control over visibility.
--   On mobile viewports the Popover renders as a bottom modal sheet — provide `onMobileClose` to handle dismissal.
diff --git a/docs/skills/fds-build/resources/v3/components/progress-indicator.md b/docs/skills/fds-build/resources/v3/components/progress-indicator.md
deleted file mode 100644
index 810e663bfb..0000000000
--- a/docs/skills/fds-build/resources/v3/components/progress-indicator.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# ProgressIndicator
-
-Import: `import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator"`
-
-## When to use
-
-Use in multi-step forms or wizards to show the user's position within the flow.
-
-## Usage
-
-```tsx
-import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
-
-const steps = [
-    { label: "Personal details" },
-    { label: "Documents" },
-    { label: "Review" },
-];
-
-<ProgressIndicator
-    steps={steps}
-    currentIndex={1}
-    displayExtractor={(step) => step.label}
-/>;
-```
-
-## Props
-
-| Prop               | Type                  | Default | Description                                         |
-| ------------------ | --------------------- | ------- | --------------------------------------------------- |
-| `steps`            | `T[]`                 | —       | Array of step objects — **required**                |
-| `currentIndex`     | `number`              | `0`     | Zero-based index of the current step — **required** |
-| `displayExtractor` | `(item: T) => string` | —       | Derives the display label from each step object     |
-| `id`               | `string`              | —       | Unique identifier                                   |
-| `className`        | `string`              | —       | Class selector                                      |
-| `data-testid`      | `string`              | —       | Test identifier                                     |
-
-## Rules
-
--   `currentIndex` is zero-based — the first step is `0`.
--   Always provide `displayExtractor` when `steps` contains objects — without it, step labels will not render.
--   Update `currentIndex` as the user moves between steps.
--   Do not use `fadeColor` or `fadePosition` — these props are deprecated and have no effect in v3.
-
-## Anti-patterns
-
--   Do not use ProgressIndicator on single-step pages.
--   Do not use it as a general progress bar for loading states — use a loading spinner or skeleton instead.
diff --git a/docs/skills/fds-build/resources/v3/components/radio-button.md b/docs/skills/fds-build/resources/v3/components/radio-button.md
deleted file mode 100644
index 3bf863c5db..0000000000
--- a/docs/skills/fds-build/resources/v3/components/radio-button.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# RadioButton
-
-Import: `import { RadioButton } from "@lifesg/react-design-system/radio-button"`
-
-## When to use
-
--   User must choose exactly one option from a small set (typically 2–5 options).
--   Options are mutually exclusive.
-
-Prefer `Toggle` with `type="radio"` over bare `RadioButton` when building form inputs that need a visible card-style label container.
-
-## Variants
-
-| `displaySize` | When to use                    |
-| ------------- | ------------------------------ |
-| `"default"`   | Standard use                   |
-| `"small"`     | Dense layouts, inline controls |
-
-## Usage
-
-```tsx
-import { RadioButton } from "@lifesg/react-design-system/radio-button";
-
-<div role="radiogroup" aria-labelledby="group-label">
-    <label>
-        <RadioButton
-            name="plan"
-            value="basic"
-            checked={selected === "basic"}
-            onChange={(e) => {}}
-        />
-        Basic
-    </label>
-    <label>
-        <RadioButton
-            name="plan"
-            value="pro"
-            checked={selected === "pro"}
-            onChange={(e) => {}}
-        />
-        Pro
-    </label>
-</div>;
-```
-
-## Props
-
-Inherits all props from `React.InputHTMLAttributes<HTMLInputElement>` (e.g. `name`, `value`, `disabled`, `aria-*`).
-
-| Prop                    | Type                                               | Default     | Description                                                              |
-| ----------------------- | -------------------------------------------------- | ----------- | ------------------------------------------------------------------------ |
-| `displaySize`           | `"default"` \| `"small"`                           | `"default"` | Display size of the component                                            |
-| `checked`               | `boolean`                                          | —           | Controlled checked state                                                 |
-| `disabled`              | `boolean`                                          | —           | Disables the radio button — action is not executable                     |
-| `focusableWhenDisabled` | `boolean`                                          | —           | Keeps component focusable when disabled, preventing all user interaction |
-| `onChange`              | `(e: React.ChangeEvent<HTMLInputElement>) => void` | —           | Called when this radio button becomes selected                           |
-
-## Rules
-
--   Always wrap a group in `role="radiogroup"` with a visible group label (`aria-labelledby`).
--   Always set the same `name` on all buttons in a group for native radio behaviour.
--   Always pair each button with a visible label — wrap in `<label>` or use `aria-label`.
--   Never render a single `RadioButton` in isolation — radio inputs only make sense in groups.
-
-## Anti-patterns
-
--   Do not use `RadioButton` for binary yes/no questions in forms — use `Toggle` with `type="yes"` / `type="no"`.
--   Do not use `RadioButton` when multiple selections are allowed — use `Checkbox` instead.
--   Do not omit the `name` prop — without it, browsers cannot enforce mutual exclusivity natively.
diff --git a/docs/skills/fds-build/resources/v3/components/schedule.md b/docs/skills/fds-build/resources/v3/components/schedule.md
deleted file mode 100644
index 54b98f0b2f..0000000000
--- a/docs/skills/fds-build/resources/v3/components/schedule.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Schedule
-
-Import: `import { Schedule } from "@lifesg/react-design-system/schedule"`
-
-## Sub-components
-
--   `ScheduleEntityProps` — a service/resource row with its time slots
--   `ScheduleSlotProps` — a single bookable timeslot cell
--   `SchedulePopoverProps` — popover config for a slot
-
-## Props
-
-| Prop                    | Type                                                     | Default         | Description                                                                                |
-| ----------------------- | -------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------ |
-| `date` \*               | `string`                                                 | —               | Current displayed date (`YYYY-MM-DD`)                                                      |
-| `serviceData` \*        | `ScheduleEntityProps[]`                                  | —               | Data for each service row and its time slots                                               |
-| `onPreviousDayClick` \* | `(currentDate: string) => void`                          | —               | Called when the left arrow on the date navigator is clicked                                |
-| `onNextDayClick` \*     | `(currentDate: string) => void`                          | —               | Called when the right arrow on the date navigator is clicked                               |
-| `id`                    | `string`                                                 | —               | The identifier of the component                                                            |
-| `className`             | `string`                                                 | —               | The class selector of the component                                                        |
-| `data-testid`           | `string`                                                 | —               | The test identifier of the component                                                       |
-| `view`                  | `"day" \| "week"`                                        | `"day"`         | The view mode for the schedule component                                                   |
-| `emptyContentMessage`   | `string`                                                 | —               | Message shown when `serviceData` has no rows                                               |
-| `loading`               | `boolean`                                                | `false`         | Shows a loading animation when true                                                        |
-| `minTime`               | `string`                                                 | `"00:00"`       | Start time of the schedule (`HH:mm`)                                                       |
-| `maxTime`               | `string`                                                 | `"23:59"`       | End time of the schedule (`HH:mm`)                                                         |
-| `initialScrollTime`     | `string`                                                 | —               | Initial scroll position time (`HH:mm`); defaults to `minTime`                              |
-| `minDate`               | `string`                                                 | —               | Minimum navigable date (`YYYY-MM-DD`, inclusive)                                           |
-| `maxDate`               | `string`                                                 | —               | Maximum navigable date (`YYYY-MM-DD`, inclusive)                                           |
-| `blockedMessage`        | `string`                                                 | `"Unavailable"` | Custom text for blocked slots; truncated with ellipsis if slot is too narrow               |
-| `onCalendarDateSelect`  | `(currentDate: string) => void`                          | —               | Called when a date is picked from the dropdown calendar                                    |
-| `onTodayClick`          | `() => void`                                             | —               | Called when the Today button is clicked                                                    |
-| `onSlotClick`           | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | —               | Called when a timeslot cell is clicked                                                     |
-| `onClickHiddenSlots`    | `(hiddenServices: string[]) => void`                     | —               | Called in week view when the hidden-slots button is clicked; provides hidden service names |
-
-`*` = required
-
-## ScheduleEntityProps
-
-| Prop       | Type                  | Description                          |
-| ---------- | --------------------- | ------------------------------------ |
-| `name` \*  | `string`              | The name of the service or resource  |
-| `slots` \* | `ScheduleSlotProps[]` | Array of time slots for this service |
-| `id`       | `string`              | Identifier for the service entity    |
-
-## ScheduleSlotProps
-
-| Prop            | Type                                                     | Description                                                 |
-| --------------- | -------------------------------------------------------- | ----------------------------------------------------------- |
-| `startTime` \*  | `string`                                                 | Start time (`HH:mm`)                                        |
-| `endTime` \*    | `string`                                                 | End time (`HH:mm`)                                          |
-| `status` \*     | `"booked" \| "available" \| "blocked" \| "pending"`      | Determines slot visual style                                |
-| `date` \*       | `string`                                                 | Date for this timeslot (`YYYY-MM-DD`)                       |
-| `id`            | `string`                                                 | Identifier; passed to `onClick` and `onSlotClick` callbacks |
-| `capacity`      | `number`                                                 | Maximum capacity for this timeslot                          |
-| `booked`        | `number`                                                 | Number of current bookings                                  |
-| `customPopover` | `SchedulePopoverProps`                                   | Popover config for the slot                                 |
-| `onClick`       | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | Per-slot click callback                                     |
-
-## SchedulePopoverProps
-
-| Prop         | Type                                               | Default | Description                                        |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------- |
-| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover              |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered in the popover                    |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Hover delay in milliseconds (`hover` trigger only) |
-| `offset`     | `number`                                           | —       | Offset in px applied to the popover                |
-
-## Rules
-
--   `date`, `serviceData`, `onPreviousDayClick`, and `onNextDayClick` are mandatory.
--   Avoid combining a per-slot `onClick` with `customPopover` using `trigger: "click"` on the same slot — they conflict.
diff --git a/docs/skills/fds-build/resources/v3/components/sidenav.md b/docs/skills/fds-build/resources/v3/components/sidenav.md
deleted file mode 100644
index e0027e0821..0000000000
--- a/docs/skills/fds-build/resources/v3/components/sidenav.md
+++ /dev/null
@@ -1,190 +0,0 @@
-# Sidenav
-
-Import: `import { Sidenav } from "@lifesg/react-design-system/sidenav"`
-
-## When to use
-
-Use for section-level navigation in admin dashboards or portals. The Sidenav sits fixed to the left and fills the full viewport height below the Navbar, which is always present at the top.
-
-Do not use for:
-
--   Consumer-facing pages (use Navbar nav items or LocalNav instead)
--   Simple single-section apps
-
-## Sub-components
-
-```
-Sidenav                          ← fixed sidebar container
-├── Sidenav.Group                ← logical section (optional separator)
-│   ├── Sidenav.Item             ← top-level nav link (no children)
-│   ├── Sidenav.DrawerItem       ← expandable item with sub-links
-│   │   ├── Sidenav.DrawerSubitem
-│   │   └── Sidenav.DrawerSubitem
-│   └── Sidenav.Item
-└── Sidenav.Group
-    └── Sidenav.Item
-```
-
-`Sidenav.Group` is the only valid direct child of `Sidenav`. Use `Sidenav.Item` for leaf links, `Sidenav.DrawerItem` when a nav entry has sub-items. `Sidenav.DrawerSubitem` can only nest inside `Sidenav.DrawerItem`.
-
-## Variants
-
-| Depth    | Components used                              |
-| -------- | -------------------------------------------- |
-| 1 level  | `Sidenav` → `Sidenav.Group` → `Sidenav.Item` |
-| 2 levels | + `Sidenav.DrawerItem`                       |
-| 3 levels | + `Sidenav.DrawerSubitem`                    |
-
-## Usage
-
-### 2-group, 3-item nav with full nesting
-
-```tsx
-import { CalendarIcon } from "@lifesg/react-icons/calendar";
-import { DocIcon } from "@lifesg/react-icons/doc";
-import { Square2x2Icon } from "@lifesg/react-icons/square-2x2";
-import { useState } from "react";
-import { Sidenav } from "@lifesg/react-design-system/sidenav";
-
-const AdminSidenav = () => {
-    const [selectedId, setSelectedId] = useState("dashboard");
-
-    return (
-        <Sidenav>
-            {/* Group 1 — top-level items with no sub-items: onClick fires */}
-            <Sidenav.Group separator>
-                <Sidenav.Item
-                    id="dashboard"
-                    title="Dashboard"
-                    icon={<Square2x2Icon />}
-                    selected={selectedId === "dashboard"}
-                    onClick={(id) => setSelectedId(id)}
-                />
-            </Sidenav.Group>
-
-            {/* Group 2 — Reports has sub-items so onClick is omitted;
-                clicking it opens the drawer instead */}
-            <Sidenav.Group>
-                <Sidenav.Item
-                    id="reports"
-                    title="Reports"
-                    icon={<DocIcon />}
-                    selected={
-                        selectedId === "monthly-reports" ||
-                        selectedId === "annual-reports"
-                    }
-                >
-                    {/* DrawerItem with no children: onClick fires */}
-                    <Sidenav.DrawerItem
-                        id="monthly-reports"
-                        title="Monthly reports"
-                        onClick={(id) => setSelectedId(id)}
-                    />
-                    {/* DrawerItem with children: onClick is omitted */}
-                    <Sidenav.DrawerItem
-                        id="annual-reports"
-                        title="Annual reports"
-                        selected={selectedId === "annual-reports"}
-                    >
-                        <Sidenav.DrawerSubitem
-                            id="annual-summary"
-                            title="Summary"
-                            onClick={(id) => setSelectedId(id)}
-                        />
-                        <Sidenav.DrawerSubitem
-                            id="annual-detail"
-                            title="Detailed breakdown"
-                            onClick={(id) => setSelectedId(id)}
-                        />
-                    </Sidenav.DrawerItem>
-                </Sidenav.Item>
-                <Sidenav.Item
-                    id="bookings"
-                    title="Bookings"
-                    icon={<CalendarIcon />}
-                    selected={selectedId === "bookings"}
-                    onClick={(id) => setSelectedId(id)}
-                />
-            </Sidenav.Group>
-        </Sidenav>
-    );
-};
-```
-
-Key wiring notes:
-
--   `onClick` on `Sidenav.Item` is only attached when the item has **no** `children` — if children are present, clicking opens the drawer instead and `onClick` is ignored.
--   The same rule applies to `Sidenav.DrawerItem`: omit `onClick` when it wraps `DrawerSubitem` children.
--   Track `selectedId` in parent state; pass `selected={selectedId === id}` down to whichever level is active.
--   `separator` on `Sidenav.Group` draws a dividing line below that group.
-
-## Props
-
-### Sidenav
-
-| Prop          | Type              | Default     | Description                                         |
-| ------------- | ----------------- | ----------- | --------------------------------------------------- |
-| `children`    | `React.ReactNode` | —           | One or more `Sidenav.Group` elements — **required** |
-| `fixed`       | `boolean`         | `true`      | Fix the sidenav to the left of the viewport         |
-| `aria-label`  | `string`          | `"Sidebar"` | Accessible label for the sidenav                    |
-| `id`          | `string`          | —           | Unique identifier                                   |
-| `className`   | `string`          | —           | Class selector                                      |
-| `data-testid` | `string`          | —           | Test identifier                                     |
-
-### Sidenav.Group
-
-| Prop          | Type              | Default | Description                                        |
-| ------------- | ----------------- | ------- | -------------------------------------------------- |
-| `children`    | `React.ReactNode` | —       | One or more `Sidenav.Item` elements — **required** |
-| `separator`   | `boolean`         | —       | Show a bottom divider below the group              |
-| `aria-label`  | `string`          | —       | Accessible label describing the category of items  |
-| `id`          | `string`          | —       | Unique identifier                                  |
-| `className`   | `string`          | —       | Class selector                                     |
-| `data-testid` | `string`          | —       | Test identifier                                    |
-
-### Sidenav.Item
-
-| Prop          | Type                   | Default | Description                                                  |
-| ------------- | ---------------------- | ------- | ------------------------------------------------------------ |
-| `title`       | `string`               | —       | Display label — **required**                                 |
-| `icon`        | `React.ReactNode`      | —       | Icon displayed above the label — **required**                |
-| `children`    | `React.ReactNode`      | —       | One or more `Sidenav.DrawerItem` elements                    |
-| `selected`    | `boolean`              | —       | Mark this item as the active selection                       |
-| `onClick`     | `(id: string) => void` | —       | Called when clicked; only fires if the item has no sub-items |
-| `id`          | `string`               | —       | Unique identifier                                            |
-| `className`   | `string`               | —       | Class selector                                               |
-| `data-testid` | `string`               | —       | Test identifier                                              |
-
-### Sidenav.DrawerItem
-
-| Prop          | Type                   | Default | Description                                                  |
-| ------------- | ---------------------- | ------- | ------------------------------------------------------------ |
-| `title`       | `string`               | —       | Display label — **required**                                 |
-| `children`    | `React.ReactNode`      | —       | One or more `Sidenav.DrawerSubitem` elements                 |
-| `onClick`     | `(id: string) => void` | —       | Called when clicked; only fires if the item has no sub-items |
-| `id`          | `string`               | —       | Unique identifier                                            |
-| `className`   | `string`               | —       | Class selector                                               |
-| `data-testid` | `string`               | —       | Test identifier                                              |
-
-### Sidenav.DrawerSubitem
-
-| Prop          | Type                   | Default | Description                  |
-| ------------- | ---------------------- | ------- | ---------------------------- |
-| `title`       | `string`               | —       | Display label — **required** |
-| `onClick`     | `(id: string) => void` | —       | Called when item is clicked  |
-| `id`          | `string`               | —       | Unique identifier            |
-| `className`   | `string`               | —       | Class selector               |
-| `data-testid` | `string`               | —       | Test identifier              |
-
-## Rules
-
--   Always provide `icon` on `Sidenav.Item` — it is required for the collapsed state.
--   Maximum depth is 3 levels: `Item` → `DrawerItem` → `DrawerSubitem`.
--   Use `Sidenav.Group` with `separator` to visually separate unrelated sections.
--   `onClick` on `Sidenav.Item` and `Sidenav.DrawerItem` only fires when the item has no children — do not attach click handlers to items that have sub-items.
-
-## Anti-patterns
-
--   Do not omit `icon` on `Sidenav.Item` — the component is designed around icon + label.
--   Do not nest deeper than 3 levels.
--   Do not use `Sidenav` on consumer-facing pages — it is suited to admin portals.
diff --git a/docs/skills/fds-build/resources/v3/components/singpass-button.md b/docs/skills/fds-build/resources/v3/components/singpass-button.md
deleted file mode 100644
index cbe26bc11d..0000000000
--- a/docs/skills/fds-build/resources/v3/components/singpass-button.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# SingpassButton
-
-Import: `import { SingpassButton } from "@lifesg/react-design-system/singpass-button"`
-
-## Props
-
-Inherits all props from `HTMLButtonElement`.
-
-| Prop        | Type                             | Default          | Description                |
-| ----------- | -------------------------------- | ---------------- | -------------------------- |
-| `styleType` | `"red-filled" \| "white-filled"` | `"white-filled"` | Visual style of the button |
-
-## Rules
-
--   Do not custom style — Singpass branding guidelines require using the component as-is.
diff --git a/docs/skills/fds-build/resources/v3/components/smart-app-banner.md b/docs/skills/fds-build/resources/v3/components/smart-app-banner.md
deleted file mode 100644
index ad4ca844d0..0000000000
--- a/docs/skills/fds-build/resources/v3/components/smart-app-banner.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# SmartAppBanner
-
-Import: `import { SmartAppBanner } from "@lifesg/react-design-system/smart-app-banner"`
-
-## Props
-
-| Prop           | Type                         | Default              | Description                                                                     |
-| -------------- | ---------------------------- | -------------------- | ------------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                    | Whether the SmartAppBanner is displayed                                         |
-| `href` \*      | `string`                     | —                    | Destination URL when the banner is clicked                                      |
-| `content` \*   | `SmartAppBannerContentProps` | —                    | Content of the banner                                                           |
-| `onDismiss` \* | `() => void`                 | —                    | Called when the banner is dismissed                                             |
-| `offset`       | `number`                     | `0`                  | Sets the `top` value in px                                                      |
-| `icon`         | `string`                     | Life SG app icon URL | URL for the app icon                                                            |
-| `animated`     | `boolean`                    | `false`              | Adds a slide-down animation on appearance                                       |
-| `ref`          | `React.Ref<HTMLDivElement>`  | —                    | Ref for the banner element                                                      |
-| `onClick`      | `() => void`                 | —                    | Additional behaviour on press (non-dismiss area); default opens link in new tab |
-
-`*` = required
-
-## SmartAppBannerContentProps
-
-| Prop                 | Type     | Default | Description                                                                    |
-| -------------------- | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*           | `string` | —       | Display title                                                                  |
-| `buttonLabel` \*     | `string` | —       | Button text                                                                    |
-| `buttonAriaLabel` \* | `string` | —       | Aria label for the button                                                      |
-| `numberOfStars` \*   | `number` | —       | Stars to display; decimals accepted; `NaN` or negative hides the stars display |
-| `message`            | `string` | —       | Description below the title                                                    |
diff --git a/docs/skills/fds-build/resources/v3/components/tab.md b/docs/skills/fds-build/resources/v3/components/tab.md
deleted file mode 100644
index 83f0a08b7d..0000000000
--- a/docs/skills/fds-build/resources/v3/components/tab.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# Tab
-
-Import: `import { Tab } from "@lifesg/react-design-system/tab"`
-
-## When to use
-
-Use to switch between related views within the same context — not for navigating between pages.
-
-## Sub-components
-
-```
-Tab                          ← tab strip container, manages active state
-├── Tab.Item                 ← individual tab (title + panel content)
-├── Tab.Item
-└── Tab.Item
-```
-
-All direct children of `Tab` must be `Tab.Item`. `Tab.Item` renders both the tab label and its associated panel content.
-
-## Variants
-
-| Mode                         | When to use                                |
-| ---------------------------- | ------------------------------------------ |
-| Uncontrolled (default)       | Tab manages its own active state           |
-| Controlled (`currentActive`) | Parent needs to control which tab is shown |
-
-## Props
-
-### Tab
-
-| Prop                     | Type                                     | Default | Description                                                   |
-| ------------------------ | ---------------------------------------- | ------- | ------------------------------------------------------------- |
-| `children`               | `JSX.Element \| JSX.Element[]`           | —       | `Tab.Item` elements — **required**                            |
-| `initialActive`          | `number`                                 | `0`     | Index of the initially active tab (uncontrolled)              |
-| `currentActive`          | `number`                                 | —       | Controlled active tab index; disables internal state when set |
-| `onTabClick`             | `(title: string, index: number) => void` | —       | Called when a tab selector is clicked                         |
-| `fullWidthIndicatorLine` | `boolean`                                | —       | Extend the bottom border to the full container width          |
-| `fadeColor`              | `string[] \| FadeColorSet`               | —       | Scroll fade color on mobile; set to match page background     |
-| `headingLevel`           | `number`                                 | `2`     | Heading level for tab labels                                  |
-| `id`                     | `string`                                 | —       | Unique identifier                                             |
-| `className`              | `string`                                 | —       | Class selector                                                |
-| `data-testid`            | `string`                                 | —       | Test identifier                                               |
-
-### Tab.Item
-
-| Prop          | Type                           | Default | Description                                  |
-| ------------- | ------------------------------ | ------- | -------------------------------------------- |
-| `title`       | `string`                       | —       | Tab selector label — **required**            |
-| `children`    | `JSX.Element \| JSX.Element[]` | —       | Tab panel content — **required**             |
-| `titleAddon`  | `TitleAddonProps`              | —       | Custom addon displayed next to the tab label |
-| `width`       | `string`                       | —       | Custom width of the tab selector             |
-| `id`          | `string`                       | —       | Unique identifier                            |
-| `className`   | `string`                       | —       | Class selector                               |
-| `data-testid` | `string`                       | —       | Test identifier                              |
-
-### TitleAddonProps
-
-| Prop       | Type                | Default   | Description                                 |
-| ---------- | ------------------- | --------- | ------------------------------------------- |
-| `content`  | `JSX.Element`       | —         | The addon element (e.g. a `Badge`)          |
-| `position` | `"left" \| "right"` | `"right"` | Position of the addon relative to the label |
-
-### FadeColorSet
-
-| Prop    | Type       | Description                 |
-| ------- | ---------- | --------------------------- |
-| `left`  | `string[]` | Color(s) for the left fade  |
-| `right` | `string[]` | Color(s) for the right fade |
-
-## Rules
-
--   When `currentActive` is set, the component is in controlled mode — you must update it via `onTabClick`.
--   Tab order is determined by the order of `Tab.Item` children.
--   Keep tab labels short — labels truncate beyond 20 characters on tablet and mobile.
--   Use controlled mode (`currentActive` + `onTabClick`) only when the parent needs to sync tab state with external logic (e.g. URL params, deep links).
--   Use `titleAddon` with a `Badge` to show counts or status indicators on tab labels.
--   Set `headingLevel` to match the component's position in the page heading hierarchy.
--   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
-
-## Anti-patterns
-
--   Do not use tabs for page-level navigation — use Navbar or LocalNav instead.
--   Do not use more than 5–6 tabs — consider a different navigation pattern for many sections.
--   Do not use long labels — they truncate on mobile and tablet.
--   Do not set `currentActive` without also providing `onTabClick` — the tab state will be stuck.
diff --git a/docs/skills/fds-build/resources/v3/components/tag.md b/docs/skills/fds-build/resources/v3/components/tag.md
deleted file mode 100644
index d7446e6e14..0000000000
--- a/docs/skills/fds-build/resources/v3/components/tag.md
+++ /dev/null
@@ -1,71 +0,0 @@
-# Tag
-
-Import: `import { Tag } from "@lifesg/react-design-system/tag"`
-
-## When to use
-
-Use to label categories, apply filters, or tag items. Can be static or interactive — set `interactive` to render as a button for toggleable filters or selectable categories. For status labels, use Pill instead.
-
-## Variants
-
-| `type`      | Usage                                                 |
-| ----------- | ----------------------------------------------------- |
-| `"outline"` | Subtle, secondary label — default for most uses       |
-| `"solid"`   | Higher emphasis — use when the tag needs to stand out |
-
-| `colorType` | Semantic use                  |
-| ----------- | ----------------------------- |
-| `"green"`   | Success, active, approved     |
-| `"red"`     | Error, rejected, danger       |
-| `"yellow"`  | Warning, pending, in progress |
-| `"blue"`    | Informational                 |
-| `"grey"`    | Neutral, inactive, draft      |
-| `"primary"` | Theme primary color           |
-| `"black"`   | Default, no semantic meaning  |
-
-## Usage
-
-```tsx
-import { Tag } from "@lifesg/react-design-system/tag";
-
-{
-    /* Static category tag */
-}
-<Tag type="outline" colorType="blue">
-    Health
-</Tag>;
-
-{
-    /* Interactive filter tag */
-}
-<Tag type="solid" colorType="primary" interactive onClick={() => {}}>
-    Finance
-</Tag>;
-```
-
-## Props
-
-Inherits all `HTMLElement` attributes.
-
-| Prop           | Type                                                                                   | Default   | Description                                  |
-| -------------- | -------------------------------------------------------------------------------------- | --------- | -------------------------------------------- |
-| `type`         | `"solid"` \| `"outline"`                                                               | —         | Display style — required                     |
-| `colorType`    | `"black"` \| `"grey"` \| `"green"` \| `"yellow"` \| `"red"` \| `"blue"` \| `"primary"` | `"black"` | Color variant                                |
-| `icon`         | `JSX.Element`                                                                          | —         | Icon displayed alongside the label           |
-| `iconPosition` | `"left"` \| `"right"`                                                                  | `"left"`  | Position of the icon relative to the label   |
-| `interactive`  | `boolean`                                                                              | `false`   | Renders as a `<button>` — use with `onClick` |
-| `children`     | `string`                                                                               | —         | Label text                                   |
-
-## Rules
-
--   When `interactive` is `true`, the component renders as a `<button>` with an extended touch target on mobile.
--   Always pair `interactive` with `onClick` — interactive tags are larger on mobile to extend the touch target.
--   Use color semantically — do not use `"red"` for non-error states.
--   Keep label text short — text does not wrap inside a tag.
--   Use Tag for categories, filters, and tagging — use Pill for statuses.
-
-## Anti-patterns
-
--   Using Tag for status labels — use Pill instead.
--   Setting `interactive` without providing an `onClick` handler.
--   Using `"red"` for non-error states.
diff --git a/docs/skills/fds-build/resources/v3/components/text-list.md b/docs/skills/fds-build/resources/v3/components/text-list.md
deleted file mode 100644
index e027238d46..0000000000
--- a/docs/skills/fds-build/resources/v3/components/text-list.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# TextList
-
-Import: `import { TextList } from "@lifesg/react-design-system/text-list"`
-
-## When to use
-
-Use for semantic list content. For navigation links, use `LinkList` instead.
-
-## Sub-components
-
-| Sub-component | Renders | When to use                                  |
-| ------------- | ------- | -------------------------------------------- |
-| `TextList.Ul` | `<ul>`  | Unordered list — items without a sequence    |
-| `TextList.Ol` | `<ol>`  | Ordered list — numbered or lettered sequence |
-
-## Props
-
-### TextList.Ul
-
-| Prop           | Type                                                    | Default  | Description                                                        |
-| -------------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------------ |
-| `children`     | `JSX.Element \| JSX.Element[]`                          | —        | `<li>` elements                                                    |
-| `bulletType`   | `"disc" \| "circle" \| "square" \| "none" \| ReactNode` | `"disc"` | Bullet style — pass a ReactNode (e.g. an icon) for a custom bullet |
-| `size`         | `TypographySizeType`                                    | —        | Typography size scale                                              |
-| `bottomMargin` | `number`                                                | —        | Bottom margin in px                                                |
-| `data-testid`  | `string`                                                | —        | Test identifier                                                    |
-
-### TextList.Ol
-
-| Prop               | Type                                          | Default     | Description                                       |
-| ------------------ | --------------------------------------------- | ----------- | ------------------------------------------------- |
-| `children`         | `JSX.Element \| JSX.Element[]`                | —           | `<li>` elements                                   |
-| `counterType`      | `"decimal" \| "lower-alpha" \| "lower-roman"` | `"decimal"` | Counter style                                     |
-| `counterSeparator` | `string`                                      | —           | Character after the counter (e.g. `"."` or `")"`) |
-| `reversed`         | `boolean`                                     | `false`     | Count downward                                    |
-| `start`            | `number`                                      | `1`         | Starting counter value                            |
-| `size`             | `TypographySizeType`                          | —           | Typography size scale                             |
-| `bottomMargin`     | `number`                                      | —           | Bottom margin in px                               |
-| `data-testid`      | `string`                                      | —           | Test identifier                                   |
-
-## Rules
-
--   Children must be `<li>` elements.
--   Use `bulletType` as a `ReactNode` to render a custom icon bullet — the icon is automatically marked `aria-hidden`.
diff --git a/docs/skills/fds-build/resources/v3/components/time-slot-bar-week.md b/docs/skills/fds-build/resources/v3/components/time-slot-bar-week.md
deleted file mode 100644
index 868a56a006..0000000000
--- a/docs/skills/fds-build/resources/v3/components/time-slot-bar-week.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# TimeSlotBarWeek
-
-Import: `import { TimeSlotBarWeek } from "@lifesg/react-design-system/time-slot-bar-week"`
-
-## Sub-components
-
--   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
--   `TimeSlot` — shape of each slot in the `slots` map
--   `TimeSlotBarStyleAttributes` — visual styling for a slot
-
-## Props
-
-| Prop                   | Type                                         | Default      | Description                                                                                        |
-| ---------------------- | -------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------- |
-| `slots` \*             | `{ [date: string]: TimeSlot[] }`             | —            | Time slots keyed by date (`YYYY-MM-DD`); falls back to disabled pattern if not provided for a date |
-| `className`            | `string`                                     | —            | Class selector for the component                                                                   |
-| `data-testid`          | `string`                                     | —            | The test identifier for the component                                                              |
-| `id`                   | `string`                                     | —            | The unique identifier for the component                                                            |
-| `variant`              | `"flexible" \| "fixed"`                      | `"flexible"` | The variant of the rendered timeslot bars                                                          |
-| `interval`             | `number`                                     | `30`         | Duration each cell represents in minutes                                                           |
-| `startTime`            | `string`                                     | —            | Minimum time displayed (`HH:mm`; full hours only, e.g. `"08:00"`)                                  |
-| `endTime`              | `string`                                     | —            | Maximum time displayed (`HH:mm`; full hours only)                                                  |
-| `minDate`              | `string`                                     | —            | Minimum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
-| `maxDate`              | `string`                                     | —            | Maximum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
-| `disabledDates`        | `string[]`                                   | —            | Dates to disable (`YYYY-MM-DD`)                                                                    |
-| `value`                | `string`                                     | —            | Currently selected date (`YYYY-MM-DD`)                                                             |
-| `currentCalendarDate`  | `string`                                     | —            | Initial date visible in the week view (`YYYY-MM-DD`)                                               |
-| `maxVisibleCellHeight` | `number`                                     | —            | Maximum combined cell height before truncation                                                     |
-| `showNavigationHeader` | `boolean`                                    | `true`       | Shows month/year dropdown and navigation arrows                                                    |
-| `enableSelection`      | `boolean`                                    | `true`       | Specifies if a date can be selected                                                                |
-| `onChange`             | `(value: string) => void`                    | —            | Called when the user selects a day; returns `YYYY-MM-DD`                                           |
-| `onWeekDisplayChange`  | `(value: YearMonthWeekDisplay) => void`      | —            | Called when the visible week changes                                                               |
-| `onSlotClick`          | `(date: string, timeSlot: TimeSlot) => void` | —            | Called when a timeslot is clicked                                                                  |
-
-`*` = required
-
-## YearMonthWeekDisplay
-
-| Prop    | Type                                                | Description                                            |
-| ------- | --------------------------------------------------- | ------------------------------------------------------ |
-| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
-| `year`  | `number`                                            | Visible year                                           |
-| `month` | `number`                                            | Visible month (1–12)                                   |
-
-## TimeSlot
-
-| Prop              | Type                         | Description                        |
-| ----------------- | ---------------------------- | ---------------------------------- |
-| `id` \*           | `string`                     | Unique identifier of the slot      |
-| `startTime` \*    | `string`                     | Start time (`HH:mm`)               |
-| `endTime` \*      | `string`                     | End time (`HH:mm`)                 |
-| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                     |
-| `label`           | `string`                     | Text content within the slot cell  |
-| `clickable`       | `boolean`                    | Whether the slot cell is clickable |
-
-## TimeSlotBarStyleAttributes
-
-| Prop                 | Type                     | Default     | Description                                       |
-| -------------------- | ------------------------ | ----------- | ------------------------------------------------- |
-| `backgroundColor` \* | `string`                 | —           | The color of the slot                             |
-| `styleType`          | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
-| `backgroundColor2`   | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
-
-## Rules
-
--   `slots` is mandatory.
--   `startTime`/`endTime` on the component must be full hours (e.g. `"08:00"`, `"13:00"`).
diff --git a/docs/skills/fds-build/resources/v3/components/time-slot-bar.md b/docs/skills/fds-build/resources/v3/components/time-slot-bar.md
deleted file mode 100644
index 0474d1f581..0000000000
--- a/docs/skills/fds-build/resources/v3/components/time-slot-bar.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# TimeSlotBar
-
-Import: `import { TimeSlotBar } from "@lifesg/react-design-system/time-slot-bar"`
-
-## Props
-
-| Prop                     | Type                           | Default     | Description                                                                 |
-| ------------------------ | ------------------------------ | ----------- | --------------------------------------------------------------------------- |
-| `slots` \*               | `TimeSlot[]`                   | —           | Time slots for the bar                                                      |
-| `startTime` \*           | `string`                       | —           | Start time of the bar in `HH:mm` (minutes in 15-min blocks: 00, 15, 30, 45) |
-| `endTime` \*             | `string`                       | —           | End time of the bar in `HH:mm` (minutes in 15-min blocks)                   |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —           | Called when a time slot is selected                                         |
-| `variant`                | `"default" \| "minified"`      | `"default"` | Display variant                                                             |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —           | Default style when no slot is specified for a time period                   |
-| `initialScrollTime`      | `string`                       | —           | Initial scroll offset time in `HH:mm`                                       |
-| `roundInitialScrollTime` | `boolean`                      | `true`      | Rounds `initialScrollTime` to the nearest 30-min interval                   |
-| `onClick`                | `() => void`                   | —           | Called when the bar is selected (useful when no slots specified)            |
-| `className`              | `string`                       | —           | Class selector of the component                                             |
-| `data-testid`            | `string`                       | —           | Test identifier of the component                                            |
-
-`*` = required
-
-## TimeSlot
-
-| Prop              | Type                         | Default | Description                                |
-| ----------------- | ---------------------------- | ------- | ------------------------------------------ |
-| `id` \*           | `string`                     | —       | Unique identifier of the slot              |
-| `startTime` \*    | `string`                     | —       | Slot start time in `HH:mm` (15-min blocks) |
-| `endTime` \*      | `string`                     | —       | Slot end time in `HH:mm` (15-min blocks)   |
-| `styleAttributes` | `TimeSlotBarStyleAttributes` | —       | Styling for this slot                      |
-| `label`           | `string`                     | —       | Text content within the slot cell          |
-| `clickable`       | `boolean`                    | —       | Whether the slot cell is clickable         |
-
-## TimeSlotBarStyleAttributes
-
-| Prop                    | Type                     | Default     | Description                                                            |
-| ----------------------- | ------------------------ | ----------- | ---------------------------------------------------------------------- |
-| `backgroundColor` \*    | `string`                 | —           | Slot color                                                             |
-| `styleType`             | `"default" \| "stripes"` | `"default"` | Style type of the slot                                                 |
-| `backgroundColor2`      | `string`                 | —           | Secondary color; used with `styleType="stripes"`                       |
-| `hoverBackgroundColor`  | `string`                 | —           | Background on hover; only when `clickable`                             |
-| `hoverBackgroundColor2` | `string`                 | —           | Secondary hover color for `styleType="stripes"`; only when `clickable` |
diff --git a/docs/skills/fds-build/resources/v3/components/time-slot-week-view.md b/docs/skills/fds-build/resources/v3/components/time-slot-week-view.md
deleted file mode 100644
index 3bd1c452c0..0000000000
--- a/docs/skills/fds-build/resources/v3/components/time-slot-week-view.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# TimeSlotWeekView
-
-Import: `import { TimeSlotWeekView } from "@lifesg/react-design-system/time-slot-week-view"`
-
-## Sub-components
-
--   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
--   `TimeSlot` — shape of each slot in the `slots` map
--   `TimeSlotBarStyleAttributes` — visual styling for a slot
-
-## Props
-
-| Prop                   | Type                                         | Default | Description                                                                                        |
-| ---------------------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------- |
-| `slots` \*             | `{ [date: string]: TimeSlot[] }`             | —       | Time slots keyed by date (`YYYY-MM-DD`); falls back to disabled pattern if not provided for a date |
-| `className`            | `string`                                     | —       | Class selector for the component                                                                   |
-| `data-testid`          | `string`                                     | —       | The test identifier for the component                                                              |
-| `id`                   | `string`                                     | —       | The unique identifier for the component                                                            |
-| `minDate`              | `string`                                     | —       | Minimum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
-| `maxDate`              | `string`                                     | —       | Maximum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
-| `disabledDates`        | `string[]`                                   | —       | Dates to disable (`YYYY-MM-DD`)                                                                    |
-| `value`                | `string`                                     | —       | Currently selected date (`YYYY-MM-DD`)                                                             |
-| `currentCalendarDate`  | `string`                                     | —       | Initial date visible in the week view (`YYYY-MM-DD`)                                               |
-| `showNavigationHeader` | `boolean`                                    | `true`  | Shows month/year dropdown and navigation arrows                                                    |
-| `enableSelection`      | `boolean`                                    | `true`  | Specifies if a date can be selected                                                                |
-| `onChange`             | `(value: string) => void`                    | —       | Called when the user selects a day; returns `YYYY-MM-DD`                                           |
-| `onWeekDisplayChange`  | `(value: YearMonthWeekDisplay) => void`      | —       | Called when the visible week changes                                                               |
-| `onSlotClick`          | `(date: string, timeSlot: TimeSlot) => void` | —       | Called when a timeslot is clicked                                                                  |
-
-`*` = required
-
-## YearMonthWeekDisplay
-
-| Prop    | Type                                                | Description                                            |
-| ------- | --------------------------------------------------- | ------------------------------------------------------ |
-| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
-| `year`  | `number`                                            | Visible year                                           |
-| `month` | `number`                                            | Visible month (1–12)                                   |
-
-## TimeSlot
-
-| Prop              | Type                         | Description                                                       |
-| ----------------- | ---------------------------- | ----------------------------------------------------------------- |
-| `id` \*           | `string`                     | Unique identifier of the slot                                     |
-| `startTime` \*    | `string`                     | Start time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45) |
-| `endTime` \*      | `string`                     | End time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45)   |
-| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                                                    |
-| `label`           | `string`                     | Text content within the slot cell                                 |
-| `clickable`       | `boolean`                    | Whether the slot cell is clickable                                |
-
-## TimeSlotBarStyleAttributes
-
-| Prop             | Type                     | Default     | Description                                       |
-| ---------------- | ------------------------ | ----------- | ------------------------------------------------- |
-| `color` \*       | `string`                 | —           | The color of the slot                             |
-| `styleType`      | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
-| `secondaryColor` | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
-
-## Rules
-
--   `slots` is mandatory.
--   `TimeSlot` minutes must be in 15-minute blocks (00, 15, 30, 45).
--   `TimeSlotBarStyleAttributes` uses `color`/`secondaryColor` — not `backgroundColor`/`backgroundColor2` as in `TimeSlotBarWeek`.
diff --git a/docs/skills/fds-build/resources/v3/components/timeline.md b/docs/skills/fds-build/resources/v3/components/timeline.md
deleted file mode 100644
index 14abfcb7d5..0000000000
--- a/docs/skills/fds-build/resources/v3/components/timeline.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# Timeline
-
-Import: `import { Timeline } from "@lifesg/react-design-system/timeline"`
-
-## When to use
-
-Use to communicate a process, application history, or sequence of steps. Use the `numeric` variant for numbered step-by-step instructions.
-
-## Sub-components
-
-### TimelineItemProps
-
-| Prop       | Type                                                                                                         | Default | Description                                            |
-| ---------- | ------------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------ |
-| `title`    | `string`                                                                                                     | —       | Item title — required                                  |
-| `content`  | `JSX.Element`                                                                                                | —       | Item content — required                                |
-| `variant`  | `"completed" \| "current" \| "upcoming-active" \| "upcoming-inactive" \| "numeric" \| "error" \| "disabled"` | —       | Visual state of the item indicator                     |
-| `statuses` | `PillProps[]`                                                                                                | —       | Status pills shown alongside the item (max 2 rendered) |
-
-## Variants
-
-| `variant`             | Usage                                |
-| --------------------- | ------------------------------------ |
-| `"completed"`         | Step or event is done                |
-| `"current"`           | Step currently in progress           |
-| `"upcoming-active"`   | Next actionable step                 |
-| `"upcoming-inactive"` | Future step, not yet actionable      |
-| `"error"`             | Step has an error                    |
-| `"disabled"`          | Step is not available                |
-| `"numeric"`           | Numbered step — use for instructions |
-
-## Props
-
-| Prop                         | Type                  | Default | Description                                              |
-| ---------------------------- | --------------------- | ------- | -------------------------------------------------------- |
-| `items`                      | `TimelineItemProps[]` | —       | Array of timeline items — required                       |
-| `title`                      | `string`              | —       | Section title shown above the timeline                   |
-| `className`                  | `string`              | —       | Class selector                                           |
-| `startCol`                   | `number`              | —       | CSS grid column start (when wrapped in a grid container) |
-| `colSpan`                    | `number`              | —       | CSS grid column span (when wrapped in a grid container)  |
-| `counterOffset`              | `number`              | `0`     | Starting offset for `numeric` variant indicators         |
-| `data-testid`                | `string`              | —       | Test identifier                                          |
-| `data-base-indicator-testid` | `string`              | —       | Test identifier for item indicators                      |
-
-## Rules
-
--   The first item defaults to `variant="current"` and subsequent items default to `variant="upcoming-active"` when `variant` is not specified.
--   Only a maximum of 2 `statuses` pills will render per item regardless of how many are provided.
--   `counterOffset` shifts the numeric counter: if `offset=2`, the first item shows `3`.
--   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
--   Use `counterOffset` when showing a partial sequence (e.g. steps 3–5 of a larger flow).
--   Use `statuses` with `PillProps` — follow Pill color semantics (see `pill.md`).
--   Use `"numeric"` variant consistently across all items in an instruction list — do not mix with status variants.
-
-## Anti-patterns
-
--   Mixing `"numeric"` and status variants in the same timeline — choose one paradigm per use case.
--   Providing more than 2 status pills per item — only 2 will render.
--   Using Timeline for non-sequential content — use a list or table instead.
diff --git a/docs/skills/fds-build/resources/v3/components/timetable.md b/docs/skills/fds-build/resources/v3/components/timetable.md
deleted file mode 100644
index 46ecf46701..0000000000
--- a/docs/skills/fds-build/resources/v3/components/timetable.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# Timetable
-
-Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
-
-## Props
-
-| Prop                      | Type                            | Default   | Description                                                               |
-| ------------------------- | ------------------------------- | --------- | ------------------------------------------------------------------------- |
-| `date` \*                 | `string`                        | —         | Current displayed date in `YYYY-MM-DD` format                             |
-| `rowData` \*              | `TimeTableRowData[]`            | —         | Data used to render each unique row                                       |
-| `loading` \*              | `boolean`                       | —         | Shows loading animation while true                                        |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void` | —         | Called when left arrow is clicked on the date navigator                   |
-| `onNextDayClick` \*       | `(currentDate: string) => void` | —         | Called when right arrow is clicked on the date navigator                  |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void` | —         | Called when a calendar date is picked in the dropdown                     |
-| `minTime`                 | `string`                        | `"00:00"` | Start time of the timetable in `HH:mm` format                             |
-| `maxTime`                 | `string`                        | `"23:00"` | End time of the timetable in `HH:mm` format                               |
-| `minDate`                 | `string`                        | —         | Minimum navigation date in `YYYY-MM-DD` format (inclusive)                |
-| `maxDate`                 | `string`                        | —         | Maximum navigation date in `YYYY-MM-DD` format (inclusive)                |
-| `initialScrollTime`       | `string`                        | —         | Initial scroll offset time in `HH:mm`                                     |
-| `roundInitialScrollTime`  | `boolean`                       | `true`    | Rounds `initialScrollTime` to the nearest 15-min grid interval            |
-| `totalRecords`            | `number`                        | —         | Total record count; if omitted, the total records section is not rendered |
-| `emptyContentMessage`     | `string`                        | —         | Message shown when `totalRecords=0` or `rowData=[]`                       |
-| `showCurrentDateAsToday`  | `boolean`                       | —         | Shows today's date as "Today"                                             |
-| `showDateAsShortForm`     | `boolean`                       | —         | Shows the date text in short form                                         |
-| `onRefresh`               | `() => void`                    | —         | Called when refresh button is clicked; if omitted, button is not rendered |
-| `onPage`                  | `() => void`                    | —         | Called when pagination occurs                                             |
-| `id`                      | `string`                        | —         | Identifier of the component                                               |
-| `className`               | `string`                        | —         | Class selector of the component                                           |
-| `data-testid`             | `string`                        | —         | Test identifier of the component                                          |
-
-`*` = required
-
-## TimeTableRowData
-
-| Prop                    | Type                                                       | Default   | Description                                               |
-| ----------------------- | ---------------------------------------------------------- | --------- | --------------------------------------------------------- |
-| `name` \*               | `string`                                                   | —         | Row header name                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                   | —         | Array of row cells; sorted by start time automatically    |
-| `id`                    | `string`                                                   | —         | Row identifier; passed to `onRowNameClick`                |
-| `subtitle`              | `string \| JSX.Element`                                    | —         | Row header subtitle                                       |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                    | —         | Custom popover for the row header                         |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                    | —         | Custom popover for auto-filled blocked cells              |
-| `rowMinTime`            | `string`                                                   | `minTime` | Row start time; blocked cells are auto-filled before this |
-| `rowMaxTime`            | `string`                                                   | `maxTime` | Row end time; blocked cells are auto-filled after this    |
-| `onRowNameClick`        | `(rowData: TimeTableRowData, e: React.MouseEvent) => void` | —         | Called when the row header name is clicked                |
-
-## TimeTableRowCellData
-
-| Prop                  | Type                                                            | Default | Description                                                        |
-| --------------------- | --------------------------------------------------------------- | ------- | ------------------------------------------------------------------ |
-| `startTime` \*        | `string`                                                        | —       | Cell start time in `HH:mm` (duration must be a multiple of 15 min) |
-| `endTime` \*          | `string`                                                        | —       | Cell end time in `HH:mm` (duration must be a multiple of 15 min)   |
-| `id`                  | `string`                                                        | —       | Cell identifier; passed to `onClick`                               |
-| `status`              | `"filled" \| "blocked" \| "default" \| "pending" \| "disabled"` | —       | Cell status, determines rendering style                            |
-| `title`               | `string`                                                        | —       | Title shown for this cell                                          |
-| `subtitle`            | `string`                                                        | —       | Subtitle shown for this cell                                       |
-| `customPopover`       | `TimeTablePopoverProps`                                         | —       | Custom popover for the cell                                        |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                  | —       | Custom style attributes; falls back to default row bar colors      |
-| `onClick`             | `(data: TimeTableRowCellData, e: React.MouseEvent) => void`     | —       | Called when the cell is clicked                                    |
-
-## TimeTablePopoverProps
-
-| Prop         | Type                                               | Default | Description                            |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------- |
-| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover  |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Popover content                        |
-| `delay`      | `{ open: number, close: number }`                  | —       | Hover delay in ms (hover trigger only) |
-| `offset`     | `number`                                           | —       | Offset in px for the popover           |
-
-## TimeTableCellStyleAttributes
-
-| Prop                      | Type                                           | Description                                                                      |
-| ------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------- |
-| `backgroundColor`         | `string \| (props: ThemeStyleProps) => string` | Main background color                                                            |
-| `altBackgroundColor`      | `string \| (props: ThemeStyleProps) => string` | Alternate background color for striped displays                                  |
-| `hoverBackgroundColor`    | `string \| (props: ThemeStyleProps) => string` | Background on hover                                                              |
-| `altHoverBackgroundColor` | `string \| (props: ThemeStyleProps) => string` | Alternate background on hover                                                    |
-| `styleType`               | `"default" \| "solid" \| "stripes"`            | Display style; defaults to cell type (blocked/pending = striped, others = solid) |
-
-## Rules
-
--   Do not combine `onClick` on a cell with a `trigger="click"` popover on the same cell — they conflict.
diff --git a/docs/skills/fds-build/resources/v3/components/toast.md b/docs/skills/fds-build/resources/v3/components/toast.md
deleted file mode 100644
index 3ddb0924f1..0000000000
--- a/docs/skills/fds-build/resources/v3/components/toast.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# Toast
-
-Import: `import { Toast } from "@lifesg/react-design-system/toast"`
-
-## When to use
-
-Use for brief, non-blocking feedback on system or user actions — "Changes saved", "Upload complete", "Request failed". Does not replace persistent callouts — use Alert for section-specific notices.
-
-## Sub-components
-
-### ActionButtonProps
-
-| Prop      | Type         | Default | Description                                         |
-| --------- | ------------ | ------- | --------------------------------------------------- |
-| `label`   | `string`     | —       | Label of the action button — required               |
-| `onClick` | `() => void` | —       | Called when the action button is clicked — required |
-
-## Variants
-
-| `type`      | When to use                   |
-| ----------- | ----------------------------- |
-| `"success"` | Action completed successfully |
-| `"error"`   | Action failed or system error |
-| `"warning"` | Completed with caution        |
-| `"info"`    | Neutral status update         |
-
-## Usage
-
-```tsx
-import { Toast } from "@lifesg/react-design-system/toast";
-
-<Toast
-    type="success"
-    label="Changes saved successfully."
-    autoDismiss
-    onDismiss={() => {}}
-/>;
-```
-
-## Props
-
-Inherits all `HTMLDivElement` attributes.
-
-| Prop              | Type                                          | Default     | Description                                      |
-| ----------------- | --------------------------------------------- | ----------- | ------------------------------------------------ |
-| `type`            | `"success" \| "warning" \| "error" \| "info"` | `"success"` | Status type — required                           |
-| `label`           | `string \| JSX.Element`                       | —           | Toast content — required                         |
-| `title`           | `string \| JSX.Element`                       | —           | Optional heading above the label                 |
-| `autoDismiss`     | `boolean`                                     | `false`     | Auto-dismiss after `autoDismissTime`             |
-| `autoDismissTime` | `number`                                      | `4000`      | Duration in ms before auto-dismiss               |
-| `onDismiss`       | `() => void`                                  | —           | Called when Toast is dismissed (by user or auto) |
-| `fixed`           | `boolean`                                     | `true`      | Fix to top of viewport on scroll                 |
-| `actionButton`    | `ActionButtonProps`                           | —           | Optional action button rendered in the Toast     |
-
-## Rules
-
--   `autoDismissTime` only takes effect when `autoDismiss` is `true`.
--   Use `autoDismiss` for non-critical updates — keep visible for errors that require user action.
--   Use `actionButton` for recoverable errors (retry, undo).
--   Use `title` + `label` together when the toast message has a heading and a description.
--   Do not use Toast for persistent notices — use Alert or NotificationBanner instead.
-
-## Anti-patterns
-
--   Using Toast for errors that require user action without providing an `actionButton`.
--   Setting `autoDismiss` on error toasts — errors should remain visible until the user dismisses them.
--   Replacing Alert with Toast for section-specific inline messages.
diff --git a/docs/skills/fds-build/resources/v3/components/toggle.md b/docs/skills/fds-build/resources/v3/components/toggle.md
deleted file mode 100644
index 6136e67c45..0000000000
--- a/docs/skills/fds-build/resources/v3/components/toggle.md
+++ /dev/null
@@ -1,120 +0,0 @@
-# Toggle
-
-Import: `import { Toggle } from "@lifesg/react-design-system/toggle"`
-
-## When to use
-
--   Form inputs for boolean choices, single/multi-option selection, and yes/no questions.
--   Preferred over bare `Checkbox` and `RadioButton` when building form inputs that need a card-style visible label container.
-
-## Variants
-
-| `type`       | When to use                                                  |
-| ------------ | ------------------------------------------------------------ |
-| `"checkbox"` | Multiple options can be selected or deselected independently |
-| `"radio"`    | Exactly one option must be selected — cannot be deselected   |
-| `"yes"`      | Binary yes answer — use with a paired `type="no"` Toggle     |
-| `"no"`       | Binary no answer — use with a paired `type="yes"` Toggle     |
-
-| `styleType`   | When to use                                                  |
-| ------------- | ------------------------------------------------------------ |
-| `"default"`   | Standard bordered card                                       |
-| `"no-border"` | Borderless — for contexts where the border is visually noisy |
-
-| `type`       | Behaviour                            |
-| ------------ | ------------------------------------ |
-| `"checkbox"` | Allows deselection — standard toggle |
-| `"radio"`    | No deselection — radio-style         |
-| `"yes"`      | No deselection — tick indicator      |
-| `"no"`       | No deselection — cross indicator     |
-
-## Usage
-
-```tsx
-import { Toggle } from "@lifesg/react-design-system/toggle";
-import { Form } from "@lifesg/react-design-system/form";
-
-{/* Checkbox group */}
-<Form.Label>Select your preferences</Form.Label>
-<Toggle type="checkbox" indicator checked={emailChecked} onChange={(e) => {}}>
-  Email notifications
-</Toggle>
-<Toggle type="checkbox" indicator checked={smsChecked} onChange={(e) => {}}>
-  SMS notifications
-</Toggle>
-```
-
-## Props
-
-| Prop                    | Type                                                   | Default      | Description                                                              |
-| ----------------------- | ------------------------------------------------------ | ------------ | ------------------------------------------------------------------------ |
-| `children`              | `string`                                               | —            | Main selector label — **required**                                       |
-| `type`                  | `"checkbox" \| "radio" \| "yes" \| "no"`               | `"checkbox"` | Selection behaviour and indicator icon                                   |
-| `styleType`             | `"default" \| "no-border"`                             | `"default"`  | Whether a border is displayed                                            |
-| `indicator`             | `boolean`                                              | —            | Show the type indicator icon (tick for `"yes"`, cross for `"no"`)        |
-| `checked`               | `boolean`                                              | —            | Controlled checked/selected state                                        |
-| `subLabel`              | `string \| JSX.Element \| () => JSX.Element`           | —            | Secondary text below the main label                                      |
-| `childrenMaxLines`      | `{desktop: number, mobile: number}`                    | —            | Max visible lines in the main label; additional lines are truncated      |
-| `disabled`              | `boolean`                                              | —            | Disables the element — non-interactable                                  |
-| `focusableWhenDisabled` | `boolean`                                              | —            | Keeps component focusable when disabled, preventing all user interaction |
-| `error`                 | `boolean`                                              | —            | Shows error state styling                                                |
-| `removable`             | `boolean`                                              | `false`      | Shows a remove button                                                    |
-| `onRemove`              | `() => void`                                           | —            | Called when the remove button is clicked                                 |
-| `compositeSection`      | `CompositeSectionProps`                                | —            | Collapsible subsection displayed below label and subLabel                |
-| `useContentWidth`       | `boolean`                                              | —            | Changes minimum container width to fit content                           |
-| `onChange`              | `(event: React.ChangeEvent<HTMLInputElement>) => void` | —            | Called when the Toggle is selected or deselected                         |
-| `name`                  | `string`                                               | —            | Name of the element                                                      |
-| `id`                    | `string`                                               | —            | Unique identifier of the element                                         |
-| `className`             | `string`                                               | —            | Class selector of the element                                            |
-| `data-testid`           | `string`                                               | —            | Test identifier of the element                                           |
-
-## CompositeSectionProps
-
-| Prop              | Type                      | Default | Description                                                      |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------- |
-| `children`        | `string \| JSX.Element`   | —       | Contents of the subsection — **required**                        |
-| `collapsible`     | `boolean`                 | `true`  | Whether the subsection is collapsible                            |
-| `initialExpanded` | `boolean`                 | —       | Initial expanded state — only applies when `collapsible` is true |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown when the subsection is collapsed                    |
-
-## Rules
-
--   `children` (main label) is mandatory.
--   `indicator` is recommended when using `type="yes"` or `type="no"` to show the tick/cross icon.
--   Always pass `indicator` for `type="checkbox"`, `type="radio"`, `type="yes"`, and `type="no"` — it shows the relevant icon (tick, dot, tick, cross) inside the toggle.
--   Use `type="radio"` when the option cannot be deselected (e.g. single-select from a list).
--   Use `compositeSection` to reveal dependent fields when a Toggle is selected — do not conditionally render fields outside the Toggle.
--   Use `subLabel` for secondary supporting text — do not embed long descriptions in `children`.
--   Use `childrenMaxLines` to constrain label height in dense list layouts.
--   Place a `Form.Label` above each toggle group to provide the question or field label.
-
-### Spacing
-
-| Layout                    | Gap                                  |
-| ------------------------- | ------------------------------------ |
-| Stacked (checkbox, radio) | `spacing-8` between each Toggle      |
-| Side by side (yes / no)   | `spacing-16` between the two Toggles |
-
-```tsx
-{/* Stacked — checkbox or radio */}
-<Form.Label>Declaration</Form.Label>
-<ToggleWrapper> {/* margin-bottom: spacing-32 — matches Form field built-in */}
-  <Toggle indicator checked={a} onChange={...}>Option A</Toggle>
-  <div style={{ marginBottom: Spacing["spacing-8"] }} />
-  <Toggle indicator checked={b} onChange={...}>Option B</Toggle>
-</ToggleWrapper>
-
-{/* Side by side — yes / no */}
-<Form.Label>Do you have a disability?</Form.Label>
-<YesNoGroup> {/* display: flex; gap: spacing-16 */}
-  <Toggle type="yes" indicator checked={val === "yes"} onChange={...}>Yes</Toggle>
-  <Toggle type="no"  indicator checked={val === "no"}  onChange={...}>No</Toggle>
-</YesNoGroup>
-```
-
-## Anti-patterns
-
--   Do not use bare `Checkbox` or `RadioButton` in forms when a labelled card container is needed — use `Toggle` instead.
--   Do not conditionally render dependent fields outside the Toggle — use `compositeSection`.
--   Do not use `type="yes"` or `type="no"` without pairing both options together in the UI.
--   Do not omit `indicator` for any Toggle type — it is required for all variants.
diff --git a/docs/skills/fds-build/resources/v3/components/tooltip.md b/docs/skills/fds-build/resources/v3/components/tooltip.md
deleted file mode 100644
index 654e8c41eb..0000000000
--- a/docs/skills/fds-build/resources/v3/components/tooltip.md
+++ /dev/null
@@ -1,62 +0,0 @@
-# Tooltip
-
-> **Not available in v4.** If you are building for v4, use `Popover` with `trigger="hover"` instead.
-
-Import: `import { Tooltip, withTooltip } from "@lifesg/react-design-system/tooltip"`
-
-## When to use
-
-Use to show brief supplementary information when a user hovers over or focuses an element. For interactive contextual information, use Popover instead.
-
-## Variants
-
-Two usage patterns are available:
-
--   **`withTooltip` HOC** — wraps an existing element to add tooltip behaviour automatically.
--   **`Tooltip` component** — a standalone tooltip that you control manually.
-
-## Usage
-
-```tsx
-import { withTooltip } from "@lifesg/react-design-system/tooltip";
-import { Button } from "@lifesg/react-design-system/button";
-
-{
-    /* Preferred: HOC wraps an existing element */
-}
-{
-    withTooltip(<Button.Default styleType="default">Save</Button.Default>, {
-        content: "Save your changes",
-    });
-}
-```
-
-## Props
-
-### withTooltip
-
-```ts
-withTooltip(component: JSX.Element, options: TooltipHOCOptionsProps): JSX.Element
-```
-
-**TooltipHOCOptionsProps**
-
-| Prop      | Type                    | Description                    |
-| --------- | ----------------------- | ------------------------------ |
-| `content` | `JSX.Element \| string` | Tooltip content — **required** |
-
-### Tooltip
-
-| Prop          | Type                                     | Default | Description                      |
-| ------------- | ---------------------------------------- | ------- | -------------------------------- |
-| `children`    | `JSX.Element \| string`                  | —       | Tooltip content — **required**   |
-| `visible`     | `boolean`                                | `false` | Controls visibility              |
-| `position`    | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Position relative to the trigger |
-| `id`          | `string`                                 | —       | Unique identifier                |
-| `className`   | `string`                                 | —       | Class selector                   |
-| `data-testid` | `string`                                 | —       | Test identifier                  |
-
-## Rules
-
--   Use `withTooltip` for most cases — it handles hover trigger logic automatically.
--   Use the `Tooltip` component directly when you need full manual control over visibility.
diff --git a/docs/skills/fds-build/resources/v3/components/typography.md b/docs/skills/fds-build/resources/v3/components/typography.md
deleted file mode 100644
index 08881eca38..0000000000
--- a/docs/skills/fds-build/resources/v3/components/typography.md
+++ /dev/null
@@ -1,92 +0,0 @@
-# Typography
-
-Import: `import { Typography } from "@lifesg/react-design-system/typography"`
-
-## When to use
-
-Use Typography components to render text content — headings, paragraphs, and links. Do not use for parent containers that have text children; use Font tokens instead (see `foundations/typography.md`).
-
-## Sub-components
-
-**Headings:** `Typography.HeadingXXL`, `Typography.HeadingXL`, `Typography.HeadingLG`, `Typography.HeadingMD`, `Typography.HeadingSM`, `Typography.HeadingXS`
-
-**Body:** `Typography.BodyBL`, `Typography.BodyMD`, `Typography.BodySM`, `Typography.BodyXS`
-
-**Links:** `Typography.LinkBL`, `Typography.LinkMD`, `Typography.LinkSM`, `Typography.LinkXS`
-
-## Variants
-
-| Component         | Default element | Usage                                  |
-| ----------------- | --------------- | -------------------------------------- |
-| `HeadingXXL`      | `h1`            | Hero/page-level title                  |
-| `HeadingXL`       | `h2`            | Page title or primary section heading  |
-| `HeadingLG`       | `h3`            | Section heading                        |
-| `HeadingMD`       | `h4`            | Subsection heading                     |
-| `HeadingSM`       | —               | Card heading, secondary heading        |
-| `HeadingXS`       | —               | Small heading                          |
-| `BodyBL`          | —               | Default paragraph text                 |
-| `BodyMD`          | —               | Medium body text                       |
-| `BodySM`          | —               | Helper text                            |
-| `BodyXS`          | —               | Metadata, timestamps                   |
-| `LinkBL/MD/SM/XS` | `<a>`           | Inline links, sized to match body text |
-
-## Usage
-
-```tsx
-import { Typography } from "@lifesg/react-design-system/typography";
-
-<>
-    <Typography.HeadingXL>Page title</Typography.HeadingXL>
-    <Typography.BodyBL paragraph>
-        Supporting body text for the section. Use{" "}
-        <Typography.LinkMD href="/learn-more">
-            link components
-        </Typography.LinkMD>{" "}
-        for inline anchors.
-    </Typography.BodyBL>
-</>;
-```
-
-## Props
-
-### Heading/Body props
-
-Inherits `HTMLElement` attributes.
-
-| Prop        | Type                                           | Default     | Description                                     |
-| ----------- | ---------------------------------------------- | ----------- | ----------------------------------------------- |
-| `as`        | `string`                                       | —           | Override rendered HTML element (e.g. `as="h1"`) |
-| `weight`    | `"regular" \| "semibold" \| "bold" \| "light"` | `"regular"` | Font weight                                     |
-| `inline`    | `boolean`                                      | —           | Display inline instead of block                 |
-| `paragraph` | `boolean`                                      | `false`     | Add bottom margin for text block separation     |
-| `maxLines`  | `number`                                       | —           | Truncate after N lines with ellipsis            |
-
-### Link props
-
-Inherits `HTMLAnchorElement` attributes.
-
-| Prop             | Type                                           | Default       | Description                  |
-| ---------------- | ---------------------------------------------- | ------------- | ---------------------------- |
-| `weight`         | `"regular" \| "semibold" \| "bold" \| "light"` | `"regular"`   | Font weight                  |
-| `external`       | `boolean`                                      | —             | Show external link indicator |
-| `underlineStyle` | `"underline" \| "none"`                        | `"underline"` | Text decoration              |
-
-## Rules
-
--   Default HTML elements: `HeadingXXL` → `h1`, `HeadingXL` → `h2`, `HeadingLG` → `h3`, `HeadingMD` → `h4`.
--   Text color is not set by the component — apply via `styled()` using Colour tokens.
--   Do not pass `color` as a prop — `TypographyProps` extends `HTMLAttributes` and forwards the value to the DOM, triggering a React warning.
--   Do not use Typography for parent containers — use Font tokens instead.
--   Heading components render default HTML elements — use the `as` prop when visual size and reading order don't match.
--   Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
--   Apply text color via `styled()` using Colour tokens — never pass `color` as a prop.
--   Use the `weight` prop to adjust emphasis, not opacity.
--   Links are underlined by default — use `underlineStyle="none"` only when context makes the link obvious.
--   Always use the `external` prop for links that navigate outside the domain.
-
-## Anti-patterns
-
--   Passing `color` directly as a prop — it forwards a Colour object to the DOM and triggers a React warning.
--   Skipping heading levels for visual sizing — use the `as` prop instead.
--   Using `<h1>` raw HTML inside a Typography component instead of `as="h1"`.
--   Using Typography on a container element to inherit font styles — use Font tokens.
diff --git a/docs/skills/fds-build/resources/v3/components/uneditable-section.md b/docs/skills/fds-build/resources/v3/components/uneditable-section.md
deleted file mode 100644
index 74e4b5bd7f..0000000000
--- a/docs/skills/fds-build/resources/v3/components/uneditable-section.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# UneditableSection
-
-Import: `import { UneditableSection } from "@lifesg/react-design-system/uneditable-section"`
-
-## When to use
-
--   Displaying read-only label/value pairs on summary or review screens.
--   Showing retrieved or pre-filled data the user cannot edit.
-
-## Sub-components
-
--   `UneditableSection.ItemSection` — wraps a group of items (extends `HTMLUListElement`)
--   `UneditableSection.Item` — individual label/value item
-
-## Usage
-
-```tsx
-import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
-
-<UneditableSection
-    title="Personal details"
-    items={[
-        { label: "Full name", value: "Jane Tan", displayWidth: "half" },
-        { label: "Date of birth", value: "1 Jan 1990", displayWidth: "half" },
-        { label: "Address", value: "123 Example Road, Singapore 123456" },
-    ]}
-/>;
-```
-
-## Props
-
-### UneditableSection
-
-| Prop            | Type                                         | Default | Description                                        |
-| --------------- | -------------------------------------------- | ------- | -------------------------------------------------- |
-| `items`         | `UneditableSectionItemProps[]`               | —       | Items displayed in label/value format              |
-| `title`         | `string`                                     | —       | Section title (rendered as `Text.H3`)              |
-| `description`   | `string`                                     | —       | Section description (rendered as `Text.Body`)      |
-| `topSection`    | `JSX.Element`                                | —       | Custom section rendered above the items            |
-| `bottomSection` | `JSX.Element`                                | —       | Custom section rendered below the items            |
-| `children`      | `JSX.Element \| JSX.Element[]`               | —       | Full body; enables custom composition              |
-| `background`    | `boolean`                                    | `true`  | Whether a background is rendered                   |
-| `stretch`       | `boolean`                                    | —       | Contents take full width of the section            |
-| `fullWidth`     | `boolean`                                    | —       | Removes default spacing/grid from `Layout.Content` |
-| `onMask`        | `(item: UneditableSectionItemProps) => void` | —       | Called when the mask icon is clicked               |
-| `onUnmask`      | `(item: UneditableSectionItemProps) => void` | —       | Called when the unmask icon is clicked             |
-| `onTryAgain`    | `(item: UneditableSectionItemProps) => void` | —       | Called when "Try again?" indicator is clicked      |
-| `id`            | `string`                                     | —       | Unique id of the component                         |
-| `className`     | `string`                                     | —       | Class selector of the component                    |
-| `data-testid`   | `string`                                     | —       | Test identifier of the component                   |
-
-### UneditableSection.ItemSection
-
-Inherits all props from `HTMLUListElement`.
-
-| Prop      | Type      | Default | Description                                       |
-| --------- | --------- | ------- | ------------------------------------------------- |
-| `stretch` | `boolean` | —       | Contents take full width of the UneditableSection |
-
-### UneditableSectionItemProps
-
-| Prop                | Type                        | Default  | Description                                                 |
-| ------------------- | --------------------------- | -------- | ----------------------------------------------------------- |
-| `label` \*          | `string`                    | —        | Label of the item                                           |
-| `value` \*          | `string \| React.ReactNode` | —        | Value of the item; masking only works for string values     |
-| `displayWidth`      | `"half" \| "full"`          | `"full"` | Column span of the item                                     |
-| `id`                | `string`                    | —        | Unique identifier of the item                               |
-| `maskRange`         | `number[]`                  | —        | [start, end] index range to mask                            |
-| `unmaskRange`       | `number[]`                  | —        | [start, end] index range to NOT mask                        |
-| `maskRegex`         | `RegExp`                    | —        | Regex matched content replaced with `maskChar`              |
-| `maskTransformer`   | `(value) => string`         | —        | Function to transform the value                             |
-| `maskChar`          | `string`                    | `•`      | Character used for masking                                  |
-| `maskState`         | `"masked" \| "unmasked"`    | —        | If undefined, no mask/unmask controls are rendered          |
-| `maskLoadingState`  | `"loading" \| "fail"`       | —        | Loading state for mask/unmask action                        |
-| `disableMaskUnmask` | `boolean`                   | —        | Value is masked/unmasked but no indicator is rendered       |
-| `alert`             | `AlertProps`                | —        | Alert rendered under the section item                       |
-| `onMask`            | `() => void`                | —        | Called when mask icon is clicked (on Item sub-component)    |
-| `onUnmask`          | `() => void`                | —        | Called when unmask icon is clicked (on Item sub-component)  |
-| `onTryAgain`        | `() => void`                | —        | Called when "Try again?" is clicked (on Item sub-component) |
-
-`*` = required
-
-## Rules
-
--   Always supply `items` with a `label` and `value` for each field.
--   Use `displayWidth: "half"` for short values (names, dates, codes) to show two per row; omit for long values.
--   Show `"—"` for any unanswered or empty field rather than leaving `value` blank.
--   Set `background={false}` when rendering inside a `BoxContainer` — the container already provides the visual boundary; the default background creates an unwanted nested box appearance.
--   Set `fullWidth` when rendering inside a container such as `BoxContainer` to remove the default `Layout.Content` spacing and allow content to fill the full width.
-
-## Anti-patterns
-
--   Do not use `UneditableSection` for editable fields — use `Form.*` components with `readOnly` instead.
--   Do not nest `UneditableSection` inside another `UneditableSection`.
diff --git a/docs/skills/fds-build/resources/v4/components/accordion.md b/docs/skills/fds-build/resources/v4/components/accordion.md
deleted file mode 100644
index 0ba95e2748..0000000000
--- a/docs/skills/fds-build/resources/v4/components/accordion.md
+++ /dev/null
@@ -1,115 +0,0 @@
-# Accordion
-
-Import: `import { Accordion } from "@lifesg/react-design-system/accordion"`
-
-## When to use
-
-Use to reduce visual complexity when users don't need all content at once — FAQs, supplementary details, or grouped settings. Do not use when all content needs to be visible at the same time.
-
-## Composition
-
-```
-Accordion                    ← container, manages expand/collapse state
-├── Accordion.Item           ← expandable panel
-├── Accordion.Item
-└── Accordion.Item
-```
-
-All children must be `Accordion.Item`. Do not place other elements directly inside `Accordion`.
-
-## Variants
-
-| `type` on `Accordion.Item` | Usage                                |
-| -------------------------- | ------------------------------------ |
-| `"default"`                | Standard title size — default        |
-| `"small"`                  | Compact title size for dense layouts |
-
-## Usage
-
-```tsx
-import { Accordion } from "@lifesg/react-design-system/accordion";
-
-// Multiple items — all collapsed by default
-const FaqSection = () => (
-    <Accordion
-        title="Frequently asked questions"
-        headingLevel={2}
-        initialDisplay="collapse-all"
-        enableExpandAll
-    >
-        <Accordion.Item title="What is this service?">
-            <p>This service lets you manage your account settings.</p>
-        </Accordion.Item>
-        <Accordion.Item title="How do I reset my password?">
-            <p>Click "Forgot password" on the login page.</p>
-        </Accordion.Item>
-        {/* JSX in title must be wrapped in <span> — title renders inside <button> */}
-        <Accordion.Item
-            title={
-                <span>
-                    Can I use <strong>bold text</strong> in a title?
-                </span>
-            }
-        >
-            <p>Yes — wrap JSX title content in a span.</p>
-        </Accordion.Item>
-    </Accordion>
-);
-
-// Controlled item — force one item open regardless of Expand All state
-const ControlledExample = () => (
-    <Accordion initialDisplay="collapse-all">
-        <Accordion.Item title="Always expanded" expanded={true}>
-            <p>This item ignores the parent initialDisplay.</p>
-        </Accordion.Item>
-        <Accordion.Item title="Follows parent state">
-            <p>This item collapses with the rest.</p>
-        </Accordion.Item>
-    </Accordion>
-);
-```
-
-## Props
-
-### Accordion props
-
-| Prop                     | Type                               | Default        | Description                                        |
-| ------------------------ | ---------------------------------- | -------------- | -------------------------------------------------- |
-| `children`               | `JSX.Element` \| `JSX.Element[]`   | —              | Accordion items — required                         |
-| `title`                  | `string`                           | —              | Group title shown above items                      |
-| `enableExpandAll`        | `boolean`                          | `true`         | Show Expand All / Collapse All button              |
-| `initialDisplay`         | `"collapse-all"` \| `"expand-all"` | `"expand-all"` | Initial expand/collapse state of all items         |
-| `showTitleInMobile`      | `boolean`                          | `false`        | Show group title on mobile viewports               |
-| `headingLevel`           | `number`                           | `2`            | Heading level for the group title                  |
-| `id`                     | `string`                           | —              | Unique id of the component                         |
-| `className`              | `string`                           | —              | Class selector                                     |
-| `data-testid`            | `string`                           | —              | Test identifier                                    |
-| `onExpandCollapseChange` | `(expanded: boolean) => void`      | —              | Callback when Expand All / Collapse All is toggled |
-
-### Accordion.Item props
-
-| Prop          | Type                             | Default     | Description                                                       |
-| ------------- | -------------------------------- | ----------- | ----------------------------------------------------------------- |
-| `children`    | `JSX.Element` \| `JSX.Element[]` | —           | Panel content — required                                          |
-| `title`       | `string` \| `JSX.Element`        | —           | Header text of the item                                           |
-| `type`        | `"default"` \| `"small"`         | `"default"` | Title text size                                                   |
-| `expanded`    | `boolean`                        | —           | Controlled expand state; overrides `initialDisplay` for this item |
-| `collapsible` | `boolean`                        | `true`      | Whether the item can be collapsed                                 |
-| `id`          | `string`                         | —           | Unique id of the item                                             |
-| `className`   | `string`                         | —           | Class selector                                                    |
-| `data-testid` | `string`                         | —           | Test identifier                                                   |
-
-## Rules
-
--   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
--   Use `Accordion.Item` for all panels — do not place content directly in `Accordion`.
--   Wrap custom JSX titles in `<span>` — item title renders inside a `<button>` and block elements are invalid inside it.
--   Individual `expanded` on `Accordion.Item` overrides Expand All / Collapse All for that item.
--   Use `initialDisplay="collapse-all"` when content is supplementary and users are unlikely to need it immediately.
-
-## Anti-patterns
-
--   Placing content directly inside `Accordion` without `Accordion.Item` wrappers.
--   Using Accordion when all content should be visible at once — use a plain layout instead.
--   Using block elements (e.g. `<div>`) directly as `title` in `Accordion.Item` — wrap in `<span>`.
--   Skipping `headingLevel` when `title` is set — this breaks heading hierarchy for screen readers.
diff --git a/docs/skills/fds-build/resources/v4/components/alert.md b/docs/skills/fds-build/resources/v4/components/alert.md
deleted file mode 100644
index 4d258c771c..0000000000
--- a/docs/skills/fds-build/resources/v4/components/alert.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Alert
-
-Import: `import { Alert } from "@lifesg/react-design-system/alert"`
-
-## When to use
-
-Use to call out important information within page sections — warnings before a user starts a task, informational notes relevant to a specific section, or non-transient status messages. Not for form validation errors (use form error patterns instead).
-
-## Variants
-
-| `type`          | When to use                                |
-| --------------- | ------------------------------------------ |
-| `"success"`     | Action completed successfully              |
-| `"error"`       | Action failed or system error              |
-| `"warning"`     | User should proceed with caution           |
-| `"info"`        | Neutral informational message              |
-| `"description"` | Descriptive content with no status meaning |
-
-## Usage
-
-```tsx
-import { Alert } from "@lifesg/react-design-system/alert";
-
-<Alert type="warning" showIcon role="alert">
-    Your session will expire in 5 minutes. Save your work to avoid losing
-    progress.
-</Alert>;
-```
-
-## Props
-
-| Prop                 | Type                                                                   | Default              | Description                                                                |
-| -------------------- | ---------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------- |
-| `type`               | `"warning"` \| `"error"` \| `"success"` \| `"info"` \| `"description"` | —                    | Style type of the alert — required                                         |
-| `sizeType`           | `"default"` \| `"small"`                                               | `"default"`          | Size of the component                                                      |
-| `showIcon`           | `boolean`                                                              | `false`              | Show icon matching the alert type                                          |
-| `actionLink`         | `HTMLAnchorAttributes`                                                 | —                    | Action link rendered inside the alert                                      |
-| `actionLinkIcon`     | `JSX.Element`                                                          | `<ArrowRightIcon />` | Custom icon for the action link                                            |
-| `customIcon`         | `JSX.Element`                                                          | —                    | Custom replacement icon for the alert                                      |
-| `maxCollapsedHeight` | `number`                                                               | —                    | Maximum visible height of content in px; shows expand toggle when exceeded |
-
-Inherits all `HTMLDivElement` attributes.
-
-## Rules
-
--   Always use `showIcon` — icons provide immediate visual recognition of alert severity.
--   Use `actionLink` for recoverable errors (retry, undo, view details).
--   Set `role` based on how the alert appears: `"alert"` for dynamic alerts triggered by user action, `"status"` for background status updates, omit for static content visible on page load.
--   Use `maxCollapsedHeight` to avoid long content overwhelming the layout.
--   `role` is not set automatically — set `role="alert"` for dynamic alerts, `role="status"` for background updates, and omit for static content.
-
-## Anti-patterns
-
--   Using Alert for form field validation errors — use inline form error patterns instead.
--   Omitting `role` on dynamically injected alerts — screen readers will not announce them.
--   Using `type="description"` with `showIcon` — description has no semantic status meaning.
diff --git a/docs/skills/fds-build/resources/v4/components/animation.md b/docs/skills/fds-build/resources/v4/components/animation.md
deleted file mode 100644
index 96fc9e6277..0000000000
--- a/docs/skills/fds-build/resources/v4/components/animation.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Animation
-
-Import: `import { Animation } from "@lifesg/react-design-system/animation"`
-
-## Props
-
-| Prop          | Type     | Default | Description                      |
-| ------------- | -------- | ------- | -------------------------------- |
-| `id`          | `string` | —       | Unique id of the component       |
-| `className`   | `string` | —       | Class selector of the component  |
-| `data-testid` | `string` | —       | Test identifier of the component |
-
-### Customised variant additional props
-
-| Prop    | Type     | Default | Description                            |
-| ------- | -------- | ------- | -------------------------------------- |
-| `color` | `string` | —       | Color applied on the animated elements |
diff --git a/docs/skills/fds-build/resources/v4/components/avatar.md b/docs/skills/fds-build/resources/v4/components/avatar.md
deleted file mode 100644
index 6bc22170eb..0000000000
--- a/docs/skills/fds-build/resources/v4/components/avatar.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Avatar
-
-Import: `import { Avatar } from "@lifesg/react-design-system/avatar"`
-
-## Props
-
-Inherits `HTMLAttributes<HTMLDivElement>`.
-
-| Prop          | Type                      | Default     | Description                                                                         |
-| ------------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------- |
-| `children`    | `string` \| `JSX.Element` | —           | Content displayed in the avatar — typically an initial or custom element — required |
-| `sizeType`    | `"default"` \| `"small"`  | `"default"` | Size of the avatar                                                                  |
-| `data-testid` | `string`                  | `"avatar"`  | Test identifier                                                                     |
diff --git a/docs/skills/fds-build/resources/v4/components/badge.md b/docs/skills/fds-build/resources/v4/components/badge.md
deleted file mode 100644
index 32d04c1e6d..0000000000
--- a/docs/skills/fds-build/resources/v4/components/badge.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Badge
-
-Import: `import { Badge } from "@lifesg/react-design-system/badge"`
-
-## Props
-
-Inherits `HTMLAttributes<HTMLDivElement>`.
-
-| Prop          | Type                                                                                        | Default     | Description                                                     |
-| ------------- | ------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------- |
-| `variant`     | `"number"` \| `"number-with-border"` \| `"dot"` \| `"dot-with-border"` \| `"square-number"` | `"number"`  | Visual style of the badge                                       |
-| `color`       | `"default"` \| `"important"`                                                                | `"default"` | Color tone of the badge                                         |
-| `count`       | `number`                                                                                    | —           | Number to display — applies to number-based variants only       |
-| `badgeOffset` | `[string, string]`                                                                          | —           | Offset from top-right corner as `[left, top]` CSS length values |
-| `children`    | `JSX.Element`                                                                               | —           | Content to wrap — badge is positioned in the top-right corner   |
-| `data-testid` | `string`                                                                                    | `"badge"`   | Test identifier                                                 |
-
-## Rules
-
--   `count` only applies to `"number"`, `"number-with-border"`, and `"square-number"` variants.
--   When `children` is provided, the badge overlays the top-right corner of the child element.
diff --git a/docs/skills/fds-build/resources/v4/components/box-container.md b/docs/skills/fds-build/resources/v4/components/box-container.md
deleted file mode 100644
index 9ed4525216..0000000000
--- a/docs/skills/fds-build/resources/v4/components/box-container.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# BoxContainer
-
-Import: `import { BoxContainer } from "@lifesg/react-design-system/box-container"`
-
-## When to use
-
-Use for a single collapsible panel displaying form data or structured content — typically a named section within a form or detail view. Supports an optional header action and a status indicator to flag section-level errors or warnings.
-
-## Sub-components
-
-### BoxContainerSubComponentTestIds
-
-| Prop               | Type     | Description                            |
-| ------------------ | -------- | -------------------------------------- |
-| `title`            | `string` | Test id for the header title           |
-| `displayStateIcon` | `string` | Test id for the display state icon     |
-| `handle`           | `string` | Test id for the expand/collapse handle |
-
-## Variants
-
-| `displayState` | When to use                                |
-| -------------- | ------------------------------------------ |
-| `"default"`    | Normal state — no icon                     |
-| `"error"`      | Section has validation errors              |
-| `"warning"`    | Section has a warning that needs attention |
-
-## Props
-
-| Prop                    | Type                                    | Default     | Description                                                       |
-| ----------------------- | --------------------------------------- | ----------- | ----------------------------------------------------------------- |
-| `title`                 | `string` \| `JSX.Element`               | —           | Header title — required                                           |
-| `children`              | `JSX.Element` \| `JSX.Element[]`        | —           | Panel content — required                                          |
-| `collapsible`           | `boolean`                               | `true`      | Allow the panel to be collapsed                                   |
-| `expanded`              | `boolean`                               | `false`     | Controlled expand state (only valid when `collapsible` is `true`) |
-| `displayState`          | `"default"` \| `"error"` \| `"warning"` | `"default"` | Icon shown alongside title to indicate status                     |
-| `callToActionComponent` | `JSX.Element`                           | —           | Custom action rendered in the header                              |
-| `clickableHeader`       | `boolean`                               | —           | Make the entire header clickable to toggle expand/collapse        |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds`       | —           | Test ids for sub-elements                                         |
-| `id`                    | `string`                                | —           | Unique id of the component                                        |
-| `className`             | `string`                                | —           | Class selector                                                    |
-| `data-testid`           | `string`                                | —           | Test identifier                                                   |
-
-## Rules
-
--   Use `displayState` to indicate section-level status — not as a substitute for inline field errors.
--   Use `callToActionComponent` for section-level actions only — not for form submission buttons.
--   Use `collapsible={false}` when the content must always be visible.
--   Use `clickableHeader` to make the full header row the expand/collapse trigger — improves usability for dense layouts.
-
-## Anti-patterns
-
--   Using `displayState="error"` instead of inline form field errors — `displayState` signals section-level status only.
--   Using `callToActionComponent` for form submission — use a dedicated submit button outside the container.
--   Nesting BoxContainer inside another BoxContainer.
diff --git a/docs/skills/fds-build/resources/v4/components/breadcrumb.md b/docs/skills/fds-build/resources/v4/components/breadcrumb.md
deleted file mode 100644
index da62443b36..0000000000
--- a/docs/skills/fds-build/resources/v4/components/breadcrumb.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# Breadcrumb
-
-Import: `import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb"`
-
-## When to use
-
-Use on pages within a multi-level hierarchy to help users navigate to parent pages.
-
-Do not use on:
-
--   The home page
--   Pages with no parent
--   Focused flows such as forms or wizards
-
-## Variants
-
-| `separatorStyle`      | When to use              |
-| --------------------- | ------------------------ |
-| `"chevron"` (default) | Standard pages           |
-| `"slash"`             | Alternative visual style |
-
-## Usage
-
-```tsx
-import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
-
-<Breadcrumb
-    links={[
-        { children: "Home", href: "/" },
-        { children: "Services", href: "/services" },
-        { children: "Apply" },
-    ]}
-/>;
-```
-
-## Props
-
-| Prop             | Type                          | Default     | Description                                                                                              |
-| ---------------- | ----------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
-| `links`          | `HTMLAnchorElement[]`         | —           | Breadcrumb items — **required**. Each item accepts standard anchor attributes (`children`, `href`, etc.) |
-| `separatorStyle` | `"chevron" \| "slash"`        | `"chevron"` | Separator style between items                                                                            |
-| `fadeColor`      | `string[] \| FadeColorSet`    | —           | Gradient color for scroll fade on overflow; set to match page background                                 |
-| `fadePosition`   | `"left" \| "right" \| "both"` | `"both"`    | Which edges show the scroll fade                                                                         |
-| `itemStyle`      | `CSS-JS string`               | —           | Custom style applied to each breadcrumb item                                                             |
-| `id`             | `string`                      | —           | Unique identifier                                                                                        |
-| `className`      | `string`                      | —           | Class selector                                                                                           |
-| `data-testid`    | `string`                      | —           | Test identifier                                                                                          |
-
-### FadeColorSet
-
-| Prop    | Type       | Description                 |
-| ------- | ---------- | --------------------------- |
-| `left`  | `string[]` | Color(s) for the left fade  |
-| `right` | `string[]` | Color(s) for the right fade |
-
-## Rules
-
--   Always place the current page last in `links` — omit `href` on the last item.
--   Keep breadcrumb trails to 4 items or fewer; 5 or more items automatically collapse the middle into an overflow menu.
--   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
--   The last item in `links` is rendered as the current page (non-clickable, `aria-current="page"`). Omit `href` on the last item.
--   When 5 or more items are present, middle items automatically collapse into an overflow menu.
--   On mobile, breadcrumbs scroll horizontally with a fade effect at the edges controlled by `fadeColor` and `fadePosition`.
-
-## Anti-patterns
-
--   Do not add `href` to the last breadcrumb item — it represents the current page and must not be clickable.
--   Do not use breadcrumbs on single-level or flat navigation structures.
--   Do not use breadcrumbs inside forms or wizard flows.
diff --git a/docs/skills/fds-build/resources/v4/components/button.md b/docs/skills/fds-build/resources/v4/components/button.md
deleted file mode 100644
index 49537ab075..0000000000
--- a/docs/skills/fds-build/resources/v4/components/button.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Button
-
-Import: `import { Button } from "@lifesg/react-design-system/button"`
-
-## When to use
-
-```
-┌─ "Which button component?"
-│
-├─ Icon only (no text)?
-│  └─ IconButton — aria-label required
-│
-├─ Text + icon together?
-│  └─ ButtonWithIcon — icon left (default) or right for directional actions
-│
-└─ Text only?
-   └─ Button
-```
-
-## Size variants
-
-| Usage                                       | When to use                                             |
-| ------------------------------------------- | ------------------------------------------------------- |
-| `<Button>` or `<Button sizeType="default">` | Standard size — use for all buttons including hero CTAs |
-| `<Button sizeType="small">`                 | Dense layouts, toolbars                                 |
-| `<Button sizeType="large">`                 | Only when explicitly specified — do not use by default  |
-
-> **Deprecated:** `Button.Default`, `Button.Small`, `Button.Large` sub-components are deprecated in v4. Use `<Button sizeType="...">` instead.
-
-## Variants
-
-| `styleType`   | When to use                           |
-| ------------- | ------------------------------------- |
-| `"default"`   | Main action on the page               |
-| `"secondary"` | Cancel, go back, alternative option   |
-| `"light"`     | On colored or dark backgrounds        |
-| `"link"`      | Tertiary, de-emphasized inline action |
-
-Add `danger` for destructive actions (delete, remove) — applies to any `styleType`.
-
-## Usage
-
-```tsx
-import { Button } from "@lifesg/react-design-system/button";
-
-<Button styleType="default" onClick={() => {}}>
-    Save changes
-</Button>;
-```
-
-## Props
-
-| Prop                    | Type                                                  | Default     | Description                                        |
-| ----------------------- | ----------------------------------------------------- | ----------- | -------------------------------------------------- |
-| `styleType`             | `"default"` \| `"secondary"` \| `"light"` \| `"link"` | `"default"` | Visual style of the button                         |
-| `loading`               | `boolean`                                             | `false`     | Displays a loading spinner                         |
-| `danger`                | `boolean`                                             | `false`     | Applies a red color scheme for destructive actions |
-| `focusableWhenDisabled` | `boolean`                                             | `false`     | Keeps button focusable when disabled               |
-
-Also inherits all props from `HTMLButtonElement` (e.g. `disabled`, `type`, `onClick`, `children`).
-
-## Rules
-
--   `styleType` is mandatory.
--   Use sentence case for all labels — "Save changes" not "Save Changes".
--   Use concise verb + noun labels — avoid "OK", "Yes", "Click here".
--   Do not use `sizeType="large"` unless explicitly required — default size is correct for hero CTAs.
--   Combine `loading` and `disabled` during async operations to prevent double-submission.
--   Never use raw `<button>` elements — always use design system button components.
--   Do not nest buttons inside buttons or links.
--   `danger` applies to any `styleType`.
-
-## Anti-patterns
-
--   Do not use `sizeType="large"` as a default choice — it is a special case only.
--   Do not use `Button.Default`, `Button.Small`, or `Button.Large` — these sub-components are deprecated in v4.
--   Do not use vague labels like "OK" or "Yes" — labels must describe the action.
--   Do not use `loading` alone without also setting `disabled`.
diff --git a/docs/skills/fds-build/resources/v4/components/calendar.md b/docs/skills/fds-build/resources/v4/components/calendar.md
deleted file mode 100644
index f3340e089f..0000000000
--- a/docs/skills/fds-build/resources/v4/components/calendar.md
+++ /dev/null
@@ -1,109 +0,0 @@
-# Calendar
-
-Import: `import { Calendar } from "@lifesg/react-design-system/calendar"`
-
-## When to use
-
--   Displaying an inline date picker when a full-page or panel calendar is preferable over a dropdown.
--   Use `variant="single"` for standard single-date selection.
--   Use `variant="multi"` when the user must pick multiple non-contiguous dates (e.g. recurring appointments).
-
-## Usage
-
-### variant="single" — single date selection
-
-```tsx
-import { useState } from "react";
-import { Calendar } from "@lifesg/react-design-system/calendar";
-
-const AppointmentCalendar = () => {
-    const [date, setDate] = useState("2024-06-15");
-
-    return (
-        <Calendar
-            variant="single"
-            value={date}
-            minDate="2024-01-01"
-            maxDate="2024-12-31"
-            onChange={(selected) => setDate(selected)}
-        />
-    );
-};
-```
-
-### variant="multi" — multiple date selection
-
-Note `values` (plural) and `onChange` receives the full updated array.
-
-```tsx
-import { useState } from "react";
-import { Calendar } from "@lifesg/react-design-system/calendar";
-
-const MultiDateCalendar = () => {
-    const [dates, setDates] = useState<string[]>([]);
-
-    return (
-        <Calendar
-            variant="multi"
-            values={dates}
-            minDate="2024-01-01"
-            maxDate="2024-12-31"
-            maxSelectable={5}
-            onChange={(selected) => setDates(selected)}
-        />
-    );
-};
-```
-
-## Props — shared
-
-| Prop                       | Type                                | Default      | Description                                                          |
-| -------------------------- | ----------------------------------- | ------------ | -------------------------------------------------------------------- |
-| `variant`                  | `"single" \| "multi"`               | `"single"`   | Calendar selection mode                                              |
-| `styleType`                | `"bordered" \| "no-border"`         | `"bordered"` | Whether a border is rendered                                         |
-| `disabledDates`            | `string[]`                          | —            | Dates to disable, in `YYYY-MM-DD` format                             |
-| `minDate`                  | `string`                            | —            | Minimum selectable date in `YYYY-MM-DD` format (inclusive)           |
-| `maxDate`                  | `string`                            | —            | Maximum selectable date in `YYYY-MM-DD` format (inclusive)           |
-| `showActiveMonthDaysOnly`  | `boolean`                           | `false`      | Show only the selected month's dates                                 |
-| `onHover`                  | `(value: string) => void`           | —            | Called with hovered date (`YYYY-MM-DD`) or empty string when leaving |
-| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void` | —            | Called when visible month/year changes                               |
-| `id`                       | `string`                            | —            | Unique identifier of the component                                   |
-| `className`                | `string`                            | —            | Class selector of the component                                      |
-| `data-testid`              | `string`                            | —            | Test identifier of the component                                     |
-
-## Props — variant="single"
-
-| Prop       | Type                      | Default | Description                           |
-| ---------- | ------------------------- | ------- | ------------------------------------- |
-| `value`    | `string`                  | —       | Selected date in `YYYY-MM-DD` format  |
-| `onChange` | `(value: string) => void` | —       | Called when the selected date changes |
-
-## Props — variant="multi"
-
-| Prop            | Type                         | Default | Description                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------ |
-| `values`        | `string[]`                   | —       | Array of selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                     | —       | Minimum number of dates required for a valid selection |
-| `maxSelectable` | `number`                     | —       | Maximum number of dates that can be selected           |
-| `onChange`      | `(values: string[]) => void` | —       | Called when the selection changes                      |
-
-## YearMonthDisplay
-
-| Prop    | Type     | Description                           |
-| ------- | -------- | ------------------------------------- |
-| `year`  | `number` | Current visible year in `YYYY` format |
-| `month` | `number` | Current visible month, 1–12           |
-
-## Rules
-
--   `variant="single"` uses `value: string` and `onChange: (date: string) => void`.
--   `variant="multi"` uses `values: string[]` and `onChange: (dates: string[]) => void` — note the plural prop names.
--   All dates must be in `YYYY-MM-DD` format.
--   Use `minDate`/`maxDate` to constrain selectable range.
--   Use `disabledDates` for specific non-selectable dates within the allowed range.
-
-## Anti-patterns
-
--   Do not pass `value` to `variant="multi"` — the prop is `values` (plural).
--   Do not pass `values` to `variant="single"` — the prop is `value` (singular).
--   Do not use Calendar inside a form for simple date entry — prefer `Form.DateInput` for that pattern.
diff --git a/docs/skills/fds-build/resources/v4/components/checkbox.md b/docs/skills/fds-build/resources/v4/components/checkbox.md
deleted file mode 100644
index cf2bb2ad68..0000000000
--- a/docs/skills/fds-build/resources/v4/components/checkbox.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Checkbox
-
-Import: `import { Checkbox } from "@lifesg/react-design-system/checkbox"`
-
-## When to use
-
--   Simple boolean selections where a compact tick-box is sufficient.
--   Table row selection (single or "select all").
--   Filter lists with multiple independent options.
--   "Select all" patterns using the `indeterminate` state.
-
-Prefer `Toggle` over `Checkbox` when building form inputs that need a visible card-style label container.
-
-## Variants
-
-| `displaySize` | When to use                    |
-| ------------- | ------------------------------ |
-| `"default"`   | Standard use                   |
-| `"small"`     | Dense layouts, inline controls |
-
-## Usage
-
-```tsx
-import { Checkbox } from "@lifesg/react-design-system/checkbox";
-
-<label>
-    <Checkbox checked={agreed} onChange={(e) => {}} />I agree to the terms and
-    conditions
-</label>;
-```
-
-## Props
-
-| Prop                    | Type                                               | Default     | Description                                                                  |
-| ----------------------- | -------------------------------------------------- | ----------- | ---------------------------------------------------------------------------- |
-| `displaySize`           | `"default"` \| `"small"`                           | `"default"` | Display size of the component                                                |
-| `checked`               | `boolean`                                          | —           | Controlled checked state                                                     |
-| `indeterminate`         | `boolean`                                          | —           | Indeterminate state — use for "select all" when only some items are selected |
-| `focusableWhenDisabled` | `boolean`                                          | —           | Keeps component focusable when disabled, preventing all user interaction     |
-| `onChange`              | `(e: React.ChangeEvent<HTMLInputElement>) => void` | —           | Called when the checked state changes — inherited from `InputHTMLAttributes` |
-
-Also inherits all props from `React.InputHTMLAttributes<HTMLInputElement>` (e.g. `name`, `value`, `disabled`, `aria-*`).
-
-## Rules
-
--   Always pair with a visible label — wrap in `<label>` or use `aria-label`.
--   Use `indeterminate` for "select all" controls when only some items in a list are selected — not as a permanent state.
--   Use the same `name` attribute when grouping checkboxes in a form.
--   No dedicated `disabled` prop — use the inherited `disabled` from `InputHTMLAttributes`, or `focusableWhenDisabled` to retain focus while blocking interaction.
--   `indeterminate` is a visual state; manage controlled `checked` separately.
-
-## Anti-patterns
-
--   Do not use `indeterminate` as a permanent or final state — it is a transitional indicator only.
--   Do not use `Checkbox` alone without a label — always provide accessible text.
--   Do not use `Checkbox` when only one option from a set can be selected — use `RadioButton` instead.
diff --git a/docs/skills/fds-build/resources/v4/components/countdown-timer.md b/docs/skills/fds-build/resources/v4/components/countdown-timer.md
deleted file mode 100644
index 81c701bb60..0000000000
--- a/docs/skills/fds-build/resources/v4/components/countdown-timer.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# CountdownTimer
-
-Import: `import { CountdownTimer } from "@lifesg/react-design-system/countdown-timer"`
-
-## Props
-
-| Prop               | Type                                            | Default        | Description                                                                          |
-| ------------------ | ----------------------------------------------- | -------------- | ------------------------------------------------------------------------------------ |
-| `show` \*          | `boolean`                                       | —              | Starts the countdown timer when true                                                 |
-| `timer` \*         | `number`                                        | —              | Countdown duration in seconds                                                        |
-| `timestamp`        | `number`                                        | —              | Unix timestamp (ms) at which the countdown ends; required if `timer` is not provided |
-| `notifyTimer`      | `number`                                        | —              | Notification threshold in seconds                                                    |
-| `offset`           | `{ top: number; left: number; right: number; }` | `{ top: 168 }` | Sticky position on desktop/tablet (px)                                               |
-| `mobileOffset`     | `{ top: number; }`                              | `{ top: 80 }`  | Sticky position on mobile (px)                                                       |
-| `align`            | `"left" \| "right"`                             | `"right"`      | Horizontal alignment of the sticky component                                         |
-| `fixed`            | `boolean`                                       | `true`         | Whether the component is sticky when scrolled out of view                            |
-| `reminderInterval` | `number`                                        | `120`          | Interval in seconds for polite screen reader reminders                               |
-| `onTick`           | `(seconds: number) => void`                     | —              | Called every second when value ≤ `notifyTimer` (not guaranteed to be precise)        |
-| `onNotify`         | `() => void`                                    | —              | Called once when the timer value drops below `notifyTimer`                           |
-| `onFinish`         | `() => void`                                    | —              | Called when the timer reaches zero                                                   |
-| `className`        | `string`                                        | —              | Class selector of the component                                                      |
-| `data-testid`      | `string`                                        | —              | Test identifier of the component                                                     |
-
-`*` = required
diff --git a/docs/skills/fds-build/resources/v4/components/data-table.md b/docs/skills/fds-build/resources/v4/components/data-table.md
deleted file mode 100644
index 85afc4b459..0000000000
--- a/docs/skills/fds-build/resources/v4/components/data-table.md
+++ /dev/null
@@ -1,145 +0,0 @@
-# DataTable
-
-Import: `import { DataTable } from "@lifesg/react-design-system/data-table"`
-
-## When to use
-
--   Displaying tabular data with optional sorting, row selection, and custom cell rendering.
--   Use `enableMultiSelect` + `enableSelectAll` when users need to act on multiple rows at once.
-
-## Usage
-
-### Column definitions, sorting, selection, and custom cell rendering
-
-```tsx
-import { useState, useMemo } from "react";
-import {
-    DataTable,
-    SortIndicatorsProps,
-} from "@lifesg/react-design-system/data-table";
-import { Pill } from "@lifesg/react-design-system/pill";
-
-const rows = [
-    { id: "1", name: "Alice", status: "active", score: 90 },
-    { id: "2", name: "Bob", status: "inactive", score: 72 },
-    { id: "3", name: "Carol", status: "active", score: 85 },
-];
-
-const Example = () => {
-    const [selectedIds, setSelectedIds] = useState<string[]>([]);
-    const [sortState, setSortState] = useState<SortIndicatorsProps>({
-        score: "desc",
-    });
-
-    // onSelect: toggle a single row id
-    const handleSelect = (rowId: string, isSelected: boolean) => {
-        setSelectedIds((prev) =>
-            isSelected ? [...prev, rowId] : prev.filter((id) => id !== rowId)
-        );
-    };
-
-    // onSelectAll: isAllSelected=true means "clear all"; false means "select all"
-    const handleSelectAll = (isAllSelected: boolean) => {
-        setSelectedIds(isAllSelected ? [] : rows.map((r) => r.id));
-    };
-
-    const handleHeaderClick = (fieldKey: string) => {
-        if (fieldKey === "score") {
-            setSortState({ score: sortState.score === "asc" ? "desc" : "asc" });
-        }
-    };
-
-    const sorted = useMemo(
-        () =>
-            [...rows].sort((a, b) =>
-                sortState.score === "asc"
-                    ? a.score - b.score
-                    : b.score - a.score
-            ),
-        [sortState]
-    );
-
-    return (
-        <DataTable
-            headers={[
-                { fieldKey: "name", label: "Name", keyColumn: true },
-                { fieldKey: "status", label: "Status" },
-                { fieldKey: "score", label: "Score", clickable: true },
-            ]}
-            rows={sorted.map((row) => ({
-                ...row,
-                // custom cell: render status as a Pill
-                status: <Pill type="outline">{row.status}</Pill>,
-            }))}
-            selectedIds={selectedIds}
-            disabledIds={["2"]}
-            sortIndicators={sortState}
-            enableMultiSelect
-            enableSelectAll
-            onSelect={handleSelect}
-            onSelectAll={handleSelectAll}
-            onHeaderClick={handleHeaderClick}
-        />
-    );
-};
-```
-
-## Props
-
-| Prop                    | Type                                           | Default     | Description                                               |
-| ----------------------- | ---------------------------------------------- | ----------- | --------------------------------------------------------- |
-| `headers` \*            | `(string \| HeaderItemProps)[]`                | —           | Configuration for each header column                      |
-| `rows`                  | `RowProps[]`                                   | —           | The list of data                                          |
-| `selectedIds`           | `string[]`                                     | —           | The ids of selected items                                 |
-| `disabledIds`           | `string[]`                                     | —           | The ids of disabled items                                 |
-| `sortIndicators`        | `{ [fieldKey]: "asc" \| "desc" }`              | —           | Sort indicator display state for each column              |
-| `alternatingRows`       | `boolean`                                      | —           | Every alternate row gets a different background colour    |
-| `loadState`             | `"success" \| "loading"`                       | `"success"` | Table load state; shows animation while loading           |
-| `renderCustomEmptyView` | `() => React.ReactNode`                        | —           | Custom view rendered when the table is empty              |
-| `emptyView`             | `ErrorDisplayAttributes`                       | —           | Override props for the empty view display                 |
-| `enableMultiSelect`     | `boolean`                                      | —           | Enables a checkbox in each row for multi-selection        |
-| `enableSelectAll`       | `boolean`                                      | —           | Enables a header checkbox to select all / clear selection |
-| `enableStickyHeader`    | `boolean`                                      | —           | Fixes the header to the top                               |
-| `enableActionBar`       | `boolean`                                      | —           | Shows an action bar when one or more rows are selected    |
-| `actionBarContent`      | `React.ReactNode`                              | —           | Custom content rendered within the action bar             |
-| `onClearSelectionClick` | `() => void`                                   | —           | Called when the clear button in the action bar is clicked |
-| `onSelect`              | `(rowId: string, isSelected: boolean) => void` | —           | Called when a row is selected                             |
-| `onSelectAll`           | `(isAllSelected: boolean) => void`             | —           | Called when all rows are selected                         |
-| `onHeaderClick`         | `(fieldKey: string) => void`                   | —           | Called with the column field key when a header is clicked |
-| `id`                    | `string`                                       | —           | Unique identifier of the component                        |
-| `className`             | `string`                                       | —           | Class selector of the component                           |
-| `data-testid`           | `string`                                       | —           | Test identifier of the component                          |
-
-`*` = required
-
-## HeaderItemProps
-
-| Prop          | Type                        | Default | Description                                                            |
-| ------------- | --------------------------- | ------- | ---------------------------------------------------------------------- |
-| `fieldKey` \* | `string`                    | —       | Key name in the row item object                                        |
-| `label` \*    | `string \| React.ReactNode` | —       | Display label for the column header                                    |
-| `clickable`   | `boolean`                   | —       | If true, `onHeaderClick` is called when the cell is clicked            |
-| `style`       | `CSSProperties`             | —       | Custom styles for the column header cell                               |
-| `keyColumn`   | `boolean`                   | —       | Marks this column as descriptive for screen reader row checkbox labels |
-
-## RowProps
-
-| Prop         | Type                                                                           | Default | Description                             |
-| ------------ | ------------------------------------------------------------------------------ | ------- | --------------------------------------- |
-| `id` \*      | `string`                                                                       | —       | Row id                                  |
-| `[fieldKey]` | `string \| number \| React.ReactNode \| (row, renderProps) => React.ReactNode` | —       | Other properties on the row item object |
-
-## Rules
-
--   Each row object must have a unique `id: string` field.
--   `selectedIds` and `disabledIds` are arrays of row `id` strings — manage them in external state.
--   `onSelect(rowId, isSelected)` fires per row; toggle the id into/out of your `selectedIds` array.
--   `onSelectAll(isAllSelected)` fires when the header checkbox is clicked; `isAllSelected` is `true` when the action should clear all selections (the parameter name is inverted — see example).
--   For sortable columns, set `clickable: true` on the header and handle `onHeaderClick(fieldKey)`.
--   Custom cell rendering: set a row field to a `ReactNode` or a render function `(row, renderProps) => ReactNode`.
-
-## Anti-patterns
-
--   Do not derive `selectedIds` from row data alone without external state — the table is uncontrolled for selection without it.
--   Do not omit `id` on row objects — selection and disabled logic will break silently.
--   Do not add `clickable: true` to a header without wiring `onHeaderClick` — clicks will silently do nothing.
diff --git a/docs/skills/fds-build/resources/v4/components/date-navigator.md b/docs/skills/fds-build/resources/v4/components/date-navigator.md
deleted file mode 100644
index bbaa0c0f5e..0000000000
--- a/docs/skills/fds-build/resources/v4/components/date-navigator.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# DateNavigator
-
-Import: `import { DateNavigator } from "@lifesg/react-design-system/date-navigator"`
-
-## Props
-
-| Prop                     | Type                            | Default         | Description                                                            |
-| ------------------------ | ------------------------------- | --------------- | ---------------------------------------------------------------------- |
-| `selectedDate` \*        | `string`                        | —               | Current displayed date in `YYYY-MM-DD` format                          |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void` | —               | Called on left arrow navigation button click                           |
-| `onRightArrowClick` \*   | `(currentDate: string) => void` | —               | Called on right arrow navigation button click                          |
-| `minDate`                | `string`                        | —               | Minimum date allowed for navigation in `YYYY-MM-DD` format (inclusive) |
-| `maxDate`                | `string`                        | —               | Maximum date allowed for navigation in `YYYY-MM-DD` format (inclusive) |
-| `loading`                | `boolean`                       | —               | Disables navigation buttons while loading                              |
-| `showDateAsShortForm`    | `boolean`                       | —               | Shows the date in short form                                           |
-| `showCurrentDateAsToday` | `boolean`                       | —               | Shows today's system date as "Today"                                   |
-| `onCalendarDateSelect`   | `(currentDate: string) => void` | —               | Called on a calendar date selection                                    |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`        | `document body` | Root element that hosts the calendar dropdown                          |
-| `id`                     | `string`                        | —               | Identifier of the component                                            |
-| `className`              | `string`                        | —               | Class selector of the component                                        |
-| `data-testid`            | `string`                        | —               | Test identifier of the component                                       |
-
-`*` = required
-
-## Rules
-
--   Only override `dropdownRootNode` if you need the dropdown to share a stacking context with a scroll container — may cause z-index issues.
diff --git a/docs/skills/fds-build/resources/v4/components/divider.md b/docs/skills/fds-build/resources/v4/components/divider.md
deleted file mode 100644
index 2603aed8a3..0000000000
--- a/docs/skills/fds-build/resources/v4/components/divider.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Divider
-
-Import: `import { Divider } from "@lifesg/react-design-system/divider"`
-
-## Props
-
-Inherits all props from `HTMLElement`.
-
-| Prop          | Type                                           | Default   | Description                                                   |
-| ------------- | ---------------------------------------------- | --------- | ------------------------------------------------------------- |
-| `thickness`   | `number`                                       | `1`       | Height of the Divider in px                                   |
-| `lineStyle`   | `"solid" \| "dashed"`                          | `"solid"` | Style of the divider line                                     |
-| `layoutType`  | `"flex" \| "grid"`                             | `"flex"`  | Layout type context                                           |
-| `color`       | `string \| (props: ThemeStyleProps) => string` | —         | Color of the divider line                                     |
-| `mobileCols`  | `number \| number[]`                           | `4`       | Column span on mobile; only applies with `layoutType="grid"`  |
-| `tabletCols`  | `number \| number[]`                           | `8`       | Column span on tablet; only applies with `layoutType="grid"`  |
-| `desktopCols` | `number \| number[]`                           | `12`      | Column span on desktop; only applies with `layoutType="grid"` |
-
-## Rules
-
--   `mobileCols`, `tabletCols`, `desktopCols` follow the same semantics as `Layout.ColDiv` — see ColDiv docs for details.
diff --git a/docs/skills/fds-build/resources/v4/components/drawer.md b/docs/skills/fds-build/resources/v4/components/drawer.md
deleted file mode 100644
index f2b3ced59e..0000000000
--- a/docs/skills/fds-build/resources/v4/components/drawer.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Drawer
-
-Import: `import { Drawer } from "@lifesg/react-design-system/drawer"`
-
-## When to use
-
-Use to show supplementary content or actions without navigating away from the current page — for example, filter panels or detail views.
-
-Do not use for:
-
--   Primary forms that require focused attention
--   Flows that need the full viewport
-
-## Usage
-
-```tsx
-import { useState } from "react";
-import { Drawer } from "@lifesg/react-design-system/drawer";
-import { Button } from "@lifesg/react-design-system/button";
-import { Text } from "@lifesg/react-design-system/text";
-
-const FilterDrawer = () => {
-    const [show, setShow] = useState(false);
-
-    const handleClose = () => setShow(false);
-
-    return (
-        <>
-            <Button.Default onClick={() => setShow(true)}>
-                Open filters
-            </Button.Default>
-
-            <Drawer
-                show={show}
-                heading="Filter options"
-                onClose={handleClose}
-                onOverlayClick={handleClose}
-            >
-                <div style={{ padding: "1.5rem" }}>
-                    <Text.H4 style={{ marginBottom: "0.75rem" }}>
-                        Category
-                    </Text.H4>
-                    <Text.Body style={{ marginBottom: "2rem" }}>
-                        Filter content goes here.
-                    </Text.Body>
-                    <Button.Default styleType="secondary" onClick={handleClose}>
-                        Close
-                    </Button.Default>
-                </div>
-            </Drawer>
-        </>
-    );
-};
-```
-
-## Props
-
-| Prop             | Type              | Default | Description                                 |
-| ---------------- | ----------------- | ------- | ------------------------------------------- |
-| `show`           | `boolean`         | —       | Controls visibility                         |
-| `heading`        | `string`          | —       | Header text of the drawer panel             |
-| `onClose`        | `() => void`      | —       | Called when the close button is clicked     |
-| `onOverlayClick` | `() => void`      | —       | Called when the backdrop overlay is clicked |
-| `children`       | `React.ReactNode` | —       | Panel content                               |
-| `id`             | `string`          | —       | Unique identifier                           |
-| `className`      | `string`          | —       | Class selector                              |
-| `data-testid`    | `string`          | —       | Test identifier                             |
-
-## Rules
-
--   Always provide `onClose` so users can dismiss the panel via the close button.
--   Provide `onOverlayClick` to allow dismissal by clicking outside the panel; set it to the same handler as `onClose` unless the overlay should not close the panel.
--   Use `heading` to give the drawer a descriptive title for the user and for screen readers.
--   The drawer slides in from the right edge of the viewport.
--   Content scrolls independently within the panel when it exceeds the panel height.
-
-## Anti-patterns
-
--   Do not use the Drawer for full forms — use a dedicated page or Modal instead.
--   Do not omit `onClose` — users must have a way to dismiss the panel.
diff --git a/docs/skills/fds-build/resources/v4/components/error-display.md b/docs/skills/fds-build/resources/v4/components/error-display.md
deleted file mode 100644
index c605f4904d..0000000000
--- a/docs/skills/fds-build/resources/v4/components/error-display.md
+++ /dev/null
@@ -1,114 +0,0 @@
-# ErrorDisplay
-
-Import: `import { ErrorDisplay } from "@lifesg/react-design-system/error-display"`
-
-## When to use
-
-Use for full-page or full-section states where the primary content cannot be shown — HTTP errors, empty results, session states, and system messages. It handles illustration, title, description, and action button as a unit.
-
-Do not build custom error pages with raw Typography + Button — always use `ErrorDisplay` so illustrations and copy stay consistent across products.
-
-## Variants
-
-| `type`                          | When to use                                                      |
-| ------------------------------- | ---------------------------------------------------------------- |
-| `"no-item-found"`               | Search or filter returned no results                             |
-| `"404"`                         | Page not found                                                   |
-| `"403"`                         | Access denied / permission error                                 |
-| `"500"`                         | Internal server error                                            |
-| `"400"`                         | Bad request                                                      |
-| `"408"`                         | Request timeout                                                  |
-| `"502"`                         | Bad gateway                                                      |
-| `"503"`                         | Service unavailable                                              |
-| `"504"`                         | Gateway timeout                                                  |
-| `"maintenance"`                 | Planned downtime — requires `additionalProps.dateString`         |
-| `"inactivity"`                  | Session timeout warning — requires `additionalProps.secondsLeft` |
-| `"logout"`                      | User has been logged out                                         |
-| `"warning"`                     | General warning state                                            |
-| `"confirmation"`                | Action confirmed (e.g. submission complete)                      |
-| `"link-error"`                  | Broken or expired link                                           |
-| `"insufficient-credits"`        | User lacks credits to proceed                                    |
-| `"payment-unsuccessful"`        | Payment failed                                                   |
-| `"transfer-unsuccessful"`       | Transfer failed                                                  |
-| `"unsupported-browser"`         | Browser not supported                                            |
-| `"partially-supported-browser"` | Browser partially supported                                      |
-
-## Usage
-
-```tsx
-import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
-
-{
-    /* No search results */
-}
-<ErrorDisplay
-    type="no-item-found"
-    title="No results found"
-    description="Try adjusting your search or filters."
-    actionButton={{ children: "Clear filters", onClick: handleClear }}
-/>;
-
-{
-    /* Page not found */
-}
-<ErrorDisplay type="404" />;
-
-{
-    /* Maintenance with scheduled date */
-}
-<ErrorDisplay
-    type="maintenance"
-    additionalProps={{ dateString: "1 Jan 2025, 8:00am to 10:00am" }}
-/>;
-
-{
-    /* Session inactivity warning */
-}
-<ErrorDisplay
-    type="inactivity"
-    additionalProps={{ secondsLeft: 60, reminderInterval: 30 }}
-/>;
-```
-
-## Props
-
-| Prop                 | Type                                                                                                                                                                                                                                                                                                                           | Default               | Description                                        |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | -------------------------------------------------- |
-| `type` \*            | `"400" \| "403" \| "404" \| "408" \| "500" \| "502" \| "503" \| "504" \| "confirmation" \| "inactivity" \| "insufficient-credits" \| "link-error" \| "logout" \| "warning" \| "maintenance" \| "no-item-found" \| "payment-unsuccessful" \| "transfer-unsuccessful" \| "unsupported-browser" \| "partially-supported-browser"` | —                     | The type of error                                  |
-| `img`                | `HTMLImageElement`                                                                                                                                                                                                                                                                                                             | —                     | Error image properties                             |
-| `title`              | `string`                                                                                                                                                                                                                                                                                                                       | —                     | Title of the ErrorDisplay                          |
-| `description`        | `string \| JSX.Element`                                                                                                                                                                                                                                                                                                        | —                     | Description of the ErrorDisplay                    |
-| `actionButton`       | `HTMLButtonElement`                                                                                                                                                                                                                                                                                                            | `children: "Proceed"` | Action button at the bottom                        |
-| `illustrationScheme` | `"base" \| "bookingsg" \| "rbs"`                                                                                                                                                                                                                                                                                               | —                     | Use a resource scheme instead of the default theme |
-| `additionalProps`    | `MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes`                                                                                                                                                                                                                                                            | —                     | Additional properties for certain error types      |
-| `imageOnly`          | `boolean`                                                                                                                                                                                                                                                                                                                      | —                     | Renders only the image                             |
-
-`*` = required
-
-## MaintenanceAdditionalAttributes
-
-| Prop            | Type     | Default | Description                            |
-| --------------- | -------- | ------- | -------------------------------------- |
-| `dateString` \* | `string` | —       | Date display for the maintenance error |
-
-## InactivityAdditionalAttributes
-
-| Prop             | Type     | Default | Description                                          |
-| ---------------- | -------- | ------- | ---------------------------------------------------- |
-| `secondsLeft` \* | `number` | —       | Time remaining in seconds for the inactivity display |
-
-## Rules
-
--   Always use `ErrorDisplay` for error/empty states — never build custom error pages with raw components.
--   `type` is required — it determines the default illustration, title, and description.
--   Override `title` and `description` only when the defaults don't fit your context.
--   `actionButton` accepts standard `ButtonProps` — label and `onClick` are the common fields.
--   `"maintenance"` requires `additionalProps.dateString` to render the scheduled date in the description.
--   `"inactivity"` requires `additionalProps.secondsLeft` for the countdown display.
--   For listing pages use `type="no-item-found"` — it has the correct "empty results" illustration.
-
-## Anti-patterns
-
--   Do not use `imageOnly` unless rendering inside a constrained space where text would overflow.
--   Do not hardcode error page titles/descriptions that duplicate what `ErrorDisplay` already provides by default.
--   Do not use `type="warning"` as a generic placeholder — it implies a system-level warning, not a validation message (use `Alert` for that).
diff --git a/docs/skills/fds-build/resources/v4/components/feedback-rating.md b/docs/skills/fds-build/resources/v4/components/feedback-rating.md
deleted file mode 100644
index 92bb2f0851..0000000000
--- a/docs/skills/fds-build/resources/v4/components/feedback-rating.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# FeedbackRating
-
-Import: `import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating"`
-
-## When to use
-
-Use at the end of a flow or session to collect a star rating and an optional submission action from the user.
-
-## Usage
-
-### Complete controlled pattern
-
-```tsx
-import { useState } from "react";
-import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating";
-
-const RatingWidget = () => {
-    // Track rating separately — onSubmit does NOT receive it
-    const [rating, setRating] = useState(0);
-
-    const handleSubmit = () => {
-        // Read from state, not from onSubmit arguments (there are none)
-        submitFeedback({ stars: rating });
-    };
-
-    return (
-        <FeedbackRating
-            rating={rating}
-            onRatingChange={(value) => setRating(value)}
-            onSubmit={handleSubmit}
-            description="How was your experience?"
-            buttonLabel="Send feedback"
-        />
-    );
-};
-```
-
-**Key gotcha:** `onSubmit` has the signature `() => void` — it carries no payload. The rating value is only available through the `rating` state you control via `onRatingChange`.
-
-## Props
-
-| Prop                | Type                      | Default                  | Description                                        |
-| ------------------- | ------------------------- | ------------------------ | -------------------------------------------------- |
-| `rating` \*         | `number`                  | —                        | Current selected rating state                      |
-| `onRatingChange` \* | `(value: number) => void` | —                        | Called when a star is clicked                      |
-| `onSubmit` \*       | `() => void`              | —                        | Called when the submit button is clicked           |
-| `imgSrc`            | `string`                  | Default banner image     | Banner image src; pass empty string to hide banner |
-| `description`       | `string`                  | `"Rate your experience"` | Description text displayed above the stars         |
-| `buttonLabel`       | `string`                  | `"Submit"`               | Submit button label                                |
-| `id`                | `string`                  | —                        | Unique id of the component                         |
-| `className`         | `string`                  | —                        | Class selector of the component                    |
-| `data-testid`       | `string`                  | —                        | Test identifier of the component                   |
-
-`*` = required
-
-## Rules
-
--   All three props — `rating`, `onRatingChange`, `onSubmit` — are required.
--   `onSubmit` does **not** receive the rating value. Track the rating separately via `onRatingChange` state and read it inside `onSubmit`.
--   `rating` must be controlled state; the component does not manage selection internally.
-
-## Anti-patterns
-
--   Do not try to read the rating from inside `onSubmit`'s arguments — it receives none. Always use the state value set by `onRatingChange`.
diff --git a/docs/skills/fds-build/resources/v4/components/file-download.md b/docs/skills/fds-build/resources/v4/components/file-download.md
deleted file mode 100644
index 504a7851cc..0000000000
--- a/docs/skills/fds-build/resources/v4/components/file-download.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# FileDownload
-
-Import: `import { FileDownload } from "@lifesg/react-design-system/file-download"`
-
-## Sub-components
-
--   `FileItemProps` — shape of each item in `fileItems`
-
-## Props
-
-| Prop            | Type                                                     | Default      | Description                               |
-| --------------- | -------------------------------------------------------- | ------------ | ----------------------------------------- |
-| `fileItems` \*  | `FileItemProps[]`                                        | —            | The files to be rendered                  |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —            | Called when a file item is clicked        |
-| `title`         | `string \| JSX.Element`                                  | —            | A title to be displayed for the component |
-| `description`   | `string \| JSX.Element`                                  | —            | The description to be displayed           |
-| `styleType`     | `"bordered" \| "no-border"`                              | `"bordered"` | The style type for the component          |
-| `id`            | `string`                                                 | —            | The unique id of the component            |
-| `className`     | `string`                                                 | —            | The class selector of the component       |
-| `data-testid`   | `string`                                                 | —            | The test identifier for the component     |
-
-`*` = required
-
-## FileItemProps
-
-| Prop                    | Type                        | Default | Description                                   |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------- |
-| `id` \*                 | `string`                    | —       | The unique identifier of the file             |
-| `name` \*               | `string`                    | —       | The name of the file                          |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file                     |
-| `filePath` \*           | `string`                    | —       | The remote path of the file                   |
-| `size`                  | `number`                    | —       | The size of the file in bytes                 |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Custom error message when file download fails |
-| `thumbnailImageDataUrl` | `string`                    | —       | The thumbnail of the file                     |
-| `truncateText`          | `boolean`                   | `true`  | Indicates if text should be truncated         |
-| `ready`                 | `boolean`                   | `true`  | Indicates if the file is ready for download   |
-
-## Rules
-
--   `fileItems` and `onDownload` are required.
--   On `FileItemProps`: `id`, `name`, `mimeType`, and `filePath` are required.
diff --git a/docs/skills/fds-build/resources/v4/components/file-upload.md b/docs/skills/fds-build/resources/v4/components/file-upload.md
deleted file mode 100644
index 8c1f2d6e3c..0000000000
--- a/docs/skills/fds-build/resources/v4/components/file-upload.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# FileUpload
-
-Import: `import { FileUpload } from "@lifesg/react-design-system/file-upload"`
-
-## When to use
-
--   Forms that require users to attach one or more files (e.g. supporting documents, ID scans, images).
--   Use `sortable` when file order matters for downstream processing.
--   Use `editableFileItems` when image files need alt-text or descriptions.
--   Use `readOnly` on review or summary screens to display uploaded files without allowing changes.
-
-## Usage
-
-```tsx
-import { FileUpload } from "@lifesg/react-design-system/file-upload";
-
-<FileUpload
-    title="Upload supporting documents"
-    description="PDF, JPG, or PNG. Max 5 MB each."
-    accept=".pdf,.jpg,.png"
-    fileItems={fileItems}
-    onChange={(files) => {}}
-    onDelete={(item) => {}}
-/>;
-```
-
-## Props
-
-| Prop                       | Type                                   | Default      | Description                                                             |
-| -------------------------- | -------------------------------------- | ------------ | ----------------------------------------------------------------------- |
-| `fileItems`                | `FileItemProps[]`                      | —            | Files currently displayed in the list                                   |
-| `title`                    | `string \| JSX.Element`                | —            | Title displayed above the upload area                                   |
-| `description`              | `string \| JSX.Element`                | —            | Supporting text inside the upload area                                  |
-| `styleType`                | `"bordered" \| "no-border"`            | `"bordered"` | Visual style of the component                                           |
-| `maxFiles`                 | `number`                               | —            | Maximum number of files allowed                                         |
-| `warning`                  | `string \| JSX.Element`                | —            | Warning message shown below the upload area                             |
-| `errorMessage`             | `string \| JSX.Element`                | —            | General error message for the component                                 |
-| `editableFileItems`        | `boolean`                              | —            | Allows users to edit descriptions on image file items                   |
-| `fileDescriptionMaxLength` | `number`                               | —            | Maximum length of the image file description                            |
-| `descriptionRequired`      | `boolean`                              | `true`       | When `false`, the save button is enabled even with an empty description |
-| `descriptionLabel`         | `FormLabelProps`                       | —            | Overrides the default label and subtext for the description field       |
-| `sortable`                 | `boolean`                              | —            | Allows users to reorder file items via drag                             |
-| `readOnly`                 | `boolean`                              | —            | Shows uploaded files without the upload area                            |
-| `disabled`                 | `boolean`                              | —            | Disables the component                                                  |
-| `id`                       | `string`                               | —            | Unique identifier of the component                                      |
-| `name`                     | `string`                               | —            | Name attribute of the component                                         |
-| `className`                | `string`                               | —            | Class selector of the component                                         |
-| `onChange`                 | `(files: File[]) => void`              | —            | Called when files are added via drag-drop or click                      |
-| `onEdit`                   | `(fileItem: FileItemProps) => void`    | —            | Called when a file item description is updated                          |
-| `onDelete`                 | `(fileItem: FileItemProps) => void`    | —            | Called when a file item's delete button is clicked                      |
-| `onSort`                   | `(fileItems: FileItemProps[]) => void` | —            | Called when files are reordered via drag                                |
-
-Also inherits additional props from the HTML `<input type="file">` element (e.g. `accept`).
-
-## Custom labels
-
-| Prop                             | Type     | Default          | Description                                       |
-| -------------------------------- | -------- | ---------------- | ------------------------------------------------- |
-| `customLabels.uploadButtonLabel` | `string` | `"Upload files"` | Label of the button that triggers the file dialog |
-
-## FileItemProps
-
-| Prop                    | Type                        | Required | Description                              |
-| ----------------------- | --------------------------- | -------- | ---------------------------------------- |
-| `id`                    | `string`                    | Yes      | Unique identifier for the file           |
-| `name`                  | `string`                    | Yes      | File name displayed in the list          |
-| `type`                  | `string`                    | Yes      | MIME type of the file                    |
-| `size`                  | `number`                    | Yes      | File size in bytes                       |
-| `description`           | `string`                    | —        | Alt text or description for the file     |
-| `progress`              | `number`                    | —        | Upload progress from 0 to 1              |
-| `errorMessage`          | `string \| React.ReactNode` | —        | Per-file error message                   |
-| `thumbnailImageDataUrl` | `string`                    | —        | Thumbnail data URL rendered for the file |
-| `truncateText`          | `boolean`                   | `true`   | Truncates long file names                |
-
-## Rules
-
--   Always manage `fileItems` state in the parent — the component does not store files internally.
--   Always handle `onChange` to convert incoming `File[]` into `FileItemProps[]` and add them to state.
--   Always handle `onDelete` to remove the corresponding item from state.
--   Use `maxFiles` to enforce the maximum number of attachments allowed by the backend.
--   Use `progress` on individual `FileItemProps` to show per-file upload progress.
--   Use `errorMessage` on individual `FileItemProps` to surface per-file upload errors.
--   Use the component-level `errorMessage` for overall validation errors (e.g. "At least one file is required").
--   Use `accept` (inherited from `<input type="file">`) to restrict file types to what the backend accepts.
-
-## Anti-patterns
-
--   Do not use without wiring `onChange` and `onDelete` — the list will not update.
--   Do not store files in component state inside the same component that renders `FileUpload` — hoist state to the form level.
--   Do not skip `id`, `name`, `type`, and `size` in `FileItemProps` — they are required fields.
--   Do not use `editableFileItems` for non-image files — description editing only applies to images.
diff --git a/docs/skills/fds-build/resources/v4/components/filter.md b/docs/skills/fds-build/resources/v4/components/filter.md
deleted file mode 100644
index c97de982d0..0000000000
--- a/docs/skills/fds-build/resources/v4/components/filter.md
+++ /dev/null
@@ -1,211 +0,0 @@
-# Filter
-
-Import: `import { Filter } from "@lifesg/react-design-system/filter"`
-
-## When to use
-
-Use on listing pages to narrow a result set. `Filter` automatically switches between a desktop sidebar and a mobile modal at the `lg-max` breakpoint.
-
-## Composition
-
-```
-Filter                                  ← recommended: auto-switches sidebar ↔ modal at lg breakpoint
-├── Filter.Item title="Sort by"         ← section header + collapsible wrapper
-│   └── {RadioButton group}             ← sort options use RadioButton, not Filter.Checkbox
-├── Filter.Item title="Category"
-│   └── Filter.Checkbox                 ← multi-select filter options
-└── Filter.Item title="..."
-    └── Filter.Checkbox
-```
-
-Manual variants (bypass auto-responsive):
-
-```
-Filter.Sidebar                          ← desktop sidebar only
-Filter.Modal                            ← mobile modal only
-Filter.Page                             ← full-page filter (mobile-only flows)
-```
-
-`Filter.Item` is the only valid direct child of `Filter`, `Filter.Sidebar`, or `Filter.Modal`. Use `RadioButton` for sort (single-select); use `Filter.Checkbox` for multi-select filters.
-
-## Variants
-
-| Variant                  | When to use                                                     |
-| ------------------------ | --------------------------------------------------------------- |
-| `<Filter>` (recommended) | Auto-responsive — desktop sidebar + mobile modal                |
-| `<Filter.Sidebar>`       | Desktop sidebar only — when bypassing auto-responsive behaviour |
-| `<Filter.Modal>`         | Mobile modal only — when bypassing auto-responsive behaviour    |
-
-## Usage
-
-### Auto-responsive Filter (recommended)
-
-`Filter` renders a sidebar on desktop and a modal on mobile automatically. Pass children as a function to receive `mode` (`"desktop" | "mobile"`) when you need to render differently per viewport.
-
-```tsx
-import { useState } from "react";
-import { Filter } from "@lifesg/react-design-system/filter";
-import { RadioButton } from "@lifesg/react-design-system/radio-button";
-
-const ListingFilter = () => {
-    const [category, setCategory] = useState("all");
-    const [activeCount, setActiveCount] = useState(0);
-
-    const handleClear = () => {
-        setCategory("all");
-        setActiveCount(0);
-    };
-
-    return (
-        <Filter
-            count={activeCount}
-            onClear={handleClear}
-            onDone={() => {
-                /* commit draft state */
-            }}
-            onDismiss={() => {
-                /* discard draft state */
-            }}
-        >
-            {(mode) => (
-                <>
-                    <Filter.Item title="Category">
-                        <RadioButton
-                            name="category"
-                            value="all"
-                            checked={category === "all"}
-                            onChange={() => setCategory("all")}
-                        >
-                            All
-                        </RadioButton>
-                        <RadioButton
-                            name="category"
-                            value="news"
-                            checked={category === "news"}
-                            onChange={() => setCategory("news")}
-                        >
-                            News
-                        </RadioButton>
-                    </Filter.Item>
-                    <Filter.Item title="Sort by" collapsible={false}>
-                        <RadioButton name="sort" value="newest" defaultChecked>
-                            Newest first
-                        </RadioButton>
-                        <RadioButton name="sort" value="oldest">
-                            Oldest first
-                        </RadioButton>
-                    </Filter.Item>
-                </>
-            )}
-        </Filter>
-    );
-};
-```
-
-Key points:
-
--   `onDone` and `onDismiss` are mobile-only callbacks; they are ignored on desktop.
--   `collapsible={false}` on sort sections keeps them always expanded.
--   `count` drives the active-filter badge in the header.
-
-## Props
-
-### Filter
-
-Auto-responsive: renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile at the `lg-max` breakpoint.
-
-| Prop                      | Type                                                               | Default   | Description                                                      |
-| ------------------------- | ------------------------------------------------------------------ | --------- | ---------------------------------------------------------------- |
-| `children`                | `React.ReactNode \| (mode: Mode) => React.ReactNode`               | —         | `Filter.Item` children — **required**                            |
-| `onClear`                 | `() => void`                                                       | —         | Called when the Clear button is pressed                          |
-| `clearButtonDisabled`     | `boolean`                                                          | `false`   | Disable the Clear button                                         |
-| `count`                   | `number`                                                           | —         | Selected filter count shown in the header when greater than zero |
-| `customLabels`            | `FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps`     | —         | Override built-in label strings                                  |
-| `onDismiss`               | `() => void`                                                       | —         | Mobile only — called when the modal is dismissed                 |
-| `onDone`                  | `() => void`                                                       | —         | Mobile only — called when Done is tapped                         |
-| `onModalOpen`             | `() => void`                                                       | —         | Mobile only — called when the modal opens                        |
-| `toggleFilterButtonStyle` | `"default" \| "secondary" \| "light" \| "link"`                    | `"light"` | Mobile only — style of the "Filters" toggle button               |
-| `insets`                  | `{ top?: number, bottom?: number, left?: number, right?: number }` | —         | Mobile only — safe-area insets for notched devices               |
-| `id`                      | `string`                                                           | —         | Unique identifier                                                |
-| `className`               | `string`                                                           | —         | Class selector                                                   |
-| `data-testid`             | `string`                                                           | —         | Test identifier                                                  |
-
-### Custom labels (Filter / Filter.Modal)
-
-| Key                       | Default                   |
-| ------------------------- | ------------------------- |
-| `headerTitle`             | `"Filters"`               |
-| `clearButtonLabel`        | `"Clear"`                 |
-| `toggleFilterButtonLabel` | `"Filters"` (mobile only) |
-| `doneButtonLabel`         | `"Done"` (mobile only)    |
-
-### Filter.Sidebar
-
-| Prop                  | Type                                                  | Default | Description                             |
-| --------------------- | ----------------------------------------------------- | ------- | --------------------------------------- |
-| `children`            | `React.ReactNode`                                     | —       | `Filter.Item` components — **required** |
-| `onClear`             | `() => void`                                          | —       | Called when the Clear button is pressed |
-| `clearButtonDisabled` | `boolean`                                             | `false` | Disable the Clear button                |
-| `count`               | `number`                                              | —       | Selected filter count                   |
-| `customLabels`        | `{ headerTitle?: string, clearButtonLabel?: string }` | —       | Override label strings                  |
-| `id`                  | `string`                                              | —       | Unique identifier                       |
-| `className`           | `string`                                              | —       | Class selector                          |
-| `data-testid`         | `string`                                              | —       | Test identifier                         |
-
-### Filter.Modal
-
-Inherits Filter.Sidebar props, plus:
-
-| Prop                      | Type                                                               | Default   | Description                                       |
-| ------------------------- | ------------------------------------------------------------------ | --------- | ------------------------------------------------- |
-| `onDismiss`               | `() => void`                                                       | —         | Called when the modal is dismissed                |
-| `onDone`                  | `() => void`                                                       | —         | Called when Done is tapped                        |
-| `onModalOpen`             | `() => void`                                                       | —         | Called when the modal opens                       |
-| `toggleFilterButtonStyle` | `"default" \| "secondary" \| "light" \| "link"`                    | `"light"` | Style of the "Filters" toggle button              |
-| `insets`                  | `{ top?: number, bottom?: number, left?: number, right?: number }` | —         | Safe-area insets for notched devices              |
-| `customLabels`            | `FilterModalCustomLabelProps`                                      | —         | Override label strings including mobile-only keys |
-
-### Filter.Item
-
-| Prop                | Type                                                 | Default | Description                                     |
-| ------------------- | ---------------------------------------------------- | ------- | ----------------------------------------------- |
-| `children`          | `React.ReactNode \| (mode: Mode) => React.ReactNode` | —       | Filter controls — **required**                  |
-| `title`             | `string`                                             | —       | Section heading                                 |
-| `collapsible`       | `boolean`                                            | `true`  | Allow collapsing the section (desktop only)     |
-| `initialExpanded`   | `boolean`                                            | `false` | Initial expand state (uncontrolled)             |
-| `expanded`          | `boolean`                                            | —       | Controlled expand state                         |
-| `onExpandChange`    | `(expanded: boolean) => void`                        | —       | Called when expand state changes (desktop only) |
-| `showDivider`       | `boolean`                                            | `true`  | Show header divider in desktop mode             |
-| `showMobileDivider` | `boolean`                                            | `true`  | Show divider in mobile mode                     |
-| `id`                | `string`                                             | —       | Unique identifier                               |
-| `className`         | `string`                                             | —       | Class selector                                  |
-| `data-testid`       | `string`                                             | —       | Test identifier                                 |
-
-### Filter.Page
-
-| Prop        | Type              | Description                          |
-| ----------- | ----------------- | ------------------------------------ |
-| `children`  | `React.ReactNode` | Page content — **required**          |
-| `onDismiss` | `() => void`      | Called when the back arrow is tapped |
-| `onDone`    | `() => void`      | Called when Done is tapped           |
-
-`Mode` is `"desktop" | "mobile"`.
-
-## Rules
-
--   `Filter` is the recommended entry point — it automatically renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile.
--   Always provide `onClear` to reset all filter state in a single handler.
--   Set `collapsible={false}` on sort sections — sort options should always be visible.
--   Pass children as a function `(mode) => ReactNode` to render different content on desktop vs mobile.
--   `Filter.Modal` has a built-in Done button — do not add an external Apply button; use `onDone` to react to it.
--   Add a keyword search input (`Form.Input`) above the `Filter` component — search is not built into `Filter`.
--   Use `count` to show the number of active filters in the header.
--   Use `Filter.Sidebar` or `Filter.Modal` directly only when overriding the responsive behaviour.
--   `Filter.Page` is used inside `Filter.Modal` only, for drill-down sub-pages.
-
-## Anti-patterns
-
--   Do not pass `viewport`, `showSearch`, or `searchText` — these props do not exist.
--   Do not use `headerTitle`, `toggleFilterButtonLabel`, or `doneButtonLabel` directly on `Filter` — these are deprecated. Use `customLabels` instead.
--   Do not add an external Apply button when using `Filter.Modal` — the built-in Done button handles it.
--   Do not use `Filter.Sidebar` and `Filter.Modal` separately unless you need to override responsive behaviour — use `Filter` instead.
diff --git a/docs/skills/fds-build/resources/v4/components/footer.md b/docs/skills/fds-build/resources/v4/components/footer.md
deleted file mode 100644
index 3454193946..0000000000
--- a/docs/skills/fds-build/resources/v4/components/footer.md
+++ /dev/null
@@ -1,95 +0,0 @@
-# Footer
-
-Import: `import { Footer } from "@lifesg/react-design-system/footer"`
-
-## When to use
-
-Place at the bottom of every page. Required on all pages.
-
-## Variants
-
-| Variant                 | When to use                                                      |
-| ----------------------- | ---------------------------------------------------------------- |
-| `<Footer />` (no props) | Standard pages — disclaimer links and copyright are theme-driven |
-| `links`                 | Pages with navigational footer links (max 2 columns)             |
-| `copyrightInfo`         | Custom copyright text required                                   |
-| `layout="stretch"`      | Full-width layout — pair with `Navbar layout="stretch"`          |
-
-## Usage
-
-```tsx
-import { Footer } from "@lifesg/react-design-system/footer";
-
-{
-    /* Standard footer — no props required */
-}
-<Footer />;
-
-{
-    /* Footer with navigation links */
-}
-<Footer
-    links={[
-        [
-            { children: "About us", href: "/about" },
-            { children: "Contact", href: "/contact" },
-        ],
-    ]}
-    lastUpdated={new Date("2025-01-01")}
-/>;
-```
-
-## Props
-
-| Prop                | Type                                 | Default       | Description                                                                                   |
-| ------------------- | ------------------------------------ | ------------- | --------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`             | —             | Navigation links in the top section — array of columns                                        |
-| `children`          | `JSX.Element \| JSX.Element[]`       | —             | Custom content for the top section; overrides `links` and addons                              |
-| `showDownloadAddon` | `boolean`                            | —             | Show app store download buttons                                                               |
-| `showResourceAddon` | `boolean`                            | —             | Show theme-specific resource links; `showDownloadAddon` takes precedence when both are `true` |
-| `disclaimerLinks`   | `DisclaimerLinks`                    | —             | Override href/onClick for mandatory disclaimer links                                          |
-| `copyrightInfo`     | `string`                             | —             | Custom copyright text; overrides auto-generated text and makes `lastUpdated` irrelevant       |
-| `logoSrc`           | `string`                             | theme default | Logo image source                                                                             |
-| `logoAlt`           | `string`                             | `""`          | Logo image alt text                                                                           |
-| `lastUpdated`       | `Date`                               | —             | Date shown in "Last updated" text (ignored when `copyrightInfo` is set)                       |
-| `hideLogo`          | `boolean`                            | —             | Hide the logo; links align to the leftmost area                                               |
-| `layout`            | `"default" \| "stretch"`             | `"default"`   | Layout type — must match Navbar `layout`                                                      |
-| `onFooterLinkClick` | `(link: FooterLinkProps<T>) => void` | —             | Called when a footer link is clicked                                                          |
-| `id`                | `string`                             | —             | Unique identifier                                                                             |
-| `className`         | `string`                             | —             | Class selector                                                                                |
-| `data-testid`       | `string`                             | —             | Test identifier                                                                               |
-
-## FooterLinkProps\<T\>
-
-Inherits `TypographyLinkProps`, plus:
-
-| Prop           | Type     | Description                                 |
-| -------------- | -------- | ------------------------------------------- |
-| `data-options` | `T`      | Custom attributes passed to the link object |
-| `data-testid`  | `string` | Test identifier                             |
-
-## DisclaimerLinks
-
-| Prop                  | Type                  | Default    | Description                                                         |
-| --------------------- | --------------------- | ---------- | ------------------------------------------------------------------- |
-| `privacy`             | `TypographyLinkProps` | predefined | Privacy Statement link — text is fixed to "Privacy Statement"       |
-| `termsOfUse`          | `TypographyLinkProps` | predefined | Terms of Use link — text is fixed to "Terms of Use"                 |
-| `reportVulnerability` | `TypographyLinkProps` | predefined | Report Vulnerability link — text is fixed to "Report Vulnerability" |
-
-## Rules
-
--   Use `<Footer />` with no props for standard pages — do not add unnecessary props.
--   `layout` must match the Navbar `layout` prop; do not mix `"default"` and `"stretch"`.
--   Wrap the app in a flex column layout so the footer stays pinned to the bottom on short pages:
-    -   Outer wrapper: `display: flex; flex-direction: column; min-height: 100vh`
-    -   Page content area: `flex: 1`
--   Disclaimer link text cannot be customised — only `href` and event handlers can be overridden via `disclaimerLinks`.
--   `copyrightInfo` overrides `lastUpdated` — do not set both.
--   When `showDownloadAddon` and `showResourceAddon` are both `true`, download takes precedence.
--   `links` is a 2D array: each inner array is one column of links.
-
-## Anti-patterns
-
--   Do not omit the flex layout wrapper — the footer will not stick to the bottom on short pages.
--   Do not pass `children` and `links` together — `children` replaces the top section entirely.
--   Do not customise disclaimer link labels — they are legally fixed strings.
diff --git a/docs/skills/fds-build/resources/v4/components/form-date-input.md b/docs/skills/fds-build/resources/v4/components/form-date-input.md
deleted file mode 100644
index b7ccb20db7..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-date-input.md
+++ /dev/null
@@ -1,92 +0,0 @@
-# Form.DateInput
-
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a single date from the user (e.g. date of birth, appointment date, submission deadline).
--   Any form field that requires calendar-based date selection.
-
-## Usage
-
-```tsx
-import styles from "./MyForm.module.css";
-
-<Form.DateInput className={styles.dateInput} ... />
-```
-
-```css
-/* MyForm.module.css */
-:where(body.fds-breakpoint-lg-min) .dateInput {
-    max-width: 24rem;
-}
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class — `max-width` constrains the component without conflicting with its internal `width: 100%`.
-
-## Props
-
-| Prop                       | Type                                | Default         | Description                                                                      |
-| -------------------------- | ----------------------------------- | --------------- | -------------------------------------------------------------------------------- |
-| `value`                    | `string`                            | —               | Selected date in `YYYY-MM-DD` format                                             |
-| `disabled`                 | `boolean`                           | —               | Disables the component; entry not allowed                                        |
-| `readOnly`                 | `boolean`                           | —               | Read-only state; selection not allowed                                           |
-| `error`                    | `boolean`                           | —               | Sets error display (not needed if `errorMessage` is set)                         |
-| `id`                       | `string`                            | —               | Unique identifier of the component                                               |
-| `className`                | `string`                            | —               | Class selector of the component                                                  |
-| `data-testid`              | `string`                            | —               | Test identifier of the component                                                 |
-| `minDate`                  | `string`                            | —               | Minimum selectable date in `YYYY-MM-DD` format (inclusive)                       |
-| `maxDate`                  | `string`                            | —               | Maximum selectable date in `YYYY-MM-DD` format (inclusive)                       |
-| `disabledDates`            | `string[]`                          | —               | Specific dates to disable, each in `YYYY-MM-DD` format                           |
-| `allowDisabledSelection`   | `boolean`                           | —               | If true, dates disabled by `minDate`/`maxDate`/`disabledDates` remain selectable |
-| `hideInputKeyboard`        | `boolean`                           | —               | Hides the input keyboard when the field is focused                               |
-| `withButton`               | `boolean`                           | `true`          | Renders Done/Cancel action buttons                                               |
-| `zIndex`                   | `number`                            | `50`            | z-index of the calendar dropdown                                                 |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`            | `document.body` | Root element hosting the calendar dropdown                                       |
-| `onChange`                 | `(date: string) => void`            | —               | Called when a date is selected; returns `YYYY-MM-DD`                             |
-| `onBlur`                   | `() => void`                        | —               | Called on field defocus                                                          |
-| `onFocus`                  | `() => void`                        | —               | Called when field is focused                                                     |
-| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void` | —               | Called when the displayed month/year changes                                     |
-
-## YearMonthDisplay
-
-| Prop    | Type     | Description                       |
-| ------- | -------- | --------------------------------- |
-| `year`  | `number` | Currently displayed year (`YYYY`) |
-| `month` | `number` | Currently displayed month (1–12)  |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## FormLabelProps
-
-| Prop       | Type                    | Default | Description                           |
-| ---------- | ----------------------- | ------- | ------------------------------------- |
-| `addon`    | `FormLabelAddonProps`   | —       | Tooltip or popover addon on the label |
-| `subtitle` | `string \| JSX.Element` | —       | Subtitle text for the label           |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `YYYY-MM-DD` string.
--   Use `minDate`/`maxDate` to constrain selectable dates to valid business ranges.
--   Use `disabledDates` for known blackout dates (e.g. public holidays).
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
--   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
--   Use `readOnly` on review or summary screens where the value should be visible but not editable.
--   Specify `dropdownRootNode` if the component is inside a scrollable container to prevent the calendar from clipping.
--   Date strings use `YYYY-MM-DD` format throughout (value, minDate, maxDate, disabledDates, onChange return).
-
-## Anti-patterns
-
--   Do not use a plain text input for date collection — the picker enforces valid date formats automatically.
--   Do not set `allowDisabledSelection` unless there is a specific UX reason to allow out-of-range dates.
--   Do not rely on `error` prop alone without an `errorMessage`; users need descriptive feedback.
--   Do not use for date-range selection — use `Form.DateRangeInput` instead.
diff --git a/docs/skills/fds-build/resources/v4/components/form-date-range-input.md b/docs/skills/fds-build/resources/v4/components/form-date-range-input.md
deleted file mode 100644
index 5fbb1eafce..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-date-range-input.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# Form.DateRangeInput
-
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a start and end date from the user (e.g. leave period, booking period, date range filter).
--   Use `variant="week"` when the selection must always be a full calendar week.
--   Use `variant="fixed-range"` when the duration is predetermined (e.g. always 7 days).
-
-## Usage
-
-`onChange` always receives both start and end as `YYYY-MM-DD` strings, even for week and fixed-range variants.
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const LeavePeriodField = () => {
-    const [start, setStart] = useState("");
-    const [end, setEnd] = useState("");
-
-    return (
-        <Form.DateRangeInput
-            label="Leave period"
-            value={start}
-            valueEnd={end}
-            minDate="2024-01-01"
-            maxDate="2024-12-31"
-            onChange={(s, e) => {
-                setStart(s);
-                setEnd(e);
-            }}
-        />
-    );
-};
-```
-
-```tsx
-{
-    /* variant="week" — whole-week selection */
-}
-<Form.DateRangeInput
-    label="Select week"
-    variant="week"
-    value={start}
-    valueEnd={end}
-    onChange={(s, e) => {
-        setStart(s);
-        setEnd(e);
-    }}
-/>;
-
-{
-    /* variant="fixed-range" — valueEnd derived automatically; only store start */
-}
-<Form.DateRangeInput
-    label="14-day quarantine period"
-    variant="fixed-range"
-    numberOfDays={14}
-    value={start}
-    valueEnd={end}
-    onChange={(s, e) => {
-        setStart(s);
-        setEnd(e);
-    }}
-/>;
-```
-
-Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class:
-
-```tsx
-import styles from "./MyForm.module.css";
-
-<Form.DateRangeInput className={styles.dateRangeInput} ... />
-```
-
-```css
-/* MyForm.module.css */
-:where(body.fds-breakpoint-lg-min) .dateRangeInput {
-    max-width: 24rem;
-}
-```
-
-## Props
-
-| Prop                       | Type                                           | Default         | Description                                                                      |
-| -------------------------- | ---------------------------------------------- | --------------- | -------------------------------------------------------------------------------- |
-| `value`                    | `string`                                       | —               | Start date in `YYYY-MM-DD` format                                                |
-| `valueEnd`                 | `string`                                       | —               | End date in `YYYY-MM-DD` format (range/fixed-range only)                         |
-| `variant`                  | `"range" \| "week" \| "fixed-range"`           | `"range"`       | Selection type                                                                   |
-| `numberOfDays`             | `number`                                       | `7`             | Days to select when `variant="fixed-range"`                                      |
-| `disabled`                 | `boolean`                                      | —               | Disables the component; entry not allowed                                        |
-| `readOnly`                 | `boolean`                                      | —               | Read-only state; selection not allowed                                           |
-| `error`                    | `boolean`                                      | —               | Sets error display (not needed if `errorMessage` is set)                         |
-| `id`                       | `string`                                       | —               | Unique identifier of the component                                               |
-| `className`                | `string`                                       | —               | Class selector of the component                                                  |
-| `data-testid`              | `string`                                       | —               | Test identifier of the component                                                 |
-| `minDate`                  | `string`                                       | —               | Minimum selectable date in `YYYY-MM-DD` format (inclusive)                       |
-| `maxDate`                  | `string`                                       | —               | Maximum selectable date in `YYYY-MM-DD` format (inclusive)                       |
-| `disabledDates`            | `string[]`                                     | —               | Specific dates to disable, each in `YYYY-MM-DD` format                           |
-| `allowDisabledSelection`   | `boolean`                                      | —               | If true, dates disabled by `minDate`/`maxDate`/`disabledDates` remain selectable |
-| `hideInputKeyboard`        | `boolean`                                      | —               | Hides the input keyboard when the field is focused                               |
-| `withButton`               | `boolean`                                      | `true`          | Renders Done/Cancel action buttons                                               |
-| `zIndex`                   | `number`                                       | `50`            | z-index of the calendar dropdown                                                 |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                       | `document.body` | Root element hosting the calendar dropdown                                       |
-| `onChange`                 | `(startDate: string, endDate: string) => void` | —               | Called when a selection is made; returns start and end dates in `YYYY-MM-DD`     |
-| `onBlur`                   | `() => void`                                   | —               | Called on field defocus                                                          |
-| `onFocus`                  | `() => void`                                   | —               | Called when field is focused                                                     |
-| `onYearMonthDisplayChange` | `(value: YearMonthDisplay) => void`            | —               | Called when displayed month/year changes                                         |
-
-## YearMonthDisplay
-
-| Prop    | Type     | Description                       |
-| ------- | -------- | --------------------------------- |
-| `year`  | `number` | Currently displayed year (`YYYY`) |
-| `month` | `number` | Currently displayed month (1–12)  |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` (start) and `valueEnd` (end) for controlled usage; `onChange` receives both as `YYYY-MM-DD` strings.
--   Use `minDate`/`maxDate` to restrict selection to valid business date ranges.
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
--   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
--   Use `readOnly` on review screens where the range should be visible but not editable.
--   Specify `dropdownRootNode` if the component is inside a scrollable container.
--   `valueEnd` is only relevant for `variant="range"` and `variant="fixed-range"`.
--   `numberOfDays` only applies when `variant="fixed-range"`.
-
-## Anti-patterns
-
--   Do not use for single-date selection — use `Form.DateInput` instead.
--   Do not set `numberOfDays` unless `variant="fixed-range"` is also set.
--   Do not rely on `error` alone without an `errorMessage`.
--   Do not allow end date before start date — validate in `onChange` before updating state.
diff --git a/docs/skills/fds-build/resources/v4/components/form-e-signature.md b/docs/skills/fds-build/resources/v4/components/form-e-signature.md
deleted file mode 100644
index 436e42c585..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-e-signature.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Form.ESignature
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Forms that legally require a handwritten signature from the user (e.g. consent forms, declarations, agreements).
--   Use `description` to guide the user on how to sign (e.g. "Sign within the box using your mouse or touchscreen").
-
-## Props
-
-| Prop              | Type                              | Default          | Description                                                                            |
-| ----------------- | --------------------------------- | ---------------- | -------------------------------------------------------------------------------------- |
-| `value`           | `string`                          | —                | Pre-filled signature as a base64-encoded PNG data URL                                  |
-| `description`     | `string`                          | —                | Helper text displayed below the signature canvas                                       |
-| `disabled`        | `boolean`                         | —                | Disables the signature canvas                                                          |
-| `loadingProgress` | `number`                          | —                | Upload progress between 0 and 1; shows a progress indicator                            |
-| `loadingLabel`    | `string`                          | `"Uploading..."` | Text above the progress indicator (requires `loadingProgress`)                         |
-| `id`              | `string`                          | —                | Unique identifier of the component                                                     |
-| `className`       | `string`                          | —                | Class selector of the component                                                        |
-| `data-testid`     | `string`                          | —                | Test identifier of the component                                                       |
-| `onChange`        | `(value: string \| null) => void` | —                | Called when the signature changes; returns base64 PNG data URL, or `null` when cleared |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; the value is a base64-encoded PNG string.
--   Use `loadingProgress` and `loadingLabel` to indicate server upload progress after the signature is submitted.
--   Set `errorMessage` when signature validation fails (e.g. canvas is empty on submit).
--   Use `disabled` when the signature field should be locked (e.g. after submission or in a locked step).
--   `value` and the `onChange` return value are both base64-encoded PNG strings.
--   `loadingProgress` and `loadingLabel` are used to show upload progress after the signature is captured.
-
-## Anti-patterns
-
--   Do not use for typed signatures or checkbox confirmations — this component is for handwritten drawing input only.
--   Do not store the raw base64 string in a URL parameter or cookie — it is large; use server-side storage.
--   Do not omit `description` — users need guidance on where and how to draw their signature.
diff --git a/docs/skills/fds-build/resources/v4/components/form-input.md b/docs/skills/fds-build/resources/v4/components/form-input.md
deleted file mode 100644
index 4a1eaedb9e..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-input.md
+++ /dev/null
@@ -1,88 +0,0 @@
-# Form.Input
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use for any single-line text entry inside a form. Always prefer `Form.Input` over the bare `Input` component when a label or error message is required.
-
-## Variants
-
-| `styleType`            | When to use                                                                                 |
-| ---------------------- | ------------------------------------------------------------------------------------------- |
-| `"bordered"` (default) | Standard form fields — provides clear affordance                                            |
-| `"no-border"`          | Inline editing or contexts where a surrounding container already provides visual separation |
-
-## Usage
-
-```tsx
-import { Form } from "@lifesg/react-design-system/form";
-
-<Form.Input
-    label="Full name"
-    placeholder="Enter your name"
-    value={value}
-    onChange={(e) => {}}
-/>;
-```
-
-## Props
-
-### Input specific props
-
-| Prop          | Type                          | Default      | Description                                                         |
-| ------------- | ----------------------------- | ------------ | ------------------------------------------------------------------- |
-| `spacing`     | `number`                      | —            | Number of characters before a space is inserted — `type="tel"` only |
-| `error`       | `boolean`                     | —            | Show error styling — not needed if `errorMessage` is set            |
-| `allowClear`  | `boolean`                     | `false`      | Show clear icon button inside the field                             |
-| `onClear`     | `() => void`                  | —            | Called when clear icon is clicked                                   |
-| `styleType`   | `"no-border"` \| `"bordered"` | `"bordered"` | Border style variant                                                |
-| `data-testid` | `string`                      | —            | Test identifier for the component                                   |
-
-Also inherits all props from `HTMLInputElement`.
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-### FormLabelProps
-
-| Prop       | Type                      | Default | Description                              |
-| ---------- | ------------------------- | ------- | ---------------------------------------- |
-| `addon`    | `FormLabelAddonProps`     | —       | Tooltip or popover attached to the label |
-| `disabled` | `string`                  | —       | Greyed-out label state                   |
-| `subtitle` | `string` \| `JSX.Element` | —       | Secondary text beneath the main label    |
-
-### FormLabelAddonProps
-
-| Prop          | Type                       | Default               | Description                                               |
-| ------------- | -------------------------- | --------------------- | --------------------------------------------------------- |
-| `content`     | `string` \| `JSX.Element`  | —                     | **Required.** Content shown in the tooltip/popover bubble |
-| `type`        | `"tooltip"` \| `"popover"` | `"popover"`           | Addon display type                                        |
-| `icon`        | `JSX.Element`              | `<ICircleFillIcon />` | Icon used for the addon trigger                           |
-| `id`          | `string`                   | —                     | Unique identifier for the addon                           |
-| `zIndex`      | `number`                   | —                     | Custom z-index for the popover                            |
-| `data-testid` | `string`                   | —                     | Test identifier for the addon                             |
-
-## Rules
-
--   Set `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
--   Use `readOnly` on review or summary screens — not `disabled`. Disabled implies interaction is unavailable; read-only implies the field is intentionally non-editable in context.
--   Use `allowClear` for optional fields and search-like inputs; pair with `onClear` to reset controlled value.
--   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
--   Provide `errorMessage` rather than `error` alone — the string drives both the visual state and the accessible error text.
--   Use `label` as a plain string for simple labels; use `FormLabelProps` (with `subtitle` or `addon`) only when additional context is needed.
--   `error` is redundant when `errorMessage` is provided — `errorMessage` implies the error state automatically.
--   `spacing` only has effect when `type="tel"`.
--   `styleType="no-border"` removes the visible border — use only in contexts with a background that provides visual separation.
-
-## Anti-patterns
-
--   Do not use `disabled` on review screens — use `readOnly`.
--   Do not set both `error` and `errorMessage` — `errorMessage` is sufficient.
--   Do not use `spacing` with input types other than `"tel"`.
--   Do not use `styleType="no-border"` in a form context without a containing element that visually distinguishes the field.
diff --git a/docs/skills/fds-build/resources/v4/components/form-masked-input.md b/docs/skills/fds-build/resources/v4/components/form-masked-input.md
deleted file mode 100644
index 4f863977e3..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-masked-input.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# Form.MaskedInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Displaying sensitive data that should be partially hidden by default with a user-controlled reveal toggle (e.g. NRIC, FIN, passport number, bank account number).
--   Read-only fields that are loaded asynchronously and should show a loading / error state.
-
-## Props
-
-Inherits all props from `Form.Input`. Additional props:
-
-| Prop                | Type                               | Default            | Description                                                                                    |
-| ------------------- | ---------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------- |
-| `maskRange`         | `number[]`                         | —                  | `[startIndex, endIndex]` — character index range to mask                                       |
-| `unmaskRange`       | `number[]`                         | —                  | `[startIndex, endIndex]` — character index range to NOT mask                                   |
-| `maskRegex`         | `RegExp`                           | —                  | Regex matched characters are replaced with `maskChar`                                          |
-| `maskTransformer`   | `(value: string) => string`        | —                  | Custom function to transform the masked value                                                  |
-| `maskChar`          | `string`                           | `"•"`              | Character used for masking                                                                     |
-| `iconMask`          | `string`                           | `<EyeSlashIcon />` | Icon shown when the field is masked                                                            |
-| `iconUnmask`        | `string`                           | `<EyeIcon />`      | Icon shown when the field is unmasked                                                          |
-| `iconActiveColor`   | `string`                           | `Color.Primary`    | Color of the mask icon in active state                                                         |
-| `iconInactiveColor` | `string`                           | `Color.Neutral[3]` | Color of the mask icon in inactive state                                                       |
-| `transformInput`    | `"uppercase" \| "lowercase"`       | —                  | Auto-transforms input casing                                                                   |
-| `loadState`         | `"loading" \| "fail" \| "success"` | —                  | Async load state — only applies in `readOnly` mode                                             |
-| `onMask`            | `() => void`                       | —                  | Called when the field becomes masked                                                           |
-| `onUnmask`          | `() => void`                       | —                  | Called when the field becomes unmasked                                                         |
-| `onTryAgain`        | `() => void`                       | —                  | Called when the "Try again" button is clicked in `loadState="fail"` mode (requires `readOnly`) |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Choose one masking strategy per instance: `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer`.
--   Use `maskRange` for fixed-position sensitive segments (e.g. `[1, 4]` for NRIC middle characters).
--   Use `maskRegex` when the characters to mask follow a pattern rather than a fixed range.
--   Use `transformInput="uppercase"` for identifiers that are conventionally uppercase (e.g. NRIC, passport).
--   Use `loadState` only when `readOnly` is also `true` — for fields that are fetched asynchronously.
--   Provide `onTryAgain` when `loadState="fail"` so users can retry the fetch.
--   `loadState` only takes effect when `readOnly` is also `true`.
--   Provide only one of `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer` per instance.
-
-## Anti-patterns
-
--   Do not use for non-sensitive fields — masking adds friction and should be reserved for data that genuinely requires it.
--   Do not set `loadState` without `readOnly` — it has no effect in editable mode.
--   Do not combine multiple masking strategies (`maskRange` + `maskRegex`) on the same instance.
diff --git a/docs/skills/fds-build/resources/v4/components/form-multi-select.md b/docs/skills/fds-build/resources/v4/components/form-multi-select.md
deleted file mode 100644
index d8cfb1d42f..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-multi-select.md
+++ /dev/null
@@ -1,112 +0,0 @@
-# Form.MultiSelect
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when users can select more than one option from a predefined list. For single selections use `Form.Select`. For hierarchical options use `Form.NestedMultiSelect`.
-
-## Variants
-
-| `variant`   | When to use                                              |
-| ----------- | -------------------------------------------------------- |
-| `"default"` | Standard form context                                    |
-| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
-
-## Usage
-
-```tsx
-import { Form } from "@lifesg/react-design-system/form";
-
-const options = [
-    { value: "doc", label: "Document" },
-    { value: "img", label: "Image" },
-    { value: "pdf", label: "PDF" },
-];
-
-<Form.MultiSelect
-    label="File types"
-    options={options}
-    selectedOptions={selected}
-    valueExtractor={(opt) => opt.value}
-    listExtractor={(opt) => opt.label}
-    displayValueExtractor={(opt) => opt.label}
-    onSelectOptions={(opts) => {}}
-/>;
-```
-
-## Props
-
-### MultiSelect specific props
-
-| Prop                    | Type                                     | Default         | Description                                                              |
-| ----------------------- | ---------------------------------------- | --------------- | ------------------------------------------------------------------------ |
-| `options`               | `T[]`                                    | —               | **Required.** List of option objects                                     |
-| `selectedOptions`       | `T[]`                                    | —               | Controlled array of selected options                                     |
-| `valueExtractor`        | `(option: T) => V`                       | —               | Derives the value from an option                                         |
-| `listExtractor`         | `(option: T) => string`                  | —               | Derives the display text for dropdown list items                         |
-| `displayValueExtractor` | `(option: T) => string`                  | —               | Derives the display text shown in the selector when options are selected |
-| `name`                  | `string`                                 | —               | Name attribute of the component                                          |
-| `placeholder`           | `string`                                 | `"Select"`      | Placeholder text                                                         |
-| `disabled`              | `boolean`                                | —               | Disables selection                                                       |
-| `error`                 | `boolean`                                | —               | Show error styling — not needed if `errorMessage` is set                 |
-| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"` | `"success"`     | Visual state for async option loading                                    |
-| `optionTruncationType`  | `"end"` \| `"middle"`                    | `"end"`         | Truncation style for long option text                                    |
-| `enableSearch`          | `boolean`                                | `false`         | Enable text-based search in the dropdown                                 |
-| `searchFunction`        | `(searchValue: string) => T[]`           | —               | Custom search function                                                   |
-| `maxSelectable`         | `number`                                 | —               | Maximum number of options that can be selected                           |
-| `onSelectOptions`       | `(options: T[]) => void`                 | —               | Called when selection changes, or Select all / Unselect all is clicked   |
-| `onShowOptions`         | `() => void`                             | —               | Called when the dropdown opens                                           |
-| `onHideOptions`         | `() => void`                             | —               | Called when the dropdown closes                                          |
-| `onRetry`               | `() => void`                             | —               | Called when retry is clicked after a failed load                         |
-| `onSearch`              | `() => void`                             | —               | Called when a search is executed                                         |
-| `hideNoResultsDisplay`  | `boolean`                                | —               | Suppress the default no-results UI                                       |
-| `customLabels`          | `DropdownCustomLabelProps`               | —               | Override default dropdown label strings                                  |
-| `variant`               | `"default"` \| `"small"`                 | `"default"`     | Size variant                                                             |
-| `alignment`             | `"left"` \| `"right"`                    | `"left"`        | Dropdown alignment relative to the trigger                               |
-| `dropdownZIndex`        | `number`                                 | `50`            | Custom z-index for the dropdown                                          |
-| `dropdownWidth`         | `string`                                 | —               | Fixed width for the dropdown                                             |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                 | `document.body` | Root element that hosts the dropdown                                     |
-| `data-testid`           | `string`                                 | —               | Test identifier for the component                                        |
-
-### DropdownCustomLabelProps
-
-| Prop                   | Type                    | Description                                                        |
-| ---------------------- | ----------------------- | ------------------------------------------------------------------ |
-| `searchPlaceholder`    | `string`                | Placeholder for the search field                                   |
-| `noResultsLabel`       | `string`                | Replaces the default no-results label                              |
-| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label                      |
-| `selectAllButtonLabel` | `string`                | Label for the Select all button                                    |
-| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                                     |
-| `allSelectedLabel`     | `string`                | Label shown when all options are selected                          |
-| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected (e.g. "X selected") |
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
-
-## Rules
-
--   Always provide `options` — the component has no meaning without it.
--   Provide `valueExtractor` and `listExtractor` for typed option arrays — treat as required.
--   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing raw values instead of labels in the closed selector.
--   Use `maxSelectable` when there is a business rule limiting how many options can be chosen; the component enforces it automatically.
--   Use `enableSearch` when the list exceeds ~10 items.
--   Provide `customLabels` to localise or contextualise "Select all", "Clear all", and count labels.
--   Use `optionsLoadState` to communicate async loading states.
--   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
--   `onSelectOptions` receives the complete updated selection array — not a delta.
--   Unlike `Form.Select`, there is no `readOnly` prop — use `disabled` for non-editable states.
-
-## Anti-patterns
-
--   Do not use `Form.MultiSelect` when only one option can be selected — use `Form.Select`.
--   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
--   Do not set both `error` and `errorMessage`.
--   Do not manage selection capping manually in `onSelectOptions` — use `maxSelectable` instead.
diff --git a/docs/skills/fds-build/resources/v4/components/form-nested-multi-select.md b/docs/skills/fds-build/resources/v4/components/form-nested-multi-select.md
deleted file mode 100644
index 7c83b83154..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-nested-multi-select.md
+++ /dev/null
@@ -1,173 +0,0 @@
-# Form.NestedMultiSelect
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when users can select multiple options from a hierarchically organised list of up to 3 levels. For hierarchical single-select use `Form.NestedSelect`. For flat multi-select use `Form.MultiSelect`.
-
-## Variants
-
-| `variant`   | When to use           |
-| ----------- | --------------------- |
-| `"default"` | Standard form context |
-| `"small"`   | Compact layouts       |
-
-| `mode`       | When to use                                                                              |
-| ------------ | ---------------------------------------------------------------------------------------- |
-| `"default"`  | System decides initial expand state                                                      |
-| `"expand"`   | Expand all categories on open — for short, browsable lists                               |
-| `"collapse"` | Collapse all categories on open — for long lists where search is the primary interaction |
-
-## Usage
-
-### Multi-select with parallel keyPaths / values arrays
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
-
-interface SkillValue {
-    id: string;
-    name: string;
-}
-
-const options: L1OptionProps<SkillValue, SkillValue, SkillValue>[] = [
-    {
-        key: "design",
-        label: "Design",
-        subItems: [
-            {
-                key: "design-ux",
-                label: "UX Design",
-                value: { id: "ux", name: "UX Design" },
-            },
-            {
-                key: "design-ui",
-                label: "UI Design",
-                value: { id: "ui", name: "UI Design" },
-            },
-        ],
-    },
-    {
-        key: "engineering",
-        label: "Engineering",
-        subItems: [
-            {
-                key: "eng-fe",
-                label: "Frontend",
-                value: { id: "fe", name: "Frontend" },
-            },
-            {
-                key: "eng-be",
-                label: "Backend",
-                value: { id: "be", name: "Backend" },
-            },
-        ],
-    },
-];
-
-const NestedMultiSelectExample = () => {
-    // keyPaths[i] and values[i] always refer to the same selection — keep them in sync
-    const [keyPaths, setKeyPaths] = useState<string[][]>([
-        ["design", "design-ux"], // pre-selected: UX Design
-    ]);
-    const [values, setValues] = useState<SkillValue[]>([
-        { id: "ux", name: "UX Design" },
-    ]);
-
-    return (
-        <Form.NestedMultiSelect<SkillValue, SkillValue, SkillValue>
-            label="Skills"
-            options={options}
-            selectedKeyPaths={keyPaths}
-            // onSelectOptions provides the NEXT full selection state — replace, don't merge
-            onSelectOptions={(nextKeyPaths, nextValues) => {
-                setKeyPaths(nextKeyPaths);
-                setValues(nextValues as SkillValue[]);
-            }}
-            valueToStringFunction={(val) => val.name}
-            enableSearch
-        />
-    );
-};
-```
-
-**The parallel-array contract:** index `i` in `keyPaths` and index `i` in `values` always describe the same selected item. `onSelectOptions` delivers the complete next state — replace both arrays together, never splice one independently. Initialise both arrays with matching entries when pre-populating selections.
-
-## Props
-
-### NestedMultiSelect specific props
-
-| Prop                    | Type                                                            | Default         | Description                                                                                                            |
-| ----------------------- | --------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| `options`               | `L1OptionProps<V1, V2, V3>[]`                                   | —               | **Required.** Nested option array (up to 3 levels)                                                                     |
-| `selectedKeyPaths`      | `string[][]`                                                    | —               | Array of key paths for all selected options                                                                            |
-| `placeholder`           | `string`                                                        | `"Select"`      | Placeholder text                                                                                                       |
-| `disabled`              | `boolean`                                                       | —               | Disables selection                                                                                                     |
-| `readOnly`              | `boolean`                                                       | —               | Read-only state — selection not allowed                                                                                |
-| `error`                 | `boolean`                                                       | —               | Show error styling — not needed if `errorMessage` is set                                                               |
-| `mode`                  | `"default"` \| `"expand"` \| `"collapse"`                       | `"default"`     | Initial expand/collapse state of categories when the dropdown opens                                                    |
-| `valueToStringFunction` | `(value: V1 \| V2 \| V3) => string`                             | —               | Converts values to display strings. Single function used for all levels — assumes values are homogeneous across levels |
-| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"`                        | `"success"`     | Visual state for async option loading                                                                                  |
-| `optionTruncationType`  | `"end"` \| `"middle"`                                           | `"end"`         | Truncation style for long option text                                                                                  |
-| `enableSearch`          | `boolean`                                                       | `false`         | Enable text-based search in the dropdown                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                       | `false`         | Suppress the default no-results UI                                                                                     |
-| `customLabels`          | `DropdownCustomLabelProps`                                      | —               | Override default dropdown label strings                                                                                |
-| `onSelectOptions`       | `(keyPaths: string[][], values: Array<V1 \| V2 \| V3>) => void` | —               | Called when selections change                                                                                          |
-| `onShowOptions`         | `() => void`                                                    | —               | Called when the dropdown opens                                                                                         |
-| `onHideOptions`         | `() => void`                                                    | —               | Called when the dropdown closes                                                                                        |
-| `onRetry`               | `() => void`                                                    | —               | Called when retry is clicked after a failed load                                                                       |
-| `onSearch`              | `() => void`                                                    | —               | Called when a search is executed                                                                                       |
-| `onBlur`                | `() => void`                                                    | —               | Called when the field loses focus                                                                                      |
-| `variant`               | `"default"` \| `"small"`                                        | `"default"`     | Size variant                                                                                                           |
-| `alignment`             | `"left"` \| `"right"`                                           | `"left"`        | Dropdown alignment relative to the trigger                                                                             |
-| `dropdownZIndex`        | `number`                                                        | `50`            | Custom z-index for the dropdown                                                                                        |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                        | `document.body` | Root element that hosts the dropdown                                                                                   |
-| `dropdownWidth`         | `string`                                                        | —               | Fixed width for the dropdown                                                                                           |
-| `className`             | `string`                                                        | —               | Class selector for the component                                                                                       |
-| `data-testid`           | `string`                                                        | —               | Test identifier for the component                                                                                      |
-
-### DropdownCustomLabelProps
-
-| Prop                   | Type                    | Description                                    |
-| ---------------------- | ----------------------- | ---------------------------------------------- |
-| `searchPlaceholder`    | `string`                | Placeholder for the search field               |
-| `noResultsLabel`       | `string`                | Replaces the default no-results label          |
-| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label  |
-| `selectAllButtonLabel` | `string`                | Label for the Select all button                |
-| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                 |
-| `allSelectedLabel`     | `string`                | Label shown when all options are selected      |
-| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected |
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
-
-## Rules
-
--   Every option node must have a unique `key` string — key paths are used for controlled state.
--   Provide `valueToStringFunction` when values are not plain strings. The same function is applied to values at all nesting levels — ensure values are homogeneous across levels, or that the function handles all types.
--   Use `enableSearch` when the total option count across all levels is large.
--   Use `readOnly` on review screens — not `disabled`.
--   Provide `customLabels` to localise "Select all", "Clear all", and count labels.
--   `options` is the only mandatory component-specific prop.
--   Options follow the same nested structure as `Form.NestedSelect`: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
--   `selectedKeyPaths` is an array of key-path arrays — one per selected item.
--   `onSelectOptions` receives the complete updated `keyPaths` and `values` arrays on every change.
--   `valueToStringFunction` uses a single callback for all nesting levels — values across levels must be the same type or handled uniformly.
-
-## Anti-patterns
-
--   Do not use `Form.NestedMultiSelect` for flat option lists — use `Form.MultiSelect`.
--   Do not use when only one option can be selected — use `Form.NestedSelect`.
--   Do not use duplicate `key` values across options — selection state will break.
--   Do not set both `error` and `errorMessage`.
--   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
diff --git a/docs/skills/fds-build/resources/v4/components/form-nested-select.md b/docs/skills/fds-build/resources/v4/components/form-nested-select.md
deleted file mode 100644
index e36a12a655..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-nested-select.md
+++ /dev/null
@@ -1,165 +0,0 @@
-# Form.NestedSelect
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when options are organised in a hierarchy of up to 3 levels — e.g. industry → sector → role, or country → state → city. For flat single-select use `Form.Select`. For hierarchical multi-select use `Form.NestedMultiSelect`.
-
-## Variants
-
-| `variant`   | When to use           |
-| ----------- | --------------------- |
-| `"default"` | Standard form context |
-| `"small"`   | Compact layouts       |
-
-| `mode`       | When to use                                                                            |
-| ------------ | -------------------------------------------------------------------------------------- |
-| `"default"`  | System decides initial expand state based on selected path                             |
-| `"expand"`   | Expand all categories on open — useful when the list is short and browsing is expected |
-| `"collapse"` | Collapse all categories on open — useful for long lists where search is primary        |
-
-## Usage
-
-### Three-level hierarchy with controlled keyPath
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
-
-interface RoleValue {
-    id: string;
-    label: string;
-}
-
-const options: L1OptionProps<RoleValue, RoleValue, RoleValue>[] = [
-    {
-        key: "engineering",
-        label: "Engineering",
-        subItems: [
-            {
-                key: "engineering-frontend",
-                label: "Frontend",
-                subItems: [
-                    {
-                        key: "engineering-frontend-react",
-                        label: "React Developer",
-                        value: { id: "fe-react", label: "React Developer" },
-                    },
-                    {
-                        key: "engineering-frontend-vue",
-                        label: "Vue Developer",
-                        value: { id: "fe-vue", label: "Vue Developer" },
-                    },
-                ],
-            },
-            {
-                key: "engineering-backend",
-                label: "Backend",
-                value: { id: "be", label: "Backend Developer" },
-            },
-        ],
-    },
-];
-
-const NestedSelectExample = () => {
-    // keyPath is the path of keys from root to selected node
-    const [keyPath, setKeyPath] = useState<string[]>([]);
-    const [value, setValue] = useState<RoleValue | undefined>();
-
-    return (
-        <Form.NestedSelect<RoleValue, RoleValue, RoleValue>
-            label="Job role"
-            options={options}
-            selectedKeyPath={keyPath}
-            // onChange receives the full key path and the node's value
-            onChange={(path, val) => {
-                setKeyPath(path);
-                setValue(val);
-            }}
-            valueToStringFunction={(val) => val.label}
-            selectableCategory // intermediate nodes (e.g. "Backend") are also selectable
-            enableSearch
-        />
-    );
-};
-```
-
-**keyPath explains the selection:** `["engineering", "engineering-frontend", "engineering-frontend-react"]` means the user drilled through Engineering → Frontend → React Developer. An empty array means nothing is selected.
-
-## Props
-
-### NestedSelect specific props
-
-| Prop                    | Type                                                 | Default         | Description                                                         |
-| ----------------------- | ---------------------------------------------------- | --------------- | ------------------------------------------------------------------- |
-| `options`               | `L1OptionProps<V1, V2, V3>[]`                        | —               | **Required.** Nested option array (up to 3 levels)                  |
-| `selectedKeyPath`       | `string[]`                                           | —               | Key path of the selected option (e.g. `["1", "1-2"]`)               |
-| `placeholder`           | `string`                                             | `"Select"`      | Placeholder text                                                    |
-| `disabled`              | `boolean`                                            | —               | Disables selection                                                  |
-| `readOnly`              | `boolean`                                            | —               | Read-only state — selection not allowed                             |
-| `error`                 | `boolean`                                            | —               | Show error styling — not needed if `errorMessage` is set            |
-| `mode`                  | `"default"` \| `"expand"` \| `"collapse"`            | `"default"`     | Initial expand/collapse state of categories when the dropdown opens |
-| `valueToStringFunction` | `(value: V1 \| V2 \| V3) => string`                  | —               | Converts the selected value to a display string                     |
-| `selectableCategory`    | `boolean`                                            | —               | Allow selecting a parent category node directly                     |
-| `optionsLoadState`      | `"success"` \| `"loading"` \| `"failed"`             | `"success"`     | Visual state for async option loading                               |
-| `optionTruncationType`  | `"end"` \| `"middle"`                                | `"end"`         | Truncation style for long option text                               |
-| `enableSearch`          | `boolean`                                            | —               | Enable text-based search in the dropdown                            |
-| `customLabels`          | `DropdownCustomLabelProps`                           | —               | Override default dropdown label strings                             |
-| `hideNoResultsDisplay`  | `boolean`                                            | —               | Suppress the default no-results UI                                  |
-| `onSelectOption`        | `(keyPath: string[], value: V1 \| V2 \| V3) => void` | —               | Called when an option is selected                                   |
-| `onShowOptions`         | `() => void`                                         | —               | Called when the dropdown opens                                      |
-| `onHideOptions`         | `() => void`                                         | —               | Called when the dropdown closes                                     |
-| `onRetry`               | `() => void`                                         | —               | Called when retry is clicked after a failed load                    |
-| `onSearch`              | `() => void`                                         | —               | Called when a search is executed                                    |
-| `onBlur`                | `() => void`                                         | —               | Called when the field loses focus                                   |
-| `variant`               | `"default"` \| `"small"`                             | `"default"`     | Size variant                                                        |
-| `alignment`             | `"left"` \| `"right"`                                | `"left"`        | Dropdown alignment relative to the trigger                          |
-| `dropdownZIndex`        | `number`                                             | `50`            | Custom z-index for the dropdown                                     |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                             | `document.body` | Root element that hosts the dropdown                                |
-| `dropdownWidth`         | `string`                                             | —               | Fixed width for the dropdown                                        |
-| `className`             | `string`                                             | —               | Class selector for the component                                    |
-| `data-testid`           | `string`                                             | —               | Test identifier for the component                                   |
-
-### DropdownCustomLabelProps
-
-| Prop                   | Type                    | Description                                    |
-| ---------------------- | ----------------------- | ---------------------------------------------- |
-| `searchPlaceholder`    | `string`                | Placeholder for the search field               |
-| `noResultsLabel`       | `string`                | Replaces the default no-results label          |
-| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label  |
-| `selectAllButtonLabel` | `string`                | Label for the Select all button                |
-| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                 |
-| `allSelectedLabel`     | `string`                | Label shown when all options are selected      |
-| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected |
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
-
-## Rules
-
--   Every option node must have a unique `key` string — the key path is used for controlled state.
--   Provide `valueToStringFunction` when values are not plain strings and the selected display needs to be derived from the value.
--   Enable `selectableCategory` only when selecting a parent category is a valid business outcome — otherwise category nodes serve as navigational groupings only.
--   Use `enableSearch` when the total option count across all levels is large.
--   Use `readOnly` on review screens — not `disabled`.
--   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
--   `options` is the only mandatory component-specific prop.
--   Options follow a nested structure: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
--   `selectedKeyPath` is an array of keys tracing the path to the selected leaf (e.g. `["parent-key", "child-key"]`).
--   `selectableCategory` enables selection of non-leaf (parent category) nodes.
-
-## Anti-patterns
-
--   Do not use `Form.NestedSelect` for flat option lists — use `Form.Select`.
--   Do not use when multiple selections are needed — use `Form.NestedMultiSelect`.
--   Do not use duplicate `key` values across options — selection state will break.
--   Do not set both `error` and `errorMessage`.
diff --git a/docs/skills/fds-build/resources/v4/components/form-otp-verification.md b/docs/skills/fds-build/resources/v4/components/form-otp-verification.md
deleted file mode 100644
index 6fd2e5f9c5..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-otp-verification.md
+++ /dev/null
@@ -1,164 +0,0 @@
-# Form.OtpVerification
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Flows that require identity verification via a one-time password sent to a phone number or email address.
--   The component manages the full multi-step UI: input contact → send OTP → enter OTP → verify.
-
-## Usage
-
-### Email variant
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
-
-const EmailOtpExample = () => {
-    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
-    const [email, setEmail] = useState("");
-
-    return (
-        <Form.OtpVerification
-            label="Verify your email"
-            type="email"
-            emailValue={email}
-            onEmailChange={setEmail}
-            otpState={otpState}
-            onOtpStateChange={setOtpState}
-            onSendOtp={async () => {
-                // Throw to surface the error inline — do NOT return an error string
-                const res = await api.sendEmailOtp(email);
-                if (!res.ok) throw new Error("Invalid email address");
-            }}
-            onVerifyOtp={async (otpInput) => {
-                const res = await api.verifyOtp(otpInput);
-                if (!res.ok)
-                    throw new Error("Incorrect OTP. Please try again.");
-            }}
-            onResendOtp={async () => {
-                const res = await api.sendEmailOtp(email);
-                if (!res.ok) throw new Error("Could not resend OTP");
-            }}
-            verifyOtpCountdownTimer={300}
-        />
-    );
-};
-```
-
-### Phone variant (`fixedCountry` required)
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
-import { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input";
-
-const PhoneOtpExample = () => {
-    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
-    const [phone, setPhone] = useState<PhoneNumberInputValue>({ number: "" });
-
-    return (
-        <Form.OtpVerification
-            label="Verify your mobile number"
-            type="phone-number"
-            phoneNumberValue={phone}
-            onPhoneNumberChange={setPhone}
-            fixedCountry // required when type="phone-number"; hides country selector
-            otpState={otpState}
-            onOtpStateChange={setOtpState}
-            onSendOtp={async () => {
-                const res = await api.sendSmsOtp(phone.number);
-                if (!res.ok) throw new Error("Invalid phone number");
-            }}
-            onVerifyOtp={async (otpInput) => {
-                const res = await api.verifyOtp(otpInput);
-                if (!res.ok)
-                    throw new Error("Incorrect OTP. Please try again.");
-            }}
-            onResendOtp={async () => {
-                const res = await api.sendSmsOtp(phone.number);
-                if (!res.ok) throw new Error("Could not resend OTP");
-            }}
-            verifyOtpCountdownTimer={180}
-        />
-    );
-};
-```
-
-**Key gotcha — callbacks must throw, not return error strings.**
-The component catches the thrown error and displays `error.message` inline.
-Returning a value (or nothing) always signals success and advances the state machine.
-
-## Props
-
-| Prop                      | Type                                                      | Default | Description                                                    |
-| ------------------------- | --------------------------------------------------------- | ------- | -------------------------------------------------------------- |
-| `type`                    | `"phone-number" \| "email"`                               | —       | Verification channel                                           |
-| `otpState`                | `"default" \| "sent" \| "verified"`                       | —       | Controlled state of the OTP flow                               |
-| `onOtpStateChange`        | `(otpState: OtpVerificationState) => void`                | —       | Called when the flow state changes                             |
-| `onSendOtp`               | `() => Promise<void>`                                     | —       | Called when the user requests an OTP; throw to show error      |
-| `onVerifyOtp`             | `(otp: string) => Promise<void>`                          | —       | Called when the user submits the OTP; throw to show error      |
-| `onResendOtp`             | `() => Promise<void>`                                     | —       | Called when the user requests a resend; throw to show error    |
-| `sendOtpError`            | `string`                                                  | —       | Error message shown if OTP send fails                          |
-| `sendOtpPlaceholder`      | `string`                                                  | —       | Placeholder for the contact input field                        |
-| `verifyOtpError`          | `string`                                                  | —       | Error message shown if OTP verification fails                  |
-| `verifyOtpTitle`          | `string`                                                  | —       | Title for the verify OTP section                               |
-| `verifyOtpMessage`        | `string`                                                  | —       | Description for the verify OTP section                         |
-| `verifyOtpCountdownTimer` | `number`                                                  | `60`    | Seconds before the resend button is re-enabled                 |
-| `otpReminderInterval`     | `number`                                                  | `120`   | Seconds between accessibility reminder announcements           |
-| `otpValue`                | `{ prefix?: string; separator?: string; value?: string }` | —       | Current OTP input value with optional display prefix/separator |
-| `onOtpChange`             | `(value: string) => void`                                 | —       | Called when the OTP input value changes                        |
-| `showVerifyOtpThumbnail`  | `boolean`                                                 | `false` | Shows a thumbnail in the verify OTP section                    |
-| `verifyOtpIcon`           | `React.ReactNode`                                         | —       | Custom icon for the verify OTP section                         |
-| `id`                      | `string`                                                  | —       | Unique identifier of the component                             |
-| `className`               | `string`                                                  | —       | Class selector of the component                                |
-| `data-testid`             | `string`                                                  | —       | Test identifier of the component                               |
-
-## Phone-number-specific props
-
-| Prop                  | Type                                     | Description                                            |
-| --------------------- | ---------------------------------------- | ------------------------------------------------------ |
-| `phoneNumberValue`    | `PhoneNumberInputValue`                  | Controlled phone number value                          |
-| `onPhoneNumberChange` | `(value: PhoneNumberInputValue) => void` | Called when phone input changes                        |
-| `fixedCountry`        | `true`                                   | Locks the country code; required for phone-number type |
-
-## Email-specific props
-
-| Prop            | Type                      | Description                     |
-| --------------- | ------------------------- | ------------------------------- |
-| `emailValue`    | `string`                  | Controlled email value          |
-| `onEmailChange` | `(value: string) => void` | Called when email input changes |
-
-## PhoneNumberInputValue
-
-| Prop          | Type     | Description                 |
-| ------------- | -------- | --------------------------- |
-| `number`      | `string` | Phone number                |
-| `countryCode` | `string` | Country code (e.g. `"+65"`) |
-
-## Form-specific props
-
-| Prop    | Type                       | Description |
-| ------- | -------------------------- | ----------- |
-| `label` | `string \| FormLabelProps` | Field label |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Control `otpState` externally and update it via `onOtpStateChange` — the component does not manage its own state.
--   `onSendOtp`, `onVerifyOtp`, and `onResendOtp` must be async functions; throw an error inside them to trigger the corresponding error display (`sendOtpError`, `verifyOtpError`).
--   Always pass `fixedCountry` when `type="phone-number"` — the prop is required to lock the country selector.
--   Set `verifyOtpCountdownTimer` to match the actual OTP expiry window from your backend.
--   Pass `sendOtpError` and `verifyOtpError` from server responses so users receive actionable feedback.
--   `otpState` is externally controlled — the component does not manage its own flow state.
--   `fixedCountry` is required when `type="phone-number"`.
-
-## Anti-patterns
-
--   Do not try to manage the step sequence manually — use `otpState` and let `onOtpStateChange` drive transitions.
--   Do not use for non-identity-verification scenarios — for simple code inputs, use a plain `Form.Input`.
--   Do not omit `fixedCountry` for `type="phone-number"` — the country selector will be shown unexpectedly.
--   Do not use synchronous functions for `onSendOtp`, `onVerifyOtp`, or `onResendOtp` — they must return Promises.
diff --git a/docs/skills/fds-build/resources/v4/components/form-phone-number-input.md b/docs/skills/fds-build/resources/v4/components/form-phone-number-input.md
deleted file mode 100644
index 6772ccecc1..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-phone-number-input.md
+++ /dev/null
@@ -1,87 +0,0 @@
-# Form.PhoneNumberInput
-
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-Type import: `import type { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input"`
-
-## When to use
-
--   Collecting a phone number that requires a country code prefix.
--   International forms where users may have numbers from different countries.
--   Use `fixedCountry` when the service only accepts numbers from one country (e.g. Singapore-only services).
-
-## Usage
-
-```tsx
-import styles from "./MyForm.module.css";
-
-<Form.PhoneNumberInput className={styles.phoneNumberInput} ... />
-```
-
-```css
-/* MyForm.module.css */
-:where(body.fds-breakpoint-lg-min) .phoneNumberInput {
-    max-width: 24rem;
-}
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
-
-## Props
-
-| Prop                      | Type                                     | Default    | Description                                                             |
-| ------------------------- | ---------------------------------------- | ---------- | ----------------------------------------------------------------------- |
-| `value`                   | `PhoneNumberInputValue`                  | —          | Controlled value containing country code and number                     |
-| `allowClear`              | `boolean`                                | —          | Shows a clear icon button inside the input                              |
-| `noBorder`                | `boolean`                                | `false`    | Removes the border wrapper                                              |
-| `disabled`                | `boolean`                                | —          | Disables the component; selection not allowed                           |
-| `readOnly`                | `boolean`                                | —          | Read-only state; input not allowed                                      |
-| `error`                   | `boolean`                                | —          | Sets error display (not needed if `errorMessage` is set)                |
-| `enableSearch`            | `boolean`                                | `false`    | Enables text search within the country code dropdown                    |
-| `fixedCountry`            | `boolean`                                | `false`    | Locks the country code; hides the dropdown selector                     |
-| `id`                      | `string`                                 | —          | Unique identifier of the component                                      |
-| `name`                    | `string`                                 | —          | Name attribute of the component                                         |
-| `className`               | `string`                                 | —          | Class selector of the component                                         |
-| `data-testid`             | `string`                                 | —          | Test identifier of the component                                        |
-| `optionPlaceholder`       | `string`                                 | —          | Placeholder for the country code dropdown                               |
-| `optionSearchPlaceholder` | `string`                                 | —          | Placeholder for the country code search field (requires `enableSearch`) |
-| `pattern`                 | `string`                                 | —          | Regex the input value should match                                      |
-| `placeholder`             | `string`                                 | `"Select"` | Placeholder for the number input                                        |
-| `autoComplete`            | `string`                                 | —          | `autocomplete` attribute for the input field                            |
-| `onChange`                | `(value: PhoneNumberInputValue) => void` | —          | Called on number input change or country code selection                 |
-| `onClear`                 | `() => void`                             | —          | Called when the clear icon is clicked                                   |
-| `onBlur`                  | `() => void`                             | —          | Called on defocus                                                       |
-| `onShowOptions`           | `() => void`                             | —          | Called when the country code dropdown expands                           |
-| `onHideOptions`           | `() => void`                             | —          | Called when the country code dropdown collapses                         |
-
-## PhoneNumberInputValue
-
-| Prop          | Type     | Description                                                                                                             |
-| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `number`      | `string` | The phone number                                                                                                        |
-| `countryCode` | `string` | The country code (e.g. `"+65"`). The `+` prefix is optional on input but always included in the `onChange` return value |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; `onChange` returns `{ countryCode, number }`.
--   Use `enableSearch` when the country list is long and users need to find their country quickly.
--   Use `fixedCountry` together with a pre-set `value.countryCode` so the locked code is visible.
--   Use `allowClear` when the field can be optionally cleared by the user.
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
-
-## Anti-patterns
-
--   Do not use a plain text input for international phone numbers — formatting and country code handling must be consistent.
--   Do not use without `fixedCountry` when only one country is supported — it creates unnecessary friction.
--   Do not omit `value.countryCode` when `fixedCountry` is true — the locked code won't render without it.
diff --git a/docs/skills/fds-build/resources/v4/components/form-predictive-text-input.md b/docs/skills/fds-build/resources/v4/components/form-predictive-text-input.md
deleted file mode 100644
index 2be04e574f..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-predictive-text-input.md
+++ /dev/null
@@ -1,102 +0,0 @@
-# Form.PredictiveTextInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   The option set is too large for a static dropdown and must be fetched dynamically (e.g. address lookup, postal code search, product search, large dataset autocomplete).
--   Users need to type to narrow down results before selecting.
-
-## Usage
-
-### Location search — three extractors working together
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-interface Location {
-    id: string;
-    name: string;
-    address: string;
-}
-
-const LocationSearchExample = () => {
-    const [selected, setSelected] = useState<Location | undefined>();
-
-    const fetchOptions = async (input: string): Promise<Location[]> => {
-        const res = await api.searchLocations(input);
-        return res.results;
-    };
-
-    return (
-        <Form.PredictiveTextInput<Location, string>
-            label="Search location"
-            minimumCharacters={3} // fetch only after 3 chars typed
-            fetchOptions={fetchOptions}
-            // Populates the text field when an option is selected
-            valueExtractor={(item) => item.name}
-            // Populates each row in the dropdown list
-            listExtractor={(item) => `${item.name} — ${item.address}`}
-            // Displays the chosen value as a chip / confirmation label
-            displayValueExtractor={(item) => item.name}
-            selectedOption={selected}
-            onSelectOption={(item) => setSelected(item ?? undefined)}
-        />
-    );
-};
-```
-
-**How the three extractors divide responsibility:**
-
-| Extractor               | When it runs               | What it renders                  |
-| ----------------------- | -------------------------- | -------------------------------- |
-| `listExtractor`         | While the dropdown is open | Each option row in the list      |
-| `valueExtractor`        | After selection            | The text field value             |
-| `displayValueExtractor` | After selection            | The chip / confirmed-value label |
-
-Debounce `fetchOptions` internally (e.g. with `setTimeout` or a library) — the component calls it on every character change.
-
-## Props
-
-| Prop                    | Type                                          | Default           | Description                                                      |
-| ----------------------- | --------------------------------------------- | ----------------- | ---------------------------------------------------------------- |
-| `fetchOptions`          | `(input: string) => Promise<T[]>`             | —                 | **Required.** Async function called to populate dropdown options |
-| `selectedOption`        | `T`                                           | —                 | Controlled selected option object                                |
-| `valueExtractor`        | `(option: T) => V`                            | —                 | Extracts the stored value from an option                         |
-| `listExtractor`         | `(option: T) => string`                       | —                 | Extracts the display text shown in the dropdown list             |
-| `displayValueExtractor` | `(option: T) => string`                       | —                 | Extracts the display text shown in the input after selection     |
-| `onSelectOption`        | `(option: T, extractedValue: T \| V) => void` | —                 | Called when the user selects an option                           |
-| `minimumCharacters`     | `number`                                      | `3`               | Minimum characters typed before options are fetched              |
-| `placeholder`           | `string`                                      | `"Enter here..."` | Placeholder text of the input                                    |
-| `disabled`              | `boolean`                                     | —                 | Disables the component; selection not allowed                    |
-| `readOnly`              | `boolean`                                     | —                 | Read-only state; selection not allowed                           |
-| `error`                 | `boolean`                                     | —                 | Sets error display (not needed if `errorMessage` is set)         |
-| `className`             | `string`                                      | —                 | Class selector of the component                                  |
-| `data-testid`           | `string`                                      | —                 | Test identifier of the component                                 |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   `fetchOptions` is required — it must be async and return an array of option objects.
--   Debounce inside `fetchOptions` to avoid flooding the API on every keystroke.
--   Set `minimumCharacters` to a value that produces useful results — `3` is the default, but adjust for your data source.
--   Always provide `valueExtractor`, `listExtractor`, and `displayValueExtractor` — omitting any of these produces inconsistent display behaviour.
--   Use `selectedOption` and `onSelectOption` for controlled selection.
--   Set `errorMessage` when the selected option fails validation.
--   `fetchOptions` is called on every keystroke after `minimumCharacters` is reached — debounce inside the function if needed.
--   Generic type `T` is the option object shape; `V` is the extracted value type.
-
-## Anti-patterns
-
--   Do not use when the full option list is small and known upfront — use `Form.Select` or `Form.MultiSelect` instead.
--   Do not use `fetchOptions` without debouncing — each keystroke fires a new call.
--   Do not omit extractor functions — the component cannot determine what to display without them.
diff --git a/docs/skills/fds-build/resources/v4/components/form-select.md b/docs/skills/fds-build/resources/v4/components/form-select.md
deleted file mode 100644
index 961b15c28a..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-select.md
+++ /dev/null
@@ -1,122 +0,0 @@
-# Form.Select
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when users must select exactly one option from a predefined list. For multiple selections use `Form.MultiSelect`. For hierarchical options use `Form.NestedSelect`.
-
-## Variants
-
-| `variant`   | When to use                                              |
-| ----------- | -------------------------------------------------------- |
-| `"default"` | Standard form context                                    |
-| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
-
-## Usage
-
-```tsx
-import { Form } from "@lifesg/react-design-system/form";
-
-const options = [
-    { value: "sg", label: "Singapore" },
-    { value: "my", label: "Malaysia" },
-];
-
-<Form.Select
-    label="Country"
-    options={options}
-    selectedOption={selected}
-    valueExtractor={(opt) => opt.value}
-    listExtractor={(opt) => opt.label}
-    displayValueExtractor={(opt) => opt.label}
-    onSelectOption={(opt) => {}}
-/>;
-```
-
-## Props
-
-### Select specific props
-
-| Prop                         | Type                                                     | Default         | Description                                                               |
-| ---------------------------- | -------------------------------------------------------- | --------------- | ------------------------------------------------------------------------- |
-| `options`                    | `T[]`                                                    | —               | **Required.** List of option objects                                      |
-| `selectedOption`             | `T`                                                      | —               | Controlled selected option                                                |
-| `valueExtractor`             | `(option: T) => V`                                       | —               | Derives the value from an option                                          |
-| `listExtractor`              | `(option: T) => string`                                  | —               | Derives the display text for dropdown list items                          |
-| `displayValueExtractor`      | `(option: T) => string`                                  | —               | Derives the display text shown in the selector when an option is selected |
-| `valueToStringFunction`      | `(value: V) => string`                                   | —               | Converts a value to a string                                              |
-| `name`                       | `string`                                                 | —               | Name attribute of the component                                           |
-| `placeholder`                | `string`                                                 | `"Select"`      | Placeholder text                                                          |
-| `disabled`                   | `boolean`                                                | —               | Disables selection                                                        |
-| `readOnly`                   | `boolean`                                                | —               | Read-only state — selection not allowed                                   |
-| `error`                      | `boolean`                                                | —               | Show error styling — not needed if `errorMessage` is set                  |
-| `optionsLoadState`           | `"success"` \| `"loading"` \| `"failed"`                 | `"success"`     | Visual state for async option loading                                     |
-| `optionTruncationType`       | `"end"` \| `"middle"`                                    | `"end"`         | Truncation style for long option text                                     |
-| `enableSearch`               | `boolean`                                                | `false`         | Enable text-based search in the dropdown                                  |
-| `searchFunction`             | `(searchValue: string) => T[]`                           | —               | Custom search function                                                    |
-| `renderListItem`             | `(item: T, args: ListItemRenderArgs) => JSX.Element`     | —               | Custom list item renderer                                                 |
-| `renderCustomSelectedOption` | `(option: T) => JSX.Element`                             | —               | Custom renderer for the selected option display in the selector           |
-| `onSelectOption`             | `(option: T, extractedValue: T \| V) => void`            | —               | Called when an option is selected                                         |
-| `onShowOptions`              | `() => void`                                             | —               | Called when the dropdown opens                                            |
-| `onHideOptions`              | `() => void`                                             | —               | Called when the dropdown closes                                           |
-| `onRetry`                    | `() => void`                                             | —               | Called when retry is clicked after a failed load                          |
-| `onSearch`                   | `() => void`                                             | —               | Called when a search is executed                                          |
-| `hideNoResultsDisplay`       | `boolean`                                                | —               | Suppress the default no-results UI                                        |
-| `customLabels`               | `DropdownCustomLabelProps`                               | —               | Override default dropdown label strings                                   |
-| `renderCustomCallToAction`   | `(hideOptions: () => void, options: T[]) => JSX.Element` | —               | Render a custom CTA at the bottom of the dropdown                         |
-| `variant`                    | `"default"` \| `"small"`                                 | `"default"`     | Size variant                                                              |
-| `alignment`                  | `"left"` \| `"right"`                                    | `"left"`        | Dropdown alignment relative to the trigger                                |
-| `dropdownZIndex`             | `number`                                                 | `50`            | Custom z-index for the dropdown                                           |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                 | `document.body` | Root element that hosts the dropdown                                      |
-| `dropdownWidth`              | `string`                                                 | —               | Fixed width for the dropdown (overrides matching the trigger width)       |
-| `data-testid`                | `string`                                                 | —               | Test identifier for the component                                         |
-
-### ListItemRenderArgs
-
-| Prop       | Type      | Description                                 |
-| ---------- | --------- | ------------------------------------------- |
-| `selected` | `boolean` | Whether the list item is currently selected |
-
-### DropdownCustomLabelProps
-
-| Prop                   | Type                    | Description                                                        |
-| ---------------------- | ----------------------- | ------------------------------------------------------------------ |
-| `searchPlaceholder`    | `string`                | Placeholder for the search field                                   |
-| `noResultsLabel`       | `string`                | Replaces the default no-results label                              |
-| `noResultsDescription` | `() => React.ReactNode` | Additional content after the no-results label                      |
-| `selectAllButtonLabel` | `string`                | Label for the Select all button                                    |
-| `clearAllButtonLabel`  | `string`                | Label for the Clear all button                                     |
-| `allSelectedLabel`     | `string`                | Label shown when all options are selected                          |
-| `multiSelectedLabel`   | `string`                | Label shown when multiple options are selected (e.g. "X selected") |
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
-
-## Rules
-
--   Always provide `options` — the component has no meaning without it.
--   Provide `valueExtractor` and `listExtractor` when the option objects are not plain strings — these are effectively required for typed option arrays.
--   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing the raw value (e.g. "sg") in the closed selector instead of the label (e.g. "Singapore").
--   Use `optionsLoadState` to communicate async loading states — set to `"loading"` while fetching, `"failed"` on error (triggers retry UI).
--   Use `enableSearch` when the list exceeds ~10 items.
--   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
--   Use `readOnly` on review screens — not `disabled`.
--   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
--   Use `dropdownWidth` when the dropdown must be wider than the trigger (e.g. long option text).
--   `options` is the only mandatory component-specific prop.
--   Only specify `dropdownRootNode` when the default `body` rendering causes scroll or z-index conflicts.
-
-## Anti-patterns
-
--   Do not use `Form.Select` when users can choose more than one option — use `Form.MultiSelect`.
--   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
--   Do not set both `error` and `errorMessage`.
--   Do not use `disabled` on review screens — use `readOnly`.
diff --git a/docs/skills/fds-build/resources/v4/components/form-slider.md b/docs/skills/fds-build/resources/v4/components/form-slider.md
deleted file mode 100644
index e8349b26d7..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-slider.md
+++ /dev/null
@@ -1,115 +0,0 @@
-# Form.Slider
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Selecting a single numeric value within a bounded range (e.g. budget, age, percentage, rating).
--   When the relative position of a value matters more than typing an exact number.
-
-## Usage
-
-### Basic slider with display-only `onChange` and API-safe `onChangeEnd`
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const BudgetSlider = () => {
-    const [displayValue, setDisplayValue] = useState(500);
-
-    const handleChange = (value: number) => {
-        // Safe: fires continuously during drag — update display only
-        setDisplayValue(value);
-    };
-
-    const handleChangeEnd = (value: number) => {
-        // Safe: fires once on mouse/touch release — trigger API calls here
-        fetchResults({ maxBudget: value });
-    };
-
-    return (
-        <Form.Slider
-            label={`Budget: $${displayValue}`}
-            min={0}
-            max={2000}
-            step={100}
-            value={displayValue}
-            onChange={handleChange}
-            onChangeEnd={handleChangeEnd}
-            showSliderLabels
-            sliderLabelPrefix="$"
-            showIndicatorLabel
-            indicatorLabelPrefix="$"
-        />
-    );
-};
-```
-
-**Never put API calls or expensive state updates in `onChange`** — it fires on every pixel of drag movement. Use `onChangeEnd` instead.
-
-### Custom track colours
-
-`colors` takes a two-element array: `[leftTrackColor, rightTrackColor]`.
-
-```tsx
-<Form.Slider
-    label="Risk level"
-    min={0}
-    max={10}
-    colors={["#4caf50", "#e0e0e0"]}
-    showSliderLabels
-    sliderLabelSuffix=" / 10"
-/>
-```
-
-## Props
-
-| Prop                   | Type                                                              | Default | Description                                                   |
-| ---------------------- | ----------------------------------------------------------------- | ------- | ------------------------------------------------------------- |
-| `value`                | `number`                                                          | —       | Controlled value                                              |
-| `min`                  | `number`                                                          | `0`     | Start of the range                                            |
-| `max`                  | `number`                                                          | `100`   | End of the range                                              |
-| `step`                 | `number`                                                          | `1`     | Interval between values                                       |
-| `disabled`             | `boolean`                                                         | —       | Disables the slider; selection not allowed                    |
-| `readOnly`             | `boolean`                                                         | —       | Read-only state                                               |
-| `id`                   | `string`                                                          | —       | Unique identifier of the component                            |
-| `className`            | `string`                                                          | —       | Class selector of the component                               |
-| `data-testid`          | `string`                                                          | —       | Test identifier of the component                              |
-| `colors`               | `(string \| ((props: ThemeStyleProps) => string \| undefined))[]` | —       | Custom colors for track segments `[leftTrack, rightTrack]`    |
-| `showSliderLabels`     | `boolean`                                                         | —       | Shows min and max labels                                      |
-| `sliderLabelPrefix`    | `string`                                                          | —       | Text prepended to min/max labels                              |
-| `sliderLabelSuffix`    | `string`                                                          | —       | Text appended to min/max labels                               |
-| `renderSliderLabel`    | `(value: number) => React.ReactNode`                              | —       | Custom renderer for min/max labels                            |
-| `showIndicatorLabel`   | `boolean`                                                         | —       | Shows the current value as an indicator label above the thumb |
-| `indicatorLabelPrefix` | `string`                                                          | —       | Text prepended to the indicator label                         |
-| `indicatorLabelSuffix` | `string`                                                          | —       | Text appended to the indicator label                          |
-| `ariaLabel`            | `string`                                                          | —       | Accessible label for screen readers                           |
-| `onChange`             | `(value: number) => void`                                         | —       | Called on every value change (fires continuously during drag) |
-| `onChangeEnd`          | `(value: number) => void`                                         | —       | Called when the thumb is released after a change              |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Always set `min` and `max` to meaningful bounds for the use case.
--   Use `step` to restrict values to meaningful increments (e.g. `step={500}` for a budget slider).
--   Use `onChangeEnd` for expensive operations (API calls, heavy computations) — `onChange` fires on every pixel of movement.
--   Enable `showSliderLabels` so users know the range bounds.
--   Enable `showIndicatorLabel` so users can see the current value while dragging.
--   Provide `ariaLabel` when the label alone does not fully describe the slider's purpose to screen readers.
--   `onChange` fires continuously during drag; use `onChangeEnd` for expensive operations such as API calls.
--   `colors` array format is `[leftTrack, rightTrack]`.
-
-## Anti-patterns
-
--   Do not use `onChange` to trigger API calls — use `onChangeEnd` to avoid flooding the network.
--   Do not use when the user needs to enter a precise value — prefer a number input in that case.
--   Do not omit `min` and `max` — the defaults (0–100) may not be appropriate for the domain.
diff --git a/docs/skills/fds-build/resources/v4/components/form-textarea.md b/docs/skills/fds-build/resources/v4/components/form-textarea.md
deleted file mode 100644
index de67735bf1..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-textarea.md
+++ /dev/null
@@ -1,122 +0,0 @@
-# Form.Textarea
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use for freeform long-text entry — descriptions, comments, reasons, or any field where users need more than one line. Use `Form.Input` for single-line text.
-
-## Usage
-
-### 1. Basic controlled textarea
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const [value, setValue] = useState("");
-
-<Form.Textarea
-    label="Description"
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    placeholder="Enter a description..."
-    rows={4}
-/>;
-```
-
-### 2. With `maxLength` — auto-renders a character counter
-
-```tsx
-<Form.Textarea
-    label="Comments"
-    maxLength={200}
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-/>;
-{
-    /* A counter "0 / 200" appears below automatically — no extra code needed */
-}
-```
-
-### 3. With `renderCustomCounter`
-
-The prop signature is `(maxLength: number, currentValueLength: number) => JSX.Element`. Note the argument order: `maxLength` first, then `currentValueLength`.
-
-```tsx
-<Form.Textarea
-    label="Comments"
-    maxLength={200}
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    renderCustomCounter={(maxLength, currentValueLength) => (
-        <span
-            style={{
-                color: currentValueLength > maxLength * 0.9 ? "red" : "inherit",
-            }}
-        >
-            {currentValueLength} of {maxLength} characters used
-        </span>
-    )}
-/>
-```
-
-### 4. With `transformValue`
-
-`transformValue` runs on every input event and replaces the raw value before it is applied. Do not duplicate this logic in `onChange`.
-
-```tsx
-<Form.Textarea
-    label="Reference code"
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    transformValue={(raw) => raw.toUpperCase()}
-    maxLength={50}
-/>;
-{
-    /* User types "abc" → stored value becomes "ABC" */
-}
-```
-
-## Props
-
-### Textarea specific props
-
-| Prop                  | Type                                                             | Default | Description                                              |
-| --------------------- | ---------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `error`               | `boolean`                                                        | —       | Show error styling — not needed if `errorMessage` is set |
-| `renderCustomCounter` | `(maxLength: number, currentValueLength: number) => JSX.Element` | —       | Render a custom character counter label                  |
-| `transformValue`      | `(value: string) => string`                                      | —       | Transform the value on change before it is applied       |
-| `prefix`              | `string`                                                         | —       | Prefix string displayed inside the textarea              |
-| `data-testid`         | `string`                                                         | —       | Test identifier for the component                        |
-
-Also inherits all props from `HTMLTextareaElement` — including `rows`, `maxLength`, `placeholder`, `disabled`, `readOnly`, `value`, `onChange`, `resize`.
-
-### Form specific props
-
-| Prop                | Type                          | Default | Description                            |
-| ------------------- | ----------------------------- | ------- | -------------------------------------- |
-| `label`             | `string` \| `FormLabelProps`  | —       | Field label                            |
-| `errorMessage`      | `string` \| `React.ReactNode` | —       | Validation error shown below the field |
-| `data-error-testid` | `string`                      | —       | Test identifier for the error message  |
-
-See [Form.Input props](./form-input.md) for `FormLabelProps` and `FormLabelAddonProps` structure.
-
-## Rules
-
--   Set `rows` to match the expected content length — a short reason field needs fewer rows than a free-text description.
--   Set `resize="none"` when the textarea height is fixed by design to prevent layout disruption.
--   Provide `maxLength` when a character limit must be enforced — the built-in counter appears automatically.
--   Use `renderCustomCounter` only when the default counter format does not meet content requirements.
--   Use `transformValue` for on-the-fly normalisation (e.g. forced capitalisation) — do not replicate this in `onChange`.
--   Provide `errorMessage` rather than `error` alone.
--   Setting native `maxLength` renders a character counter below the textarea automatically.
--   `renderCustomCounter` overrides the default counter UI when `maxLength` is set.
--   `error` is redundant when `errorMessage` is provided.
--   `transformValue` runs on every input event — use for normalisation (e.g. uppercase conversion).
-
-## Anti-patterns
-
--   Do not use `Form.Textarea` for single-line inputs — use `Form.Input`.
--   Do not implement a manual character counter in consumer code when `maxLength` is set — the built-in counter handles it.
--   Do not set both `error` and `errorMessage`.
diff --git a/docs/skills/fds-build/resources/v4/components/form-time-range-picker.md b/docs/skills/fds-build/resources/v4/components/form-time-range-picker.md
deleted file mode 100644
index 0e9f27f36e..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-time-range-picker.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# Form.TimeRangePicker
-
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a start and end time from the user (e.g. operating hours, meeting slot, booking window).
--   Use `variant="combobox"` with `interval` when users should pick from fixed time slots (e.g. every 30 minutes).
--   Use `variant="dial"` (default) for freeform time selection.
-
-## Usage
-
-```tsx
-import styles from "./MyForm.module.css";
-
-<Form.TimeRangePicker className={styles.timeRangePicker} ... />
-```
-
-```css
-/* MyForm.module.css */
-:where(body.fds-breakpoint-lg-min) .timeRangePicker {
-    max-width: 24rem;
-}
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
-
-## Props
-
-| Prop               | Type                                    | Default         | Description                                              |
-| ------------------ | --------------------------------------- | --------------- | -------------------------------------------------------- |
-| `value`            | `TimeRangePickerValue`                  | —               | Selected time range                                      |
-| `format`           | `"12hr" \| "24hr"`                      | `"24hr"`        | Time input format                                        |
-| `variant`          | `"dial" \| "combobox"`                  | `"dial"`        | Picker UI variant                                        |
-| `disabled`         | `boolean`                               | —               | Disables the component; entry not allowed                |
-| `readOnly`         | `boolean`                               | —               | Read-only state; selection not allowed                   |
-| `error`            | `boolean`                               | —               | Sets error display (not needed if `errorMessage` is set) |
-| `id`               | `string`                                | —               | Unique identifier of the component                       |
-| `className`        | `string`                                | —               | Class selector of the component                          |
-| `style`            | `React.CSSProperties`                   | —               | Inline styles for the component                          |
-| `data-testid`      | `string`                                | —               | Test identifier of the component                         |
-| `alignment`        | `"left" \| "right"`                     | `"left"`        | Dropdown alignment relative to the field                 |
-| `dropdownZIndex`   | `number`                                | `50`            | z-index of the dropdown                                  |
-| `dropdownRootNode` | `React.RefObject<HTMLElement>`          | `document.body` | Root element containing the dropdown                     |
-| `onChange`         | `(value: TimeRangePickerValue) => void` | —               | Called when user confirms the time range                 |
-| `onBlur`           | `() => void`                            | —               | Called on defocus                                        |
-| `onFocus`          | `() => void`                            | —               | Called when field is focused                             |
-
-## Combobox-variant-specific props
-
-| Prop                     | Type     | Default | Description                                                  |
-| ------------------------ | -------- | ------- | ------------------------------------------------------------ |
-| `interval`               | `number` | `15`    | Minutes between each dropdown option                         |
-| `startLimit`             | `string` | —       | Earliest time shown in the dropdown                          |
-| `endLimit`               | `string` | —       | Latest time shown in the dropdown                            |
-| `initialScrollStartTime` | `string` | —       | Time the start dropdown scrolls to when start field is empty |
-| `initialScrollEndTime`   | `string` | —       | Time the end dropdown scrolls to when end field is empty     |
-
-## TimeRangePickerValue
-
-| Prop    | Type     | Description                                                                                                 |
-| ------- | -------- | ----------------------------------------------------------------------------------------------------------- |
-| `start` | `string` | Start time. Dial 24hr: `"HH:mm"`, dial 12hr: `"hh:mmA"`. Combobox 24hr: `"HH:mm"`, combobox 12hr: `"h:mma"` |
-| `end`   | `string` | End time, same format as `start`                                                                            |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `TimeRangePickerValue`.
--   Match `format` to the expected string format in `TimeRangePickerValue`.
--   Use `startLimit`/`endLimit` with `combobox` variant to restrict available options to valid business hours.
--   Set `errorMessage` rather than `error` alone.
--   Use `dropdownRootNode` when inside a modal or scrollable container.
--   Time string format differs between `dial` and `combobox` variants — see `TimeRangePickerValue` above.
--   `interval`, `startLimit`, `endLimit`, and `initialScroll*` props only apply when `variant="combobox"`.
-
-## Anti-patterns
-
--   Do not use for single time selection — use `Form.TimePicker` instead.
--   Do not mix dial and combobox time string formats — the format differs between variants.
--   Do not set combobox-specific props (`interval`, `startLimit`, `endLimit`, `initialScroll*`) when `variant="dial"`.
diff --git a/docs/skills/fds-build/resources/v4/components/form-timepicker.md b/docs/skills/fds-build/resources/v4/components/form-timepicker.md
deleted file mode 100644
index b5dd71055d..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-timepicker.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Form.Timepicker
-
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-> **Casing:** the export is `Form.Timepicker` (lowercase `p`), not `Form.TimePicker`.
-
-## When to use
-
--   Collecting a single time value from the user (e.g. appointment time, start time, notification time).
--   Use `format="12hr"` for consumer-facing forms where AM/PM is more intuitive.
--   Use `format="24hr"` (default) for operational or technical contexts.
-
-## Usage
-
-```tsx
-import styles from "./MyForm.module.css";
-
-<Form.Timepicker className={styles.timepicker} ... />
-```
-
-```css
-/* MyForm.module.css */
-:where(body.fds-breakpoint-lg-min) .timepicker {
-    max-width: 24rem;
-}
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
-
-## Props
-
-| Prop               | Type                           | Default         | Description                                                                          |
-| ------------------ | ------------------------------ | --------------- | ------------------------------------------------------------------------------------ |
-| `value`            | `string`                       | —               | Selected time. 24hr: `"HH:mm"` (e.g. `"13:00"`); 12hr: `"hh:mmA"` (e.g. `"01:00PM"`) |
-| `format`           | `"12hr" \| "24hr"`             | `"24hr"`        | Time input format                                                                    |
-| `placeholder`      | `string`                       | —               | Placeholder text in the field                                                        |
-| `alignment`        | `"left" \| "right"`            | `"left"`        | Alignment of the dropdown relative to the field                                      |
-| `disabled`         | `boolean`                      | —               | Disables the component; entry not allowed                                            |
-| `error`            | `boolean`                      | —               | Sets error display (not needed if `errorMessage` is set)                             |
-| `id`               | `string`                       | —               | Unique identifier of the component                                                   |
-| `className`        | `string`                       | —               | Class selector of the component                                                      |
-| `style`            | `React.CSSProperties`          | —               | Inline styles for the component                                                      |
-| `data-testid`      | `string`                       | —               | Test identifier of the component                                                     |
-| `dropdownZIndex`   | `number`                       | —               | z-index of the dropdown popover                                                      |
-| `dropdownRootNode` | `React.RefObject<HTMLElement>` | `document.body` | Root element containing the dropdown popover                                         |
-| `onChange`         | `(value: string) => void`      | —               | Called when user confirms a time selection                                           |
-| `onBlur`           | `() => void`                   | —               | Called on defocus; pending changes are not applied                                   |
-| `onFocus`          | `() => void`                   | —               | Called when field is focused                                                         |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage.
--   Match `format` to the expected string format: `"HH:mm"` for 24hr, `"hh:mmA"` for 12hr.
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
--   Use `dropdownRootNode` when the picker is inside a modal or fixed container to avoid z-index issues.
--   Use `alignment="right"` when the picker is near the right edge of the viewport.
--   `onChange` fires only after the user clicks the Confirm button, not on every dial interaction.
--   `onBlur` does not apply any in-progress selection — use `onChange` for committed values.
-
-## Anti-patterns
-
--   Do not use for time-range selection — use `Form.TimeRangePicker` instead.
--   Do not mix 12hr format strings with `format="24hr"` or vice versa.
--   Do not rely on `onBlur` to capture the selected value — it does not commit the selection.
diff --git a/docs/skills/fds-build/resources/v4/components/form-unit-number-input.md b/docs/skills/fds-build/resources/v4/components/form-unit-number-input.md
deleted file mode 100644
index 22e4e4305f..0000000000
--- a/docs/skills/fds-build/resources/v4/components/form-unit-number-input.md
+++ /dev/null
@@ -1,139 +0,0 @@
-# Form.UnitNumberInput
-
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a Singapore unit number in `#floor-unit` format (e.g. `#01-234`).
--   Any address form that includes a unit number field for Singapore addresses.
-
-## Usage
-
-### Basic controlled usage with validation guard
-
-`onChange` returns a `floor-unit` string (e.g. `"03-12"`) or the sentinel string `"Invalid unit number"` for malformed input. Always check before persisting.
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const UnitField = () => {
-    const [value, setValue] = useState("");
-    const [error, setError] = useState("");
-
-    const handleChange = (val: string) => {
-        if (val === "Invalid unit number") {
-            setError("Please enter a valid unit number.");
-            // Do not persist — keep previous valid value in state
-        } else {
-            setError("");
-            setValue(val); // e.g. "03-12"
-        }
-    };
-
-    return (
-        <Form.UnitNumberInput
-            label="Unit number"
-            value={value}
-            onChange={handleChange}
-            errorMessage={error}
-        />
-    );
-};
-```
-
-### `onBlur` zero-pads automatically
-
-After the user tabs away, `onBlur` fires with the formatted value. The displayed value may change without any user input — update state accordingly.
-
-```tsx
-<Form.UnitNumberInput
-    label="Unit number"
-    value={value}
-    onChange={handleChange}
-    onBlur={(formatted) => {
-        // e.g. user typed "3-2" → formatted is "03-02"
-        setValue(formatted);
-    }}
-/>
-```
-
-### `onChangeRaw` — separate floor and unit
-
-Use `onChangeRaw` when downstream code needs floor and unit as distinct values, regardless of validity.
-
-```tsx
-<Form.UnitNumberInput
-    label="Unit number"
-    onChangeRaw={(parts: string[]) => {
-        const [floor, unit] = parts; // e.g. ["03", "12"]
-        setFloor(floor);
-        setUnit(unit);
-    }}
-/>
-```
-
-Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class:
-
-```tsx
-import styles from "./MyForm.module.css";
-
-<Form.UnitNumberInput className={styles.unitNumberInput} ... />
-```
-
-```css
-/* MyForm.module.css */
-:where(body.fds-breakpoint-lg-min) .unitNumberInput {
-    max-width: 24rem;
-}
-```
-
-## Props
-
-| Prop           | Type                        | Default     | Description                                                                                              |
-| -------------- | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
-| `value`        | `string`                    | —           | Controlled value in `floor-unit` format (e.g. `"00-8888"`)                                               |
-| `name`         | `string`                    | —           | Name attribute of the component                                                                          |
-| `error`        | `boolean`                   | —           | Sets error display (not needed if `errorMessage` is set)                                                 |
-| `id`           | `string`                    | —           | Unique identifier of the component                                                                       |
-| `className`    | `string`                    | —           | Class selector of the component                                                                          |
-| `style`        | `React.CSSProperties`       | —           | Inline styles for the component                                                                          |
-| `role`         | `React.AriaRole`            | —           | ARIA role of the component                                                                               |
-| `data-testid`  | `string`                    | —           | Test identifier of the component                                                                         |
-| `placeholder`  | `string`                    | `"00-8888"` | Placeholder text; recommended to use `<floor>-<unit>` format                                             |
-| `disabled`     | `boolean`                   | —           | Disables the component; entry not allowed                                                                |
-| `readOnly`     | `boolean`                   | —           | Read-only state; entry not allowed                                                                       |
-| `tabIndex`     | `number`                    | —           | Tab order of the component                                                                               |
-| `autoComplete` | `string`                    | —           | `autocomplete` attribute for the input field                                                             |
-| `onChange`     | `(value: string) => void`   | —           | Called on value change; returns `floor-unit` string. Returns `"Invalid unit number"` if value is invalid |
-| `onChangeRaw`  | `(value: string[]) => void` | —           | Called on value change; returns `[floor, unit]` array regardless of validity                             |
-| `onBlur`       | `(value: string) => void`   | —           | Called on defocus; returns formatted `floor-unit` string (e.g. `"11-2"` → `"11-02"`)                     |
-| `onBlurRaw`    | `(value: string[]) => void` | —           | Called on defocus; returns `[floor, unit]` array                                                         |
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage.
--   Check the return value of `onChange` for `"Invalid unit number"` and handle it before persisting the value.
--   Use `onChangeRaw` if you need floor and unit as separate values for downstream processing.
--   Use `onBlur` to get the zero-padded, formatted value after the user finishes typing.
--   Set `errorMessage` to explain validation failures.
--   `onChange` returns `"Invalid unit number"` for malformed input — check for this string before saving.
--   `onBlur` zero-pads the unit part (e.g. `"11-2"` → `"11-02"`).
--   Use `onChangeRaw` / `onBlurRaw` when you need floor and unit as separate values.
-
-## Anti-patterns
-
--   Do not use a plain text input for unit numbers — the component enforces the correct format automatically.
--   Do not persist the value returned from `onChange` without first checking it is not `"Invalid unit number"`.
--   Do not use for non-Singapore address formats — the component enforces the `floor-unit` structure.
diff --git a/docs/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md b/docs/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
deleted file mode 100644
index bc10fceddb..0000000000
--- a/docs/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
+++ /dev/null
@@ -1,123 +0,0 @@
-# FullscreenImageCarousel
-
-Import: `import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel"`
-
-## When to use
-
-Use to display a fullscreen overlay carousel of images or custom content (e.g. PDFs, videos) with thumbnail navigation, zoom, and optional delete controls.
-
-## Sub-components
-
--   `FullscreenImageCarouselItemProps` — union of `FullscreenImageCarouselImageItemProps` and `FullscreenImageCarouselCustomItemProps`
-
-## Usage
-
-### Mixed image and custom items
-
-Items use a discriminated union on `type`. Image items may omit `type` (defaults to image); custom items **must** set `type: "custom"` and provide `renderContent`.
-
-```tsx
-import { useState } from "react";
-import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel";
-
-const DocViewer = () => {
-    const [show, setShow] = useState(false);
-
-    const items = [
-        // Image item — type may be omitted
-        {
-            src: "https://example.com/photo.jpg",
-            alt: "Site photo",
-            fileName: "photo.jpg",
-            fileSize: "1.2 MB",
-        },
-        // Custom item — type is required
-        {
-            type: "custom" as const,
-            itemLabel: "PDF",
-            thumbnailSrc: "https://example.com/pdf-thumb.svg",
-            renderContent: () => (
-                <iframe
-                    src="https://example.com/document.pdf"
-                    title="PDF preview"
-                    style={{ width: "100%", height: "100%", border: "none" }}
-                />
-            ),
-        },
-    ];
-
-    const handleDelete = (item, index) => {
-        // Remove the item from your state; the delete button only appears
-        // because onDelete is provided.
-        removeItem(index);
-    };
-
-    return (
-        <>
-            <button onClick={() => setShow(true)}>View files</button>
-            <FullscreenImageCarousel
-                show={show}
-                items={items}
-                onClose={() => setShow(false)}
-                onDelete={handleDelete} // omit to hide delete button
-                showFirstAndLastNav
-            />
-        </>
-    );
-};
-```
-
-## Props
-
-| Prop                     | Type                                                               | Default    | Description                                                                               |
-| ------------------------ | ------------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------- |
-| `show` \*                | `boolean`                                                          | `false`    | Toggles the visibility of the Modal                                                       |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                               | —          | List of carousel items                                                                    |
-| `animationFrom`          | `"top" \| "bottom" \| "left" \| "right"`                           | `"bottom"` | The animation direction the Modal will appear from                                        |
-| `zIndex`                 | `number`                                                           | —          | Custom z-index for modal stacking                                                         |
-| `initialActiveItemIndex` | `number`                                                           | `0`        | The initial image that will be displayed                                                  |
-| `hideThumbnail`          | `boolean`                                                          | —          | Specifies if the bottom thumbnail row is visible                                          |
-| `hideNavigation`         | `boolean`                                                          | —          | Specifies if the left and right navigation buttons are visible                            |
-| `hideCounter`            | `boolean`                                                          | —          | Specifies if the pagination counter pill is visible                                       |
-| `hideMagnifier`          | `boolean`                                                          | —          | Specifies if the magnifier/zoom button is visible                                         |
-| `onDelete`               | `(item: FullscreenImageCarouselItemProps, index: number) => void`  | —          | Called when the delete button is clicked; showing the button requires providing this prop |
-| `onClose`                | `() => void`                                                       | —          | Called when the overlay is dismissed via close button or Esc key                          |
-| `insets`                 | `{ top?: number; bottom?: number; left?: number; right?: number }` | —          | Safe-area insets from viewport edges                                                      |
-
-`*` = required
-
-## FullscreenImageCarouselItemProps (shared)
-
-| Prop       | Type     | Default | Description                                      |
-| ---------- | -------- | ------- | ------------------------------------------------ |
-| `fileName` | `string` | —       | File name displayed in the info bar at the top   |
-| `fileSize` | `string` | —       | Pre-formatted file size string (e.g. `"2.4 MB"`) |
-
-## FullscreenImageCarouselImageItemProps
-
-| Prop           | Type      | Default | Description                                   |
-| -------------- | --------- | ------- | --------------------------------------------- |
-| `type`         | `"image"` | —       | Discriminant; may be omitted for image items  |
-| `src` \*       | `string`  | —       | The image src                                 |
-| `alt`          | `string`  | —       | Descriptive text for screen readers           |
-| `thumbnailSrc` | `string`  | —       | Thumbnail src; falls back to `src` if omitted |
-
-## FullscreenImageCarouselCustomItemProps
-
-| Prop               | Type                    | Default | Description                                  |
-| ------------------ | ----------------------- | ------- | -------------------------------------------- |
-| `type` \*          | `"custom"`              | —       | Discriminant; must be `"custom"`             |
-| `renderContent` \* | `() => React.ReactNode` | —       | Custom render prop for the full slide area   |
-| `thumbnailSrc`     | `string`                | —       | Thumbnail src; shows placeholder if omitted  |
-| `itemLabel`        | `string`                | —       | Label describing content type (e.g. `"PDF"`) |
-
-## Rules
-
--   Always provide `show` and `items` — both are required.
--   Always wire `onClose` to set `show` to `false`; the component does not close itself.
--   Do not reorder the `items` array while a delete is in flight.
--   The delete button only appears when `onDelete` is provided — omit the prop to hide the button entirely.
-
-## Anti-patterns
-
--   Do not use for inline image galleries — this component renders as a fullscreen modal overlay.
diff --git a/docs/skills/fds-build/resources/v4/components/histogram-slider.md b/docs/skills/fds-build/resources/v4/components/histogram-slider.md
deleted file mode 100644
index f05018847b..0000000000
--- a/docs/skills/fds-build/resources/v4/components/histogram-slider.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# HistogramSlider
-
-Import: `import { HistogramSlider } from "@lifesg/react-design-system/histogram-slider"`
-
-A range slider with a histogram distribution chart above it — used in filter panels where showing the value distribution helps users pick a range (e.g. price range, age range).
-
-## Props
-
-| Prop               | Type                                | Default | Description                                                  |
-| ------------------ | ----------------------------------- | ------- | ------------------------------------------------------------ |
-| `bins`             | `HistogramBinProps[]`               | `[]`    | Histogram data — array of `{ count, minValue }` objects      |
-| `interval`         | `number`                            | —       | **Required.** Width of each bin (e.g. `10` for 0–10, 10–20…) |
-| `value`            | `[number, number]`                  | —       | Selected range as `[start, end]`                             |
-| `onChange`         | `(value: [number, number]) => void` | —       | Fires on every drag movement                                 |
-| `onChangeEnd`      | `(value: [number, number]) => void` | —       | Fires when thumb is released — use for API calls             |
-| `disabled`         | `boolean`                           | `false` | Disables interaction                                         |
-| `readOnly`         | `boolean`                           | `false` | Display only — no interaction                                |
-| `showRangeLabels`  | `boolean`                           | —       | Show min/max value labels below the slider                   |
-| `rangeLabelPrefix` | `string`                            | —       | Prefix for range labels (e.g. `"$"`)                         |
-| `rangeLabelSuffix` | `string`                            | —       | Suffix for range labels (e.g. `" km"`)                       |
-| `renderRangeLabel` | `(value: number) => ReactNode`      | —       | Custom range label renderer — overrides prefix/suffix        |
-| `renderEmptyView`  | `() => ReactNode`                   | —       | Renders when `bins` is empty                                 |
-| `ariaLabels`       | `[string, string]`                  | —       | Accessible labels for `[minThumb, maxThumb]`                 |
-| `aria-labelledby`  | `string`                            | —       | ID of an external label element                              |
-| `aria-describedby` | `string`                            | —       | ID of an external description element                        |
-| `data-testid`      | `string`                            | —       | Test identifier                                              |
-
-## HistogramBinProps
-
-| Prop       | Type     | Description                                         |
-| ---------- | -------- | --------------------------------------------------- |
-| `count`    | `number` | Number of items in this bin — determines bar height |
-| `minValue` | `number` | Starting value of this bin                          |
-
-## Rules
-
--   `onChange` fires continuously during drag — do not put API calls here; use `onChangeEnd`.
--   `interval` must match the gap between `minValue` of consecutive bins.
--   Always provide `ariaLabels` or `aria-labelledby` for accessibility.
--   Pair with `Filter` in a filter sidebar — `HistogramSlider` is not a `Form.*` component and does not use `label`/`errorMessage`.
diff --git a/docs/skills/fds-build/resources/v4/components/image-button.md b/docs/skills/fds-build/resources/v4/components/image-button.md
deleted file mode 100644
index 9258796aad..0000000000
--- a/docs/skills/fds-build/resources/v4/components/image-button.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# ImageButton
-
-Import: `import { ImageButton } from "@lifesg/react-design-system/image-button"`
-
-## Props
-
-Inherits all props from `HTMLButtonElement`.
-
-| Prop                    | Type      | Default | Description                              |
-| ----------------------- | --------- | ------- | ---------------------------------------- |
-| `imgSrc`                | `string`  | —       | Image source to be rendered              |
-| `selected`              | `boolean` | —       | Shows the selected state                 |
-| `error`                 | `boolean` | —       | Shows the error state                    |
-| `focusableWhenDisabled` | `boolean` | `false` | Keeps the button focusable when disabled |
diff --git a/docs/skills/fds-build/resources/v4/components/input.md b/docs/skills/fds-build/resources/v4/components/input.md
deleted file mode 100644
index 4810f1eb19..0000000000
--- a/docs/skills/fds-build/resources/v4/components/input.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Input
-
-Import: `import { Input } from "@lifesg/react-design-system/input"`
-
-## When to use
-
-Use `Input` for standalone inputs that do not need a label or error message — search bars, inline editing, filter fields, or composition contexts where the form layout is provided externally. For all labelled form fields with validation messages, use `Form.Input` instead.
-
-## Variants
-
-| `styleType`            | When to use                                                                                                      |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `"bordered"` (default) | Standard standalone input — provides clear affordance                                                            |
-| `"no-border"`          | Inline editing or search bars embedded in headers/toolbars where a border would conflict with the surrounding UI |
-
-## Props
-
-| Prop          | Type                          | Default      | Description                                                         |
-| ------------- | ----------------------------- | ------------ | ------------------------------------------------------------------- |
-| `spacing`     | `number`                      | —            | Number of characters before a space is inserted — `type="tel"` only |
-| `error`       | `boolean`                     | —            | Show error state styling                                            |
-| `allowClear`  | `boolean`                     | `false`      | Show clear icon button inside the field                             |
-| `onClear`     | `() => void`                  | —            | Called when clear icon is clicked                                   |
-| `styleType`   | `"no-border"` \| `"bordered"` | `"bordered"` | Border style variant                                                |
-| `data-testid` | `string`                      | —            | Test identifier for the component                                   |
-
-Also inherits all props from `HTMLInputElement` — including `type`, `value`, `onChange`, `placeholder`, `disabled`, `readOnly`, `maxLength`, etc.
-
-## Rules
-
--   Use `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
--   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
--   Use `allowClear` for search inputs and optional fields; pair with `onClear` to reset the controlled value.
--   Set `error={true}` to communicate an invalid state visually — provide a separate error message element in the surrounding layout.
--   Use `styleType="no-border"` only when the surrounding container or background provides sufficient visual separation.
--   `Input` is the bare input field with no label or error message wrapper. Use `Form.Input` when a label or validation message is needed.
--   `spacing` only has effect when `type="tel"`.
--   `styleType="no-border"` removes the visible border — use only when the surrounding context provides sufficient visual distinction.
--   `error` drives error-state styling only; there is no built-in error message — pair with external error text if needed.
-
-## Anti-patterns
-
--   Do not use `Input` inside a form that needs labels or validation messages — use `Form.Input`.
--   Do not use `spacing` with input types other than `"tel"`.
--   Do not rely on `Input` alone to surface error messages — it has no built-in error text slot.
diff --git a/docs/skills/fds-build/resources/v4/components/language-switcher.md b/docs/skills/fds-build/resources/v4/components/language-switcher.md
deleted file mode 100644
index bf6b2852ca..0000000000
--- a/docs/skills/fds-build/resources/v4/components/language-switcher.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# LanguageSwitcher
-
-Import: `import { LanguageSwitcher } from "@lifesg/react-design-system/language-switcher"`
-
-## Props
-
-| Prop               | Type                                       | Default      | Description                                       |
-| ------------------ | ------------------------------------------ | ------------ | ------------------------------------------------- |
-| `variant`          | `"dropdown" \| "link-container"`           | `"dropdown"` | The display variant of the language switcher      |
-| `className`        | `string`                                   | —            | The className of the component for custom styling |
-| `data-testid`      | `string`                                   | —            | The test identifier of the component              |
-| `selectedLanguage` | `"en" \| "zh" \| "ms" \| "ta"`             | `"en"`       | The currently selected language code              |
-| `onSelectLanguage` | `(language: LanguageSwitcherCode) => void` | —            | Called when a language is selected                |
-
-## Rules
-
--   `LanguageSwitcherCode` is the union of supported language codes: `"en" | "zh" | "ms" | "ta"`.
diff --git a/docs/skills/fds-build/resources/v4/components/layout.md b/docs/skills/fds-build/resources/v4/components/layout.md
deleted file mode 100644
index 454ef5e768..0000000000
--- a/docs/skills/fds-build/resources/v4/components/layout.md
+++ /dev/null
@@ -1,143 +0,0 @@
-# Layout
-
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
-Import: `import { Layout } from "@lifesg/react-design-system/layout"`
-
-## Composition
-
-```
-Layout.Container type="grid"        ← responsive 12-col grid (desktop) / 8-col (mobile)
-├── Layout.ColDiv xsCols lgCols     ← column span — always set xsCols
-├── Layout.ColDiv xsCols lgCols
-└── Layout.ColDiv xsCols lgCols
-
-Layout.Container type="flex"        ← horizontal flexbox row
-└── {children}
-
-Layout.Container type="flex-column" ← vertical flexbox column
-└── {children}
-```
-
-`Layout.Section` and `Layout.Content` share the same props as `Layout.Container` and can be used in place of it for semantic HTML structure. Never nest `Layout.Container` inside another `Layout.Container`. Always set `xsCols` on every `Layout.ColDiv` — never set only `lgCols`.
-
--   `Layout.ColDiv` — responsive grid column div
-
-## Usage
-
-```tsx
-import { Layout } from "@lifesg/react-design-system/layout";
-
-<Layout.Container type="grid">
-    <Layout.ColDiv xsCols={8} lgCols={6}>
-        Content
-    </Layout.ColDiv>
-</Layout.Container>;
-```
-
-| `type`          | Use case                         |
-| --------------- | -------------------------------- |
-| `"grid"`        | Responsive column grid (default) |
-| `"flex"`        | Horizontal flexbox layout        |
-| `"flex-column"` | Vertical flexbox layout          |
-
-## Breakpoints
-
-| Breakpoint | Min width | Columns | Gutter | Device                |
-| ---------- | --------- | ------- | ------ | --------------------- |
-| `xxs`      | 0px       | 8       | 16px   | Smallest mobile       |
-| `xs`       | 321px     | 8       | 16px   | Small mobile          |
-| `sm`       | 376px     | 8       | 16px   | Mobile                |
-| `md`       | 481px     | 8       | 16px   | Large mobile / tablet |
-| `lg`       | 769px     | 12      | 32px   | Desktop               |
-| `xl`       | 1201px    | 12      | 32px   | Large desktop         |
-| `xxl`      | 1441px    | 12      | 32px   | Extra-large           |
-
-### Common column widths
-
-| Use case                             | `xsCols` | `lgCols` | `xlCols` |
-| ------------------------------------ | -------- | -------- | -------- |
-| Full width                           | 8        | 12       | —        |
-| Full width (form progress indicator) | 12       | 12       | —        |
-| Narrow content (forms)               | 12       | 9        | 8        |
-| Half-width (2-up cards)              | 8        | 6        | —        |
-| Third-width (3-up cards)             | 8        | 4        | —        |
-| Quarter-width (4-up metrics)         | 8        | 6        | 3        |
-| Sidebar                              | 8        | 3        | —        |
-| Main + sidebar main                  | 8        | 9        | —        |
-
-## Responsive styles
-
-Use CSS Module classes for responsive styles in v4. The `MediaQuery` breakpoint body classes replace `@media` queries in CSS Modules.
-
-```tsx
-import styles from "./MyComponent.module.css";
-
-<div className={styles.responsiveDiv}>...</div>;
-```
-
-```css
-/* MyComponent.module.css */
-.responsiveDiv {
-    padding: var(--fds-spacing-16);
-}
-
-:global(body.fds-breakpoint-lg-min) .responsiveDiv {
-    padding: var(--fds-spacing-32);
-}
-```
-
-| CSS Module selector                        | Query type          | When it applies                  |
-| ------------------------------------------ | ------------------- | -------------------------------- |
-| `:global(body.fds-breakpoint-md-min) .cls` | `min-width: 481px`  | md and up (tablet+)              |
-| `:global(body.fds-breakpoint-lg-min) .cls` | `min-width: 769px`  | lg and up (desktop+)             |
-| `:global(body.fds-breakpoint-md-max) .cls` | `max-width: 768px`  | md and below (mobile only)       |
-| `:global(body.fds-breakpoint-lg-max) .cls` | `max-width: 1200px` | lg and below (non-large-desktop) |
-
-Design mobile-first — define base styles for mobile, then override with `MinWidth` for larger screens.
-
-## Props
-
-### Layout.Container / Layout.Section / Layout.Content
-
-All three extend `React.HTMLAttributes<HTMLDivElement>`.
-
-| Prop          | Type                                | Default  | Description                                                                                                         |
-| ------------- | ----------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
-| `children`    | `React.ReactNode`                   | —        | Child content                                                                                                       |
-| `type`        | `"flex" \| "flex-column" \| "grid"` | `"flex"` | Display style; use `"flex-column"` for standard vertical page content, `"grid"` for the responsive 12-column layout |
-| `stretch`     | `boolean`                           | —        | Stretch to full viewport height                                                                                     |
-| `data-testid` | `string`                            | —        | Test identifier                                                                                                     |
-
-`Layout.Section` and `Layout.Content` share the same interface as `Layout.Container`.
-
-### Layout.ColDiv
-
-Extends `React.HTMLAttributes<HTMLDivElement>`.
-
-| Prop          | Type                         | Default | Description                         |
-| ------------- | ---------------------------- | ------- | ----------------------------------- |
-| `xxsCols`     | `number \| [number, number]` | —       | Columns at xxs breakpoint (≥0px)    |
-| `xsCols`      | `number \| [number, number]` | —       | Columns at xs breakpoint (≥321px)   |
-| `smCols`      | `number \| [number, number]` | —       | Columns at sm breakpoint (≥376px)   |
-| `mdCols`      | `number \| [number, number]` | —       | Columns at md breakpoint (≥481px)   |
-| `lgCols`      | `number \| [number, number]` | —       | Columns at lg breakpoint (≥769px)   |
-| `xlCols`      | `number \| [number, number]` | —       | Columns at xl breakpoint (≥1201px)  |
-| `xxlCols`     | `number \| [number, number]` | —       | Columns at xxl breakpoint (≥1441px) |
-| `data-testid` | `string`                     | —       | Test identifier                     |
-
-Array form `[startCol, endCol]` specifies explicit grid line positions.
-
-## Rules
-
--   Use CSS Modules for component-level styles — do not use plain inline styles for layout concerns.
--   Use `:where(body.fds-breakpoint-{bp}-min)` selectors for responsive styles — never hardcoded pixel breakpoints.
--   Use CSS custom properties for spacing (e.g. `var(--fds-spacing-16)`) — never hardcode pixel values.
-
-Grid rules:
-
--   Always use `type="grid"` on Container for responsive column layouts.
--   Always specify `xsCols` on ColDiv — mobile-first; never only `lgCols`.
--   Max `xsCols` is 8 (mobile/tablet), max `lgCols` is 12 (desktop).
--   Never nest `Layout.Container` inside another `Layout.Container`.
--   A column span applies to all larger viewports until overridden.
diff --git a/docs/skills/fds-build/resources/v4/components/link-list.md b/docs/skills/fds-build/resources/v4/components/link-list.md
deleted file mode 100644
index d93ef99f80..0000000000
--- a/docs/skills/fds-build/resources/v4/components/link-list.md
+++ /dev/null
@@ -1,89 +0,0 @@
-# LinkList
-
-Import: `import { LinkList } from "@lifesg/react-design-system/link-list"`
-
-## When to use
-
-Use to present a set of related links — related articles, resources, or quick-access shortcuts. Use `style="small"` for compact contexts such as sidebars or footnotes.
-
-## Sub-components
-
-### LinkListItemProps
-
-| Prop                   | Type                                                   | Default | Description                                        |
-| ---------------------- | ------------------------------------------------------ | ------- | -------------------------------------------------- |
-| `title`                | `string`                                               | —       | Link label — required                              |
-| `description`          | `string`                                               | —       | First-level supporting text below the title        |
-| `secondaryDescription` | `string`                                               | —       | Second-level supporting text below the description |
-| `options`              | `T`                                                    | —       | Custom properties to pass to the item              |
-| `onClick`              | `(event: React.MouseEvent<HTMLAnchorElement>) => void` | —       | Per-item click handler — overrides `onItemClick`   |
-| `data-testid`          | `string`                                               | —       | Test identifier for the item                       |
-
-Inherits `HTMLAnchorElement` attributes (e.g. `href`, `target`).
-
-### Custom labels
-
-| Prop       | Type     | Default       | Description                    |
-| ---------- | -------- | ------------- | ------------------------------ |
-| `viewMore` | `string` | `"View more"` | Label for the show-more button |
-| `viewLess` | `string` | `"View less"` | Label for the show-less button |
-
-## Variants
-
-| `style`     | Usage                                                  |
-| ----------- | ------------------------------------------------------ |
-| `"default"` | Standard size — use in main content areas              |
-| `"small"`   | Compact — use in sidebars, footnotes, or dense layouts |
-
-| `loadMode` | Usage                                                         |
-| ---------- | ------------------------------------------------------------- |
-| `"eager"`  | All items loaded upfront; use `maxShown` to collapse the list |
-| `"lazy"`   | Items fetched on demand; requires `loadMore` and `onLoadMore` |
-
-## Usage
-
-```tsx
-import { LinkList } from "@lifesg/react-design-system/link-list";
-
-<LinkList
-    items={[
-        {
-            title: "Apply for a grant",
-            description: "Find out if you qualify.",
-            href: "/grants/apply",
-        },
-        { title: "Check application status", href: "/grants/status" },
-        { title: "Download forms", href: "/grants/forms" },
-    ]}
-    maxShown={2}
-/>;
-```
-
-## Props
-
-| Prop           | Type                                                                               | Default     | Description                                       |
-| -------------- | ---------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |
-| `items`        | `LinkListItemProps<T>[]`                                                           | —           | Array of link items — required                    |
-| `style`        | `"default"` \| `"small"`                                                           | `"default"` | Text size style                                   |
-| `loadMode`     | `"eager"` \| `"lazy"`                                                              | `"eager"`   | Loading mode for items                            |
-| `maxShown`     | `number`                                                                           | —           | Max items shown before collapse (eager mode only) |
-| `loadMore`     | `boolean`                                                                          | —           | Whether more items can be lazy-loaded (lazy mode) |
-| `onLoadMore`   | `() => void \| Promise<void>`                                                      | —           | Callback when "View more" is clicked (lazy mode)  |
-| `onItemClick`  | `(item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement>) => void` | —           | Component-level click handler for all items       |
-| `customLabels` | `object`                                                                           | —           | Override "View more" / "View less" button labels  |
-| `className`    | `string`                                                                           | —           | Class selector                                    |
-| `data-testid`  | `string`                                                                           | —           | Test identifier                                   |
-
-## Rules
-
--   Use `maxShown` when the list has many items to avoid overwhelming the user on first load (eager mode).
--   In `"lazy"` mode, both `loadMore` and `onLoadMore` are required.
--   `onItemClick` applies to all items; per-item `onClick` in `LinkListItemProps` overrides it for that item.
--   Use per-item `onClick` when individual items need different handling; use `onItemClick` for a uniform handler across all items.
--   Use `description` to give users enough context to choose the right link without clicking.
-
-## Anti-patterns
-
--   Using lazy mode without providing `onLoadMore` — the "View more" button will be non-functional.
--   Omitting `description` when link titles are ambiguous.
--   Using LinkList for non-link content — use a list or table instead.
diff --git a/docs/skills/fds-build/resources/v4/components/local-nav.md b/docs/skills/fds-build/resources/v4/components/local-nav.md
deleted file mode 100644
index fb02440e76..0000000000
--- a/docs/skills/fds-build/resources/v4/components/local-nav.md
+++ /dev/null
@@ -1,95 +0,0 @@
-# LocalNav
-
-Import: `import { LocalNavMenu, LocalNavDropdown } from "@lifesg/react-design-system/local-nav"`
-
-## When to use
-
-Use to let users navigate between sections on the same page (in-page navigation). Two components exist for different breakpoints — use both together for full responsive coverage.
-
-## Sub-components
-
-`LocalNavMenu`, `LocalNavDropdown`
-
-## Variants
-
-| Component          | Viewport          | Behaviour                                                              |
-| ------------------ | ----------------- | ---------------------------------------------------------------------- |
-| `LocalNavMenu`     | Desktop           | Vertical link list fixed to the left of page content, sticky on scroll |
-| `LocalNavDropdown` | Tablet and mobile | Renders inline, then sticks to top of viewport after scroll            |
-
-## Usage
-
-```tsx
-import {
-    LocalNavMenu,
-    LocalNavDropdown,
-} from "@lifesg/react-design-system/local-nav";
-
-const navItems = [
-    { title: "Overview", id: "overview" },
-    { title: "Eligibility", id: "eligibility" },
-    { title: "How to apply", id: "how-to-apply" },
-];
-
-{
-    /* Desktop */
-}
-<LocalNavMenu
-    items={navItems}
-    selectedItemIndex={activeIndex}
-    onNavItemSelect={(e, item, index) => {}}
-/>;
-
-{
-    /* Mobile / tablet */
-}
-<LocalNavDropdown
-    items={navItems}
-    selectedItemIndex={activeIndex}
-    defaultLabel="Jump to section"
-    onNavItemSelect={(e, item, index) => {}}
-/>;
-```
-
-## Props
-
-### Shared props (both components)
-
-| Prop                | Type                                                                                                  | Default | Description                          |
-| ------------------- | ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------ |
-| `items`             | `LocalNavItemProps[]`                                                                                 | —       | Nav items                            |
-| `selectedItemIndex` | `number`                                                                                              | —       | Index of the currently active item   |
-| `onNavItemSelect`   | `(e: React.MouseEvent \| React.KeyboardEvent, item: LocalNavItemProps, index: number) => void`        | —       | Called when an item is selected      |
-| `renderItem`        | `(item: LocalNavItemProps, renderProps: { selected: boolean, stickied: boolean }) => React.ReactNode` | —       | Custom render function for nav items |
-| `id`                | `string`                                                                                              | —       | Unique identifier                    |
-| `className`         | `string`                                                                                              | —       | Class selector                       |
-| `data-testid`       | `string`                                                                                              | —       | Test identifier                      |
-
-### LocalNavDropdown (additional props)
-
-| Prop           | Type     | Default | Description                                             |
-| -------------- | -------- | ------- | ------------------------------------------------------- |
-| `defaultLabel` | `string` | —       | Label shown before any item is selected — **required**  |
-| `stickyOffset` | `number` | —       | Top offset in pixels when the dropdown sticks on scroll |
-
-### LocalNavItemProps
-
-| Prop    | Type                        | Description                        |
-| ------- | --------------------------- | ---------------------------------- |
-| `title` | `string \| React.ReactNode` | Display label — **required**       |
-| `id`    | `string`                    | Unique identifier for the nav item |
-
-## Rules
-
--   Use `LocalNavMenu` on desktop and `LocalNavDropdown` on tablet/mobile — render both and show/hide with CSS breakpoints.
--   Always implement scroll-spy: update `selectedItemIndex` as the user scrolls to keep the active item in sync with the visible section. This is not automatic.
--   Place `LocalNavMenu` on the left side of the page content area — not above it.
--   Set `stickyOffset` on `LocalNavDropdown` equal to the height of the fixed Navbar so the dropdown does not overlap it when sticky.
--   Keep item labels short — long labels cause overflow.
--   `defaultLabel` is required on `LocalNavDropdown` — it is the placeholder shown before any item is selected.
-
-## Anti-patterns
-
--   Do not use `LocalNavMenu` on tablet or mobile — use `LocalNavDropdown` instead.
--   Do not omit scroll-spy logic — without it, `selectedItemIndex` will not reflect the current section.
--   Do not place `LocalNavMenu` above the content — it must be a left sidebar.
diff --git a/docs/skills/fds-build/resources/v4/components/masthead.md b/docs/skills/fds-build/resources/v4/components/masthead.md
deleted file mode 100644
index 46b67fdf42..0000000000
--- a/docs/skills/fds-build/resources/v4/components/masthead.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Masthead
-
-Import: `import { Masthead } from "@lifesg/react-design-system/masthead"`
-
-## Props
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | `false` | Stretch to the maximum width of the screen, with fixed padding |
-
-## Rules
-
--   No mandatory props.
--   `Masthead` is typically included via the `Navbar` `masthead` prop — use this standalone component only when rendering the masthead outside a Navbar context.
diff --git a/docs/skills/fds-build/resources/v4/components/menu.md b/docs/skills/fds-build/resources/v4/components/menu.md
deleted file mode 100644
index 51bd049f72..0000000000
--- a/docs/skills/fds-build/resources/v4/components/menu.md
+++ /dev/null
@@ -1,115 +0,0 @@
-# Menu
-
-Import: `import { Menu } from "@lifesg/react-design-system/menu"`
-
-## When to use
-
-Use when a trigger element (button, avatar, nav link) should open a floating dropdown with a list of actions or links.
-
-Common use cases:
-
--   Avatar / user account menu in authenticated dashboards
--   Navbar link dropdown for sub-navigation
-
-## Sub-components
-
-`Menu`, `Menu.Content`, `Menu.Section`, `Menu.Item`, `Menu.Link`
-
-## Variants
-
-| Use case          | Structure                                                                                                                   |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| User account menu | First section: name + email as `Menu.Item`. Subsequent sections: `Menu.Link` for profile/settings, `Menu.Item` for sign out |
-| Nav link dropdown | Single `Menu.Section` with `Menu.Link` items                                                                                |
-| Action menu       | `Menu.Section` with `Menu.Item` elements and optional `label`                                                               |
-
-## Usage
-
-```tsx
-import { Menu } from "@lifesg/react-design-system/menu";
-import { Button } from "@lifesg/react-design-system/button";
-
-<Menu
-    menuContent={
-        <Menu.Content>
-            <Menu.Section showDivider={false}>
-                <Menu.Link href="/profile">Profile</Menu.Link>
-                <Menu.Link href="/settings">Settings</Menu.Link>
-            </Menu.Section>
-            <Menu.Section>
-                <Menu.Item label="Sign out" onClick={() => {}} />
-            </Menu.Section>
-        </Menu.Content>
-    }
->
-    <Button.Default styleType="secondary">Account</Button.Default>
-</Menu>;
-```
-
-## Props
-
-### Menu
-
-Inherits `PopoverV2TriggerProps` (except `popoverContent`), plus:
-
-| Prop          | Type                                                                                                                                                                 | Default          | Description                                         |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | --------------------------------------------------- |
-| `menuContent` | `Menu.Content`                                                                                                                                                       | —                | The popover panel — **required**                    |
-| `position`    | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | `"bottom-start"` | Visual position of the menu relative to its trigger |
-| `data-testid` | `string`                                                                                                                                                             | `"menu"`         | Test identifier                                     |
-
-### Menu.Content
-
-Inherits `HTMLAttributes<HTMLDivElement>`, plus:
-
-| Prop          | Type                                                    | Default          | Description                                                   |
-| ------------- | ------------------------------------------------------- | ---------------- | ------------------------------------------------------------- |
-| `children`    | `Menu.Section \| Menu.Section[]`                        | —                | One or more `Menu.Section` elements — **required**            |
-| `overflow`    | `"visible" \| "hidden" \| "clip" \| "scroll" \| "auto"` | —                | Controls content overflow                                     |
-| `maxHeight`   | `number`                                                | —                | Max height in pixels; overflow behavior applies when exceeded |
-| `data-testid` | `string`                                                | `"menu-content"` | Test identifier                                               |
-
-### Menu.Section
-
-Inherits `HTMLAttributes<HTMLDivElement>`, plus:
-
-| Prop          | Type                                                   | Default          | Description                        |
-| ------------- | ------------------------------------------------------ | ---------------- | ---------------------------------- |
-| `children`    | `Menu.Item \| Menu.Link \| (Menu.Item \| Menu.Link)[]` | —                | Menu items or links — **required** |
-| `label`       | `string`                                               | —                | Optional section heading           |
-| `showDivider` | `boolean`                                              | `true`           | Show a divider above the section   |
-| `data-testid` | `string`                                               | `"menu-section"` | Test identifier                    |
-
-### Menu.Item
-
-Inherits `HTMLAttributes<HTMLLIElement>`, plus:
-
-| Prop          | Type                                           | Default       | Description                                                                      |
-| ------------- | ---------------------------------------------- | ------------- | -------------------------------------------------------------------------------- |
-| `label`       | `string`                                       | —             | Primary text for the menu item                                                   |
-| `subLabel`    | `string`                                       | —             | Secondary text shown below the label                                             |
-| `data-testid` | `string`                                       | `"menu-item"` | Test identifier                                                                  |
-| `onClick`     | `(e: React.MouseEvent<HTMLLIElement>) => void` | —             | Called when the item is clicked — inherited from `HTMLAttributes<HTMLLIElement>` |
-
-### Menu.Link
-
-Inherits `HTMLAttributes<HTMLAnchorElement>`, plus:
-
-| Prop          | Type     | Default       | Description     |
-| ------------- | -------- | ------------- | --------------- |
-| `data-testid` | `string` | `"menu-link"` | Test identifier |
-
-## Rules
-
--   `Menu` wraps a trigger element as its child — the trigger can be any element (e.g. `Avatar`, `Button`, `NavbarLink`).
--   Pass `Menu.Content` as the `menuContent` prop — not as a child of `Menu`.
--   Use `Menu.Link` for navigation (href-based); use `Menu.Item` for in-page actions (onClick-based).
--   Use `Menu.Section` with `showDivider` to visually separate unrelated groups of actions.
--   For user account menus, always show the user's name and email as the first section.
--   Use `position` to control which side of the trigger the menu appears on; default `"bottom-start"` suits most cases.
-
-## Anti-patterns
-
--   Do not pass `Menu.Content` as a child of `Menu` — it must be passed as `menuContent`.
--   Do not mix navigation links and action items in the same `Menu.Section` without a divider.
--   Do not use `Menu.Item` for links that navigate to a new page — use `Menu.Link` instead.
diff --git a/docs/skills/fds-build/resources/v4/components/modal.md b/docs/skills/fds-build/resources/v4/components/modal.md
deleted file mode 100644
index 4b79a54efd..0000000000
--- a/docs/skills/fds-build/resources/v4/components/modal.md
+++ /dev/null
@@ -1,114 +0,0 @@
-# Modal
-
-Import: `import { Modal } from "@lifesg/react-design-system/modal"`
-
-## When to use
-
-Use for focused interactions that interrupt the user's flow — confirmations, detail views, or short multi-field forms that do not warrant a new page.
-
-## Sub-components
-
-`Modal`, `Modal.Box`
-
-## Variants
-
-| Use case            | Notes                                                         |
-| ------------------- | ------------------------------------------------------------- |
-| Confirmation dialog | Title, description, and primary/secondary action buttons      |
-| Detail view         | Informational content with a close button                     |
-| Short form          | Minimal fields only; complex forms belong on a dedicated page |
-
-## Usage
-
-### Confirmation dialog
-
-```tsx
-import { useState } from "react";
-import { Modal } from "@lifesg/react-design-system/modal";
-import { Button } from "@lifesg/react-design-system/button";
-import { Text } from "@lifesg/react-design-system/text";
-
-const ConfirmDeleteModal = () => {
-    const [show, setShow] = useState(false);
-
-    const handleClose = () => setShow(false);
-
-    const handleConfirm = () => {
-        // perform action
-        setShow(false);
-    };
-
-    return (
-        <>
-            <Button.Default onClick={() => setShow(true)}>
-                Delete item
-            </Button.Default>
-
-            <Modal show={show} enableOverlayClick onOverlayClick={handleClose}>
-                <Modal.Box showCloseButton onClose={handleClose}>
-                    <div style={{ padding: "2rem" }}>
-                        <Text.H3 style={{ marginBottom: "0.5rem" }}>
-                            Delete this item?
-                        </Text.H3>
-                        <Text.Body style={{ marginBottom: "1.5rem" }}>
-                            This action cannot be undone.
-                        </Text.Body>
-                        <div style={{ display: "flex", gap: "1rem" }}>
-                            <Button.Default
-                                styleType="secondary"
-                                onClick={handleClose}
-                            >
-                                Cancel
-                            </Button.Default>
-                            <Button.Default onClick={handleConfirm}>
-                                Confirm
-                            </Button.Default>
-                        </div>
-                    </div>
-                </Modal.Box>
-            </Modal>
-        </>
-    );
-};
-```
-
-## Props
-
-### Modal
-
-| Prop                    | Type                                     | Default    | Description                                                                                                              |
-| ----------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `show`                  | `boolean`                                | —          | Controls visibility — **required**                                                                                       |
-| `children`              | `JSX.Element`                            | —          | Modal content; parent element must be a valid HTML element or component that forwards a ref. Fragments are not supported |
-| `animationFrom`         | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Slide-in direction                                                                                                       |
-| `enableOverlayClick`    | `boolean`                                | —          | Allow clicking the overlay to dismiss                                                                                    |
-| `onOverlayClick`        | `() => void`                             | —          | Called when the overlay is clicked; requires `enableOverlayClick: true`                                                  |
-| `zIndex`                | `number`                                 | —          | Custom z-index (useful for stacked modals)                                                                               |
-| `rootComponentId`       | `string`                                 | —          | ID of the element to portal the modal into; defaults to `<body>`                                                         |
-| `dismissKeyboardOnShow` | `boolean`                                | `true`     | Dismiss mobile keyboard when modal opens                                                                                 |
-
-### Modal.Box
-
-| Prop              | Type         | Default | Description                                       |
-| ----------------- | ------------ | ------- | ------------------------------------------------- |
-| `showCloseButton` | `boolean`    | `true`  | Show the close button (×) in the top-right corner |
-| `onClose`         | `() => void` | —       | Called when the close button is clicked           |
-
-## Rules
-
--   Always include `showCloseButton` on `Modal.Box` — the close button is the minimum required exit mechanism.
--   `Modal` handles the overlay and animation. Always nest `Modal.Box` (or a custom content container) inside `Modal`.
--   Fragments are not supported as direct children of `Modal`.
--   Content inside `Modal.Box` scrolls automatically when it exceeds the screen height.
--   Use `animationFrom="bottom"` for mobile-friendly sheet-style modals.
--   Optionally also allow overlay dismissal via `enableOverlayClick` + `onOverlayClick`.
--   Use Typography components for all text inside the modal — not raw HTML elements.
--   Keep modal content focused — one task or decision per modal.
--   Use illustrations (image above the title) for complex messages to reduce cognitive load; skip them for simple confirmations.
-
-## Anti-patterns
-
--   Do not use a Fragment as a direct child of `Modal` — use a valid HTML element or a component that forwards a ref.
--   Do not use modals for complex multi-step forms — navigate to a dedicated page instead.
--   Do not stack modals unless using `zIndex` to manage layering explicitly.
--   Do not omit `showCloseButton` — users must always have a way to exit the modal.
diff --git a/docs/skills/fds-build/resources/v4/components/navbar.md b/docs/skills/fds-build/resources/v4/components/navbar.md
deleted file mode 100644
index d469355d22..0000000000
--- a/docs/skills/fds-build/resources/v4/components/navbar.md
+++ /dev/null
@@ -1,203 +0,0 @@
-# Navbar
-
-Import: `import { Navbar } from "@lifesg/react-design-system/navbar"`
-
-## When to use
-
-Place at the top of every page. Required on all pages. Automatically collapses navigation items into a hamburger drawer on mobile.
-
-## Variants
-
-| `layout`    | When to use                                     |
-| ----------- | ----------------------------------------------- |
-| `"default"` | Centered content container — standard pages     |
-| `"stretch"` | Full-width content — must match Footer `layout` |
-
-## Usage
-
-### Complete Navbar with link items, a submenu, and an action button
-
-`NavItemProps` is a discriminated union on `itemType`. The default (no `itemType`) is a link item. Use `itemType: "component"` for custom elements like an avatar with a dropdown.
-
-```tsx
-import { useState } from "react";
-import { Navbar } from "@lifesg/react-design-system/navbar";
-
-const AppNavbar = () => {
-    const [selectedId, setSelectedId] = useState("home");
-
-    return (
-        <Navbar
-            masthead
-            selectedId={selectedId}
-            onItemClick={(item) => item.id && setSelectedId(item.id)}
-            items={{
-                desktop: [
-                    // itemType defaults to "link"
-                    {
-                        id: "home",
-                        children: "Home",
-                        href: "/",
-                    },
-                    {
-                        id: "guides",
-                        children: "Guides",
-                        href: "/guides",
-                        // subMenu items share the same shape as top-level link items
-                        subMenu: [
-                            {
-                                id: "guides-start",
-                                children: "Getting started",
-                                href: "/guides/start",
-                            },
-                            {
-                                id: "guides-api",
-                                children: "API reference",
-                                href: "/guides/api",
-                            },
-                        ],
-                    },
-                    {
-                        // itemType: "component" — renders arbitrary JSX; no href or id needed
-                        itemType: "component",
-                        children: <UserAvatar />,
-                    },
-                ],
-            }}
-            actionButtons={{
-                desktop: [
-                    {
-                        type: "button",
-                        args: { children: "Log in", styleType: "secondary" },
-                    },
-                ],
-            }}
-            resources={{
-                primary: { brandName: "MyService", logoSrc: "/logo.svg" },
-            }}
-        />
-    );
-};
-```
-
-Key points:
-
--   Omit `itemType` (or set `itemType: "link"`) for standard anchor items.
--   `subMenu` accepts the same `NavItemCommonProps` shape as top-level items.
--   `itemType: "component"` items take `children: JSX.Element`; they do not accept `id`, `href`, or `subMenu`.
--   `selectedId` matches against the `id` field of link items to highlight the active page.
-
-## Props
-
-### Navbar
-
-| Prop                        | Type                                        | Default                    | Description                                       |
-| --------------------------- | ------------------------------------------- | -------------------------- | ------------------------------------------------- |
-| `items`                     | `NavItemsProps<T>`                          | —                          | Navigation link items — **required**              |
-| `resources`                 | `NavbarResourcesProps`                      | —                          | Brand logos (primary and optional secondary)      |
-| `actionButtons`             | `NavbarActionButtonsProps`                  | —                          | Action buttons for desktop and optional mobile    |
-| `selectedId`                | `string`                                    | —                          | ID of the currently active navigation item        |
-| `compress`                  | `boolean`                                   | `false`                    | Display navbar in compressed height               |
-| `fixed`                     | `boolean`                                   | `true`                     | Fix navbar position to the top of the viewport    |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                   | `[]`                       | Methods that should not dismiss the mobile drawer |
-| `hideNavBranding`           | `boolean`                                   | `false`                    | Hide brand logos                                  |
-| `hideNavElements`           | `boolean`                                   | `false`                    | Hide links and action buttons                     |
-| `hideLinkIndicator`         | `boolean`                                   | `false`                    | Hide the selected link indicator                  |
-| `masthead`                  | `boolean`                                   | `true`                     | Render the government masthead above the navbar   |
-| `layout`                    | `"default" \| "stretch"`                    | `"default"`                | Layout type for navbar content                    |
-| `headerLabel`               | `string`                                    | `"Main navigation menu"`   | Accessible label for the navigation header        |
-| `drawerLabel`               | `string`                                    | `"Mobile navigation menu"` | Accessible label for the mobile drawer            |
-| `onBrandClick`              | `(type: BrandType) => void`                 | —                          | Called when a brand icon is clicked               |
-| `onItemClick`               | `(item: NavItemProps<T>) => void`           | —                          | Called when a navigation item is clicked          |
-| `onActionButtonClick`       | `(actionButton: NavbarButtonProps) => void` | —                          | Called when an action button is clicked           |
-| `id`                        | `string`                                    | —                          | Unique identifier                                 |
-| `data-testid`               | `string`                                    | —                          | Test identifier                                   |
-
-### NavItemsProps
-
-| Prop      | Type                | Default | Description                                              |
-| --------- | ------------------- | ------- | -------------------------------------------------------- |
-| `desktop` | `NavItemProps<T>[]` | —       | Nav items for desktop — **required**                     |
-| `mobile`  | `NavItemProps<T>[]` | —       | Nav items for mobile; falls back to `desktop` if omitted |
-
-### NavItemProps
-
-Union of `NavItemLinkProps<T>` and `NavItemComponentProps`.
-
-**NavItemLinkProps**
-
-| Prop       | Type                      | Description        |
-| ---------- | ------------------------- | ------------------ |
-| `itemType` | `"link"`                  | Link-type nav item |
-| `subMenu`  | `NavItemCommonProps<T>[]` | Sub-menu items     |
-
-**NavItemComponentProps**
-
-| Prop       | Type          | Description                              |
-| ---------- | ------------- | ---------------------------------------- |
-| `itemType` | `"component"` | Custom component nav item — **required** |
-| `children` | `JSX.Element` | Custom component to render               |
-
-### NavItemCommonProps
-
-Inherits `TypographyLinkProps`, plus:
-
-| Prop          | Type     | Description                             |
-| ------------- | -------- | --------------------------------------- |
-| `id`          | `string` | Unique identifier; used by `selectedId` |
-| `options`     | `T`      | Additional props passed to the nav item |
-| `data-testid` | `string` | Test identifier                         |
-
-### NavbarActionButtonsProps
-
-| Prop      | Type                  | Default | Description                                                   |
-| --------- | --------------------- | ------- | ------------------------------------------------------------- |
-| `desktop` | `NavbarButtonProps[]` | —       | Action buttons for desktop — **required**                     |
-| `mobile`  | `NavbarButtonProps[]` | —       | Action buttons for mobile; falls back to `desktop` if omitted |
-
-### NavbarButtonProps
-
-| Prop            | Type                                        | Default | Description                                                  |
-| --------------- | ------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `type`          | `"download" \| "button" \| "component"`     | —       | Button type — **required**                                   |
-| `args`          | `ButtonProps \| NavbarButtonComponentProps` | —       | Props for the button                                         |
-| `uncollapsible` | `boolean`                                   | —       | Keep visible on mobile instead of collapsing into the drawer |
-
-### NavbarResourcesProps
-
-| Prop        | Type                  | Default       | Description                                                       |
-| ----------- | --------------------- | ------------- | ----------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | theme default | Primary branding — omit entirely to use the theme's built-in logo |
-| `secondary` | `NavbarBrandingProps` | —             | Secondary branding                                                |
-
-### NavbarBrandingProps
-
-| Prop        | Type     | Description                    |
-| ----------- | -------- | ------------------------------ |
-| `brandName` | `string` | Brand name of the website      |
-| `logoSrc`   | `string` | Image source of the brand logo |
-
-## Rules
-
--   Always set `masthead` — all government services must display the masthead.
--   Always provide a meaningful `id` on each `NavItemCommonProps` item — used by `selectedId` to highlight the active page.
--   `items.desktop` is required; the component crashes without it.
--   `items.mobile` is optional — falls back to `desktop` if omitted.
--   `layout` must match the `Footer` `layout` prop; do not mix `"default"` and `"stretch"`.
--   Limit action buttons to 2–3 maximum.
--   Use SVG format for brand logos.
--   When using `fixed`, add corresponding top padding to page content to prevent overlap.
--   Set `uncollapsible: true` on action buttons that must remain visible on mobile (e.g. avatar).
--   Use `itemType: "component"` for custom nav elements such as an avatar with a `Menu` dropdown.
--   Pass `type: "component"` with `args: { render: <Element /> }` for custom action button elements.
--   `BrandType` is `"primary" | "secondary"` — passed to `onBrandClick`.
--   The `"download"` button type is pre-programmed for LifeSG purposes.
--   `NavbarButtonComponentProps` accepts a `render: JSX.Element` field for custom components.
-
-## Anti-patterns
-
--   Do not omit `masthead` — it is required for government compliance.
--   Do not supply a custom `resources.primary.logoSrc` unless the service has its own brand logo — omit `resources` to let the theme render its built-in logo.
--   Do not use `hideNavElements` as a default state — it is for special page states only (e.g. maintenance).
--   Do not use `fixed: false` unless the layout explicitly requires a non-fixed header.
--   Do not add more than 3 action buttons — the navbar becomes visually cluttered.
diff --git a/docs/skills/fds-build/resources/v4/components/notification-banner.md b/docs/skills/fds-build/resources/v4/components/notification-banner.md
deleted file mode 100644
index 3352c44733..0000000000
--- a/docs/skills/fds-build/resources/v4/components/notification-banner.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# NotificationBanner
-
-Import: `import { NotificationBanner } from "@lifesg/react-design-system/notification-banner"`
-
-## When to use
-
-Use for notices that must always be visible to the user — maintenance windows, policy changes, mandatory announcements. Unlike Toast, it does not auto-dismiss. Unlike Alert, it applies to the entire page, not a specific section.
-
-## Sub-components
-
--   `NotificationBanner.Link` — Inherits `TypographyLinkProps`. Use for links within banner content.
-
-## HOC
-
-```ts
-withNotificationBanner(data: NotificationContentAttributes[])
-```
-
-### NotificationContentAttributes
-
-| Prop              | Type                                       | Default | Description                                      |
-| ----------------- | ------------------------------------------ | ------- | ------------------------------------------------ |
-| `type`            | `"text"` \| `"link"`                       | —       | Type of content — required                       |
-| `content`         | `string`                                   | —       | Text content — required                          |
-| `otherAttributes` | `TypographyLinkProps` \| `TypographyProps` | —       | Additional props passed to the content component |
-
-## Usage
-
-```tsx
-import { NotificationBanner } from "@lifesg/react-design-system/notification-banner";
-
-<NotificationBanner dismissible sticky onDismiss={() => {}}>
-    Scheduled maintenance on 1 Feb 2026, 2–4 AM.{" "}
-    <NotificationBanner.Link href="/status">
-        View status
-    </NotificationBanner.Link>
-</NotificationBanner>;
-```
-
-## Props
-
-| Prop                 | Type                                                | Default | Description                                  |
-| -------------------- | --------------------------------------------------- | ------- | -------------------------------------------- |
-| `children`           | `string` \| `JSX.Element` \| `JSX.Element[]`        | —       | Banner content                               |
-| `dismissible`        | `boolean`                                           | —       | Show dismiss button                          |
-| `visible`            | `boolean`                                           | —       | Control visibility externally                |
-| `icon`               | `JSX.Element`                                       | —       | Icon displayed in the banner                 |
-| `sticky`             | `boolean`                                           | —       | Fix banner to top on scroll                  |
-| `onDismiss`          | `() => void`                                        | —       | Called when banner is dismissed              |
-| `onClick`            | `(event: React.MouseEvent<HTMLDivElement>) => void` | —       | Called when banner is clicked                |
-| `maxCollapsedHeight` | `number`                                            | —       | Maximum visible height of content in px      |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>`     | —       | Action button at the bottom of the component |
-
-## Rules
-
--   Place directly below the Navbar — above all page content.
--   Use for page-wide or system-wide notices only — not for section-specific messages.
--   Use `dismissible={false}` for mandatory notices users must not be able to dismiss.
--   Use `NotificationBanner.Link` for all links within the banner — renders with the external link indicator automatically.
--   Use `maxCollapsedHeight` for long notices to avoid overwhelming the layout.
--   Use the `withNotificationBanner` HOC for banner content driven from a backend or external data source.
-
-## Anti-patterns
-
--   Using NotificationBanner for section-specific messages — use Alert instead.
--   Using raw anchor tags inside banner content — use `NotificationBanner.Link`.
--   Placing the banner below page content — it must sit directly below the Navbar.
diff --git a/docs/skills/fds-build/resources/v4/components/pagination.md b/docs/skills/fds-build/resources/v4/components/pagination.md
deleted file mode 100644
index d244b6dbd3..0000000000
--- a/docs/skills/fds-build/resources/v4/components/pagination.md
+++ /dev/null
@@ -1,104 +0,0 @@
-# Pagination
-
-Import: `import { Pagination } from "@lifesg/react-design-system/pagination"`
-
-## When to use
-
-Use below lists or tables when content is split across multiple pages.
-
-## Usage
-
-### Basic pagination (1-based indexing)
-
-```tsx
-import { useState } from "react";
-import { Pagination } from "@lifesg/react-design-system/pagination";
-
-const ResultsList = () => {
-    const totalItems = 243;
-    const pageSize = 10;
-    // activePage is 1-based: page 1 is the first page, not page 0
-    const [activePage, setActivePage] = useState(1);
-
-    return (
-        <>
-            <MyResultsTable
-                items={results.slice(
-                    (activePage - 1) * pageSize,
-                    activePage * pageSize
-                )}
-            />
-            <Pagination
-                totalItems={totalItems}
-                pageSize={pageSize}
-                activePage={activePage}
-                onPageChange={(page) => setActivePage(page)} // page is 1-based
-                showFirstAndLastNav
-            />
-        </>
-    );
-};
-```
-
-### With page size changer
-
-`onPageSizeChange` receives `(page, pageSize)` — reset to page 1 when size changes.
-
-```tsx
-const [activePage, setActivePage] = useState(1);
-const [pageSize, setPageSize] = useState(10);
-
-<Pagination
-    totalItems={500}
-    pageSize={pageSize}
-    activePage={activePage}
-    onPageChange={(page) => setActivePage(page)}
-    onPageSizeChange={(page, size) => {
-        setPageSize(size);
-        setActivePage(page); // component resets to page 1 on size change
-    }}
-    showFirstAndLastNav
-    showPageSizeChanger
-/>;
-```
-
-## Props
-
-| Prop                  | Type                                       | Default        | Description                                                                            |
-| --------------------- | ------------------------------------------ | -------------- | -------------------------------------------------------------------------------------- |
-| `totalItems`          | `number`                                   | —              | Total number of items across all pages — **required**                                  |
-| `activePage`          | `number`                                   | —              | Currently active page (1-based) — **required**                                         |
-| `pageSize`            | `number`                                   | `10`           | Number of items per page                                                               |
-| `pageSizeOptions`     | `PageSizeItemProps<T>[]`                   | `[10, 20, 30]` | Options for the page size changer dropdown                                             |
-| `showFirstAndLastNav` | `boolean`                                  | `false`        | Show buttons to jump to the first and last pages                                       |
-| `showPageSizeChanger` | `boolean`                                  | `false`        | Show a page size changer dropdown (desktop only); selected option overrides `pageSize` |
-| `onPageChange`        | `(page: number) => void`                   | —              | Called when a page is selected                                                         |
-| `onPageSizeChange`    | `(page: number, pageSize: number) => void` | —              | Called when the page size changes                                                      |
-| `id`                  | `string`                                   | —              | Unique identifier                                                                      |
-| `className`           | `string`                                   | —              | Class selector                                                                         |
-| `data-testid`         | `string`                                   | —              | Test identifier                                                                        |
-
-## PageSizeItemProps
-
-| Prop    | Type     | Description                        |
-| ------- | -------- | ---------------------------------- |
-| `value` | `number` | Page size value                    |
-| `label` | `string` | Display label (e.g. `"10 / page"`) |
-
-## Rules
-
--   `activePage` is 1-based — the first page is `1`, not `0`.
--   Always provide `onPageChange` to update `activePage` when the user changes page.
--   Provide `onPageSizeChange` when `showPageSizeChanger` is enabled.
--   Always center-align pagination below the results list.
--   Place pagination below the results — never above.
--   When total pages exceed 7, the component automatically shows an ellipsis — no additional props needed.
--   The page size changer is only visible in the desktop viewport.
--   The selected option in the page size changer takes precedence over `pageSize`.
-
-## Anti-patterns
-
--   Do not use `showFirstAndLastNav` and `showPageSizeChanger` together unless the dataset is large enough to warrant both — avoid cluttering the interface with excessive controls.
--   Do not left- or right-align pagination.
--   Do not place pagination above the results.
--   Do not use `pageSize` and a `pageSizeOptions` selection simultaneously without handling `onPageSizeChange` — the changer selection overrides `pageSize`.
diff --git a/docs/skills/fds-build/resources/v4/components/pill.md b/docs/skills/fds-build/resources/v4/components/pill.md
deleted file mode 100644
index e29eab5f5b..0000000000
--- a/docs/skills/fds-build/resources/v4/components/pill.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# Pill
-
-Import: `import { Pill } from "@lifesg/react-design-system/pill"`
-
-## When to use
-
-Use to communicate a status — application state, approval outcome, or processing stage. For categories, filters, or tagging, use Tag instead.
-
-## Variants
-
-| `type`      | Usage                                                    |
-| ----------- | -------------------------------------------------------- |
-| `"outline"` | Subtle, secondary label — default for most uses          |
-| `"solid"`   | Higher emphasis — use when the status needs to stand out |
-
-| `colorType` | Semantic use                  |
-| ----------- | ----------------------------- |
-| `"green"`   | Success, active, approved     |
-| `"red"`     | Error, rejected, danger       |
-| `"yellow"`  | Warning, pending, in progress |
-| `"blue"`    | Informational                 |
-| `"grey"`    | Neutral, inactive, draft      |
-| `"primary"` | Theme primary color           |
-| `"black"`   | Default, no semantic meaning  |
-
-## Usage
-
-```tsx
-import { Pill } from "@lifesg/react-design-system/pill";
-
-<Pill type="outline" colorType="green">
-    Approved
-</Pill>;
-```
-
-## Props
-
-Inherits all `HTMLDivElement` attributes.
-
-| Prop        | Type                                                                                   | Default   | Description                             |
-| ----------- | -------------------------------------------------------------------------------------- | --------- | --------------------------------------- |
-| `type`      | `"solid"` \| `"outline"`                                                               | —         | Display style — required                |
-| `colorType` | `"black"` \| `"grey"` \| `"green"` \| `"yellow"` \| `"red"` \| `"blue"` \| `"primary"` | `"black"` | Color variant                           |
-| `icon`      | `JSX.Element`                                                                          | —         | Icon displayed to the left of the label |
-| `children`  | `string`                                                                               | —         | Label text                              |
-
-## Rules
-
--   Use color semantically — do not use `"red"` for non-error states.
--   Use `"solid"` sparingly — reserve for statuses that need emphasis.
--   Keep label text to 1–2 words — text does not wrap inside a pill.
--   Pill is a static, non-interactive label — it does not accept `onClick`. Use Tag with `interactive` for clickable labels.
-
-## Anti-patterns
-
--   Using Pill for categories or filters — use Tag instead.
--   Using `"red"` for non-error states.
--   Labels longer than 2–3 words — text overflow is not handled.
diff --git a/docs/skills/fds-build/resources/v4/components/popover.md b/docs/skills/fds-build/resources/v4/components/popover.md
deleted file mode 100644
index 830c57144e..0000000000
--- a/docs/skills/fds-build/resources/v4/components/popover.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Popover
-
-Import: `import { Popover, withPopover } from "@lifesg/react-design-system/popover"`
-
-## When to use
-
-Use to show supplementary information when a user interacts with (clicks or hovers over) an element. On mobile, the popover renders as a bottom modal sheet.
-
-## Variants
-
-Two usage patterns are available:
-
--   **`withPopover` HOC** — wraps an existing element to add popover behaviour.
--   **`Popover` component** — a standalone popover that you control manually.
-
-## Usage
-
-```tsx
-import { withPopover } from "@lifesg/react-design-system/popover";
-import { Button } from "@lifesg/react-design-system/button";
-
-{
-    /* Preferred: HOC wraps an existing element */
-}
-{
-    withPopover(
-        <Button.Default styleType="link">What is this?</Button.Default>,
-        { content: "This field requires your NRIC number.", trigger: "click" }
-    );
-}
-```
-
-## Props
-
-### withPopover
-
-```ts
-withPopover(component: JSX.Element, options: PopoverHOCOptionsProps): JSX.Element
-```
-
-**PopoverHOCOptionsProps**
-
-| Prop          | Type                    | Default   | Description                    |
-| ------------- | ----------------------- | --------- | ------------------------------ |
-| `content`     | `string \| JSX.Element` | —         | Popover content — **required** |
-| `trigger`     | `"click" \| "hover"`    | `"click"` | How the popover is triggered   |
-| `id`          | `string`                | —         | Unique identifier              |
-| `data-testid` | `string`                | —         | Test identifier                |
-
-**PopoverHOCProps (on the wrapped component)**
-
-| Prop               | Type         | Description                       |
-| ------------------ | ------------ | --------------------------------- |
-| `onPopoverAppear`  | `() => void` | Called when the popover appears   |
-| `onPopoverDismiss` | `() => void` | Called when the popover dismisses |
-
-### Popover
-
-| Prop            | Type                    | Default | Description                                                       |
-| --------------- | ----------------------- | ------- | ----------------------------------------------------------------- |
-| `children`      | `string \| JSX.Element` | —       | Popover content — **required**                                    |
-| `visible`       | `boolean`               | `false` | Controls visibility                                               |
-| `onMobileClose` | `() => void`            | —       | Called when the user dismisses the popover (modal form) on mobile |
-| `id`            | `string`                | —       | Unique identifier                                                 |
-| `className`     | `string`                | —       | Class selector                                                    |
-| `data-testid`   | `string`                | —       | Test identifier                                                   |
-
-## Rules
-
--   Use `withPopover` for most cases — it handles trigger logic automatically.
--   Use the `Popover` component directly when you need full manual control over visibility.
--   On mobile viewports the Popover renders as a bottom modal sheet — provide `onMobileClose` to handle dismissal.
diff --git a/docs/skills/fds-build/resources/v4/components/progress-indicator.md b/docs/skills/fds-build/resources/v4/components/progress-indicator.md
deleted file mode 100644
index 810e663bfb..0000000000
--- a/docs/skills/fds-build/resources/v4/components/progress-indicator.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# ProgressIndicator
-
-Import: `import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator"`
-
-## When to use
-
-Use in multi-step forms or wizards to show the user's position within the flow.
-
-## Usage
-
-```tsx
-import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
-
-const steps = [
-    { label: "Personal details" },
-    { label: "Documents" },
-    { label: "Review" },
-];
-
-<ProgressIndicator
-    steps={steps}
-    currentIndex={1}
-    displayExtractor={(step) => step.label}
-/>;
-```
-
-## Props
-
-| Prop               | Type                  | Default | Description                                         |
-| ------------------ | --------------------- | ------- | --------------------------------------------------- |
-| `steps`            | `T[]`                 | —       | Array of step objects — **required**                |
-| `currentIndex`     | `number`              | `0`     | Zero-based index of the current step — **required** |
-| `displayExtractor` | `(item: T) => string` | —       | Derives the display label from each step object     |
-| `id`               | `string`              | —       | Unique identifier                                   |
-| `className`        | `string`              | —       | Class selector                                      |
-| `data-testid`      | `string`              | —       | Test identifier                                     |
-
-## Rules
-
--   `currentIndex` is zero-based — the first step is `0`.
--   Always provide `displayExtractor` when `steps` contains objects — without it, step labels will not render.
--   Update `currentIndex` as the user moves between steps.
--   Do not use `fadeColor` or `fadePosition` — these props are deprecated and have no effect in v3.
-
-## Anti-patterns
-
--   Do not use ProgressIndicator on single-step pages.
--   Do not use it as a general progress bar for loading states — use a loading spinner or skeleton instead.
diff --git a/docs/skills/fds-build/resources/v4/components/radio-button.md b/docs/skills/fds-build/resources/v4/components/radio-button.md
deleted file mode 100644
index 3bf863c5db..0000000000
--- a/docs/skills/fds-build/resources/v4/components/radio-button.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# RadioButton
-
-Import: `import { RadioButton } from "@lifesg/react-design-system/radio-button"`
-
-## When to use
-
--   User must choose exactly one option from a small set (typically 2–5 options).
--   Options are mutually exclusive.
-
-Prefer `Toggle` with `type="radio"` over bare `RadioButton` when building form inputs that need a visible card-style label container.
-
-## Variants
-
-| `displaySize` | When to use                    |
-| ------------- | ------------------------------ |
-| `"default"`   | Standard use                   |
-| `"small"`     | Dense layouts, inline controls |
-
-## Usage
-
-```tsx
-import { RadioButton } from "@lifesg/react-design-system/radio-button";
-
-<div role="radiogroup" aria-labelledby="group-label">
-    <label>
-        <RadioButton
-            name="plan"
-            value="basic"
-            checked={selected === "basic"}
-            onChange={(e) => {}}
-        />
-        Basic
-    </label>
-    <label>
-        <RadioButton
-            name="plan"
-            value="pro"
-            checked={selected === "pro"}
-            onChange={(e) => {}}
-        />
-        Pro
-    </label>
-</div>;
-```
-
-## Props
-
-Inherits all props from `React.InputHTMLAttributes<HTMLInputElement>` (e.g. `name`, `value`, `disabled`, `aria-*`).
-
-| Prop                    | Type                                               | Default     | Description                                                              |
-| ----------------------- | -------------------------------------------------- | ----------- | ------------------------------------------------------------------------ |
-| `displaySize`           | `"default"` \| `"small"`                           | `"default"` | Display size of the component                                            |
-| `checked`               | `boolean`                                          | —           | Controlled checked state                                                 |
-| `disabled`              | `boolean`                                          | —           | Disables the radio button — action is not executable                     |
-| `focusableWhenDisabled` | `boolean`                                          | —           | Keeps component focusable when disabled, preventing all user interaction |
-| `onChange`              | `(e: React.ChangeEvent<HTMLInputElement>) => void` | —           | Called when this radio button becomes selected                           |
-
-## Rules
-
--   Always wrap a group in `role="radiogroup"` with a visible group label (`aria-labelledby`).
--   Always set the same `name` on all buttons in a group for native radio behaviour.
--   Always pair each button with a visible label — wrap in `<label>` or use `aria-label`.
--   Never render a single `RadioButton` in isolation — radio inputs only make sense in groups.
-
-## Anti-patterns
-
--   Do not use `RadioButton` for binary yes/no questions in forms — use `Toggle` with `type="yes"` / `type="no"`.
--   Do not use `RadioButton` when multiple selections are allowed — use `Checkbox` instead.
--   Do not omit the `name` prop — without it, browsers cannot enforce mutual exclusivity natively.
diff --git a/docs/skills/fds-build/resources/v4/components/schedule.md b/docs/skills/fds-build/resources/v4/components/schedule.md
deleted file mode 100644
index 54b98f0b2f..0000000000
--- a/docs/skills/fds-build/resources/v4/components/schedule.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Schedule
-
-Import: `import { Schedule } from "@lifesg/react-design-system/schedule"`
-
-## Sub-components
-
--   `ScheduleEntityProps` — a service/resource row with its time slots
--   `ScheduleSlotProps` — a single bookable timeslot cell
--   `SchedulePopoverProps` — popover config for a slot
-
-## Props
-
-| Prop                    | Type                                                     | Default         | Description                                                                                |
-| ----------------------- | -------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------ |
-| `date` \*               | `string`                                                 | —               | Current displayed date (`YYYY-MM-DD`)                                                      |
-| `serviceData` \*        | `ScheduleEntityProps[]`                                  | —               | Data for each service row and its time slots                                               |
-| `onPreviousDayClick` \* | `(currentDate: string) => void`                          | —               | Called when the left arrow on the date navigator is clicked                                |
-| `onNextDayClick` \*     | `(currentDate: string) => void`                          | —               | Called when the right arrow on the date navigator is clicked                               |
-| `id`                    | `string`                                                 | —               | The identifier of the component                                                            |
-| `className`             | `string`                                                 | —               | The class selector of the component                                                        |
-| `data-testid`           | `string`                                                 | —               | The test identifier of the component                                                       |
-| `view`                  | `"day" \| "week"`                                        | `"day"`         | The view mode for the schedule component                                                   |
-| `emptyContentMessage`   | `string`                                                 | —               | Message shown when `serviceData` has no rows                                               |
-| `loading`               | `boolean`                                                | `false`         | Shows a loading animation when true                                                        |
-| `minTime`               | `string`                                                 | `"00:00"`       | Start time of the schedule (`HH:mm`)                                                       |
-| `maxTime`               | `string`                                                 | `"23:59"`       | End time of the schedule (`HH:mm`)                                                         |
-| `initialScrollTime`     | `string`                                                 | —               | Initial scroll position time (`HH:mm`); defaults to `minTime`                              |
-| `minDate`               | `string`                                                 | —               | Minimum navigable date (`YYYY-MM-DD`, inclusive)                                           |
-| `maxDate`               | `string`                                                 | —               | Maximum navigable date (`YYYY-MM-DD`, inclusive)                                           |
-| `blockedMessage`        | `string`                                                 | `"Unavailable"` | Custom text for blocked slots; truncated with ellipsis if slot is too narrow               |
-| `onCalendarDateSelect`  | `(currentDate: string) => void`                          | —               | Called when a date is picked from the dropdown calendar                                    |
-| `onTodayClick`          | `() => void`                                             | —               | Called when the Today button is clicked                                                    |
-| `onSlotClick`           | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | —               | Called when a timeslot cell is clicked                                                     |
-| `onClickHiddenSlots`    | `(hiddenServices: string[]) => void`                     | —               | Called in week view when the hidden-slots button is clicked; provides hidden service names |
-
-`*` = required
-
-## ScheduleEntityProps
-
-| Prop       | Type                  | Description                          |
-| ---------- | --------------------- | ------------------------------------ |
-| `name` \*  | `string`              | The name of the service or resource  |
-| `slots` \* | `ScheduleSlotProps[]` | Array of time slots for this service |
-| `id`       | `string`              | Identifier for the service entity    |
-
-## ScheduleSlotProps
-
-| Prop            | Type                                                     | Description                                                 |
-| --------------- | -------------------------------------------------------- | ----------------------------------------------------------- |
-| `startTime` \*  | `string`                                                 | Start time (`HH:mm`)                                        |
-| `endTime` \*    | `string`                                                 | End time (`HH:mm`)                                          |
-| `status` \*     | `"booked" \| "available" \| "blocked" \| "pending"`      | Determines slot visual style                                |
-| `date` \*       | `string`                                                 | Date for this timeslot (`YYYY-MM-DD`)                       |
-| `id`            | `string`                                                 | Identifier; passed to `onClick` and `onSlotClick` callbacks |
-| `capacity`      | `number`                                                 | Maximum capacity for this timeslot                          |
-| `booked`        | `number`                                                 | Number of current bookings                                  |
-| `customPopover` | `SchedulePopoverProps`                                   | Popover config for the slot                                 |
-| `onClick`       | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | Per-slot click callback                                     |
-
-## SchedulePopoverProps
-
-| Prop         | Type                                               | Default | Description                                        |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------- |
-| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover              |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered in the popover                    |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Hover delay in milliseconds (`hover` trigger only) |
-| `offset`     | `number`                                           | —       | Offset in px applied to the popover                |
-
-## Rules
-
--   `date`, `serviceData`, `onPreviousDayClick`, and `onNextDayClick` are mandatory.
--   Avoid combining a per-slot `onClick` with `customPopover` using `trigger: "click"` on the same slot — they conflict.
diff --git a/docs/skills/fds-build/resources/v4/components/sidenav.md b/docs/skills/fds-build/resources/v4/components/sidenav.md
deleted file mode 100644
index e0027e0821..0000000000
--- a/docs/skills/fds-build/resources/v4/components/sidenav.md
+++ /dev/null
@@ -1,190 +0,0 @@
-# Sidenav
-
-Import: `import { Sidenav } from "@lifesg/react-design-system/sidenav"`
-
-## When to use
-
-Use for section-level navigation in admin dashboards or portals. The Sidenav sits fixed to the left and fills the full viewport height below the Navbar, which is always present at the top.
-
-Do not use for:
-
--   Consumer-facing pages (use Navbar nav items or LocalNav instead)
--   Simple single-section apps
-
-## Sub-components
-
-```
-Sidenav                          ← fixed sidebar container
-├── Sidenav.Group                ← logical section (optional separator)
-│   ├── Sidenav.Item             ← top-level nav link (no children)
-│   ├── Sidenav.DrawerItem       ← expandable item with sub-links
-│   │   ├── Sidenav.DrawerSubitem
-│   │   └── Sidenav.DrawerSubitem
-│   └── Sidenav.Item
-└── Sidenav.Group
-    └── Sidenav.Item
-```
-
-`Sidenav.Group` is the only valid direct child of `Sidenav`. Use `Sidenav.Item` for leaf links, `Sidenav.DrawerItem` when a nav entry has sub-items. `Sidenav.DrawerSubitem` can only nest inside `Sidenav.DrawerItem`.
-
-## Variants
-
-| Depth    | Components used                              |
-| -------- | -------------------------------------------- |
-| 1 level  | `Sidenav` → `Sidenav.Group` → `Sidenav.Item` |
-| 2 levels | + `Sidenav.DrawerItem`                       |
-| 3 levels | + `Sidenav.DrawerSubitem`                    |
-
-## Usage
-
-### 2-group, 3-item nav with full nesting
-
-```tsx
-import { CalendarIcon } from "@lifesg/react-icons/calendar";
-import { DocIcon } from "@lifesg/react-icons/doc";
-import { Square2x2Icon } from "@lifesg/react-icons/square-2x2";
-import { useState } from "react";
-import { Sidenav } from "@lifesg/react-design-system/sidenav";
-
-const AdminSidenav = () => {
-    const [selectedId, setSelectedId] = useState("dashboard");
-
-    return (
-        <Sidenav>
-            {/* Group 1 — top-level items with no sub-items: onClick fires */}
-            <Sidenav.Group separator>
-                <Sidenav.Item
-                    id="dashboard"
-                    title="Dashboard"
-                    icon={<Square2x2Icon />}
-                    selected={selectedId === "dashboard"}
-                    onClick={(id) => setSelectedId(id)}
-                />
-            </Sidenav.Group>
-
-            {/* Group 2 — Reports has sub-items so onClick is omitted;
-                clicking it opens the drawer instead */}
-            <Sidenav.Group>
-                <Sidenav.Item
-                    id="reports"
-                    title="Reports"
-                    icon={<DocIcon />}
-                    selected={
-                        selectedId === "monthly-reports" ||
-                        selectedId === "annual-reports"
-                    }
-                >
-                    {/* DrawerItem with no children: onClick fires */}
-                    <Sidenav.DrawerItem
-                        id="monthly-reports"
-                        title="Monthly reports"
-                        onClick={(id) => setSelectedId(id)}
-                    />
-                    {/* DrawerItem with children: onClick is omitted */}
-                    <Sidenav.DrawerItem
-                        id="annual-reports"
-                        title="Annual reports"
-                        selected={selectedId === "annual-reports"}
-                    >
-                        <Sidenav.DrawerSubitem
-                            id="annual-summary"
-                            title="Summary"
-                            onClick={(id) => setSelectedId(id)}
-                        />
-                        <Sidenav.DrawerSubitem
-                            id="annual-detail"
-                            title="Detailed breakdown"
-                            onClick={(id) => setSelectedId(id)}
-                        />
-                    </Sidenav.DrawerItem>
-                </Sidenav.Item>
-                <Sidenav.Item
-                    id="bookings"
-                    title="Bookings"
-                    icon={<CalendarIcon />}
-                    selected={selectedId === "bookings"}
-                    onClick={(id) => setSelectedId(id)}
-                />
-            </Sidenav.Group>
-        </Sidenav>
-    );
-};
-```
-
-Key wiring notes:
-
--   `onClick` on `Sidenav.Item` is only attached when the item has **no** `children` — if children are present, clicking opens the drawer instead and `onClick` is ignored.
--   The same rule applies to `Sidenav.DrawerItem`: omit `onClick` when it wraps `DrawerSubitem` children.
--   Track `selectedId` in parent state; pass `selected={selectedId === id}` down to whichever level is active.
--   `separator` on `Sidenav.Group` draws a dividing line below that group.
-
-## Props
-
-### Sidenav
-
-| Prop          | Type              | Default     | Description                                         |
-| ------------- | ----------------- | ----------- | --------------------------------------------------- |
-| `children`    | `React.ReactNode` | —           | One or more `Sidenav.Group` elements — **required** |
-| `fixed`       | `boolean`         | `true`      | Fix the sidenav to the left of the viewport         |
-| `aria-label`  | `string`          | `"Sidebar"` | Accessible label for the sidenav                    |
-| `id`          | `string`          | —           | Unique identifier                                   |
-| `className`   | `string`          | —           | Class selector                                      |
-| `data-testid` | `string`          | —           | Test identifier                                     |
-
-### Sidenav.Group
-
-| Prop          | Type              | Default | Description                                        |
-| ------------- | ----------------- | ------- | -------------------------------------------------- |
-| `children`    | `React.ReactNode` | —       | One or more `Sidenav.Item` elements — **required** |
-| `separator`   | `boolean`         | —       | Show a bottom divider below the group              |
-| `aria-label`  | `string`          | —       | Accessible label describing the category of items  |
-| `id`          | `string`          | —       | Unique identifier                                  |
-| `className`   | `string`          | —       | Class selector                                     |
-| `data-testid` | `string`          | —       | Test identifier                                    |
-
-### Sidenav.Item
-
-| Prop          | Type                   | Default | Description                                                  |
-| ------------- | ---------------------- | ------- | ------------------------------------------------------------ |
-| `title`       | `string`               | —       | Display label — **required**                                 |
-| `icon`        | `React.ReactNode`      | —       | Icon displayed above the label — **required**                |
-| `children`    | `React.ReactNode`      | —       | One or more `Sidenav.DrawerItem` elements                    |
-| `selected`    | `boolean`              | —       | Mark this item as the active selection                       |
-| `onClick`     | `(id: string) => void` | —       | Called when clicked; only fires if the item has no sub-items |
-| `id`          | `string`               | —       | Unique identifier                                            |
-| `className`   | `string`               | —       | Class selector                                               |
-| `data-testid` | `string`               | —       | Test identifier                                              |
-
-### Sidenav.DrawerItem
-
-| Prop          | Type                   | Default | Description                                                  |
-| ------------- | ---------------------- | ------- | ------------------------------------------------------------ |
-| `title`       | `string`               | —       | Display label — **required**                                 |
-| `children`    | `React.ReactNode`      | —       | One or more `Sidenav.DrawerSubitem` elements                 |
-| `onClick`     | `(id: string) => void` | —       | Called when clicked; only fires if the item has no sub-items |
-| `id`          | `string`               | —       | Unique identifier                                            |
-| `className`   | `string`               | —       | Class selector                                               |
-| `data-testid` | `string`               | —       | Test identifier                                              |
-
-### Sidenav.DrawerSubitem
-
-| Prop          | Type                   | Default | Description                  |
-| ------------- | ---------------------- | ------- | ---------------------------- |
-| `title`       | `string`               | —       | Display label — **required** |
-| `onClick`     | `(id: string) => void` | —       | Called when item is clicked  |
-| `id`          | `string`               | —       | Unique identifier            |
-| `className`   | `string`               | —       | Class selector               |
-| `data-testid` | `string`               | —       | Test identifier              |
-
-## Rules
-
--   Always provide `icon` on `Sidenav.Item` — it is required for the collapsed state.
--   Maximum depth is 3 levels: `Item` → `DrawerItem` → `DrawerSubitem`.
--   Use `Sidenav.Group` with `separator` to visually separate unrelated sections.
--   `onClick` on `Sidenav.Item` and `Sidenav.DrawerItem` only fires when the item has no children — do not attach click handlers to items that have sub-items.
-
-## Anti-patterns
-
--   Do not omit `icon` on `Sidenav.Item` — the component is designed around icon + label.
--   Do not nest deeper than 3 levels.
--   Do not use `Sidenav` on consumer-facing pages — it is suited to admin portals.
diff --git a/docs/skills/fds-build/resources/v4/components/singpass-button.md b/docs/skills/fds-build/resources/v4/components/singpass-button.md
deleted file mode 100644
index cbe26bc11d..0000000000
--- a/docs/skills/fds-build/resources/v4/components/singpass-button.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# SingpassButton
-
-Import: `import { SingpassButton } from "@lifesg/react-design-system/singpass-button"`
-
-## Props
-
-Inherits all props from `HTMLButtonElement`.
-
-| Prop        | Type                             | Default          | Description                |
-| ----------- | -------------------------------- | ---------------- | -------------------------- |
-| `styleType` | `"red-filled" \| "white-filled"` | `"white-filled"` | Visual style of the button |
-
-## Rules
-
--   Do not custom style — Singpass branding guidelines require using the component as-is.
diff --git a/docs/skills/fds-build/resources/v4/components/smart-app-banner.md b/docs/skills/fds-build/resources/v4/components/smart-app-banner.md
deleted file mode 100644
index ad4ca844d0..0000000000
--- a/docs/skills/fds-build/resources/v4/components/smart-app-banner.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# SmartAppBanner
-
-Import: `import { SmartAppBanner } from "@lifesg/react-design-system/smart-app-banner"`
-
-## Props
-
-| Prop           | Type                         | Default              | Description                                                                     |
-| -------------- | ---------------------------- | -------------------- | ------------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                    | Whether the SmartAppBanner is displayed                                         |
-| `href` \*      | `string`                     | —                    | Destination URL when the banner is clicked                                      |
-| `content` \*   | `SmartAppBannerContentProps` | —                    | Content of the banner                                                           |
-| `onDismiss` \* | `() => void`                 | —                    | Called when the banner is dismissed                                             |
-| `offset`       | `number`                     | `0`                  | Sets the `top` value in px                                                      |
-| `icon`         | `string`                     | Life SG app icon URL | URL for the app icon                                                            |
-| `animated`     | `boolean`                    | `false`              | Adds a slide-down animation on appearance                                       |
-| `ref`          | `React.Ref<HTMLDivElement>`  | —                    | Ref for the banner element                                                      |
-| `onClick`      | `() => void`                 | —                    | Additional behaviour on press (non-dismiss area); default opens link in new tab |
-
-`*` = required
-
-## SmartAppBannerContentProps
-
-| Prop                 | Type     | Default | Description                                                                    |
-| -------------------- | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*           | `string` | —       | Display title                                                                  |
-| `buttonLabel` \*     | `string` | —       | Button text                                                                    |
-| `buttonAriaLabel` \* | `string` | —       | Aria label for the button                                                      |
-| `numberOfStars` \*   | `number` | —       | Stars to display; decimals accepted; `NaN` or negative hides the stars display |
-| `message`            | `string` | —       | Description below the title                                                    |
diff --git a/docs/skills/fds-build/resources/v4/components/tab.md b/docs/skills/fds-build/resources/v4/components/tab.md
deleted file mode 100644
index 83f0a08b7d..0000000000
--- a/docs/skills/fds-build/resources/v4/components/tab.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# Tab
-
-Import: `import { Tab } from "@lifesg/react-design-system/tab"`
-
-## When to use
-
-Use to switch between related views within the same context — not for navigating between pages.
-
-## Sub-components
-
-```
-Tab                          ← tab strip container, manages active state
-├── Tab.Item                 ← individual tab (title + panel content)
-├── Tab.Item
-└── Tab.Item
-```
-
-All direct children of `Tab` must be `Tab.Item`. `Tab.Item` renders both the tab label and its associated panel content.
-
-## Variants
-
-| Mode                         | When to use                                |
-| ---------------------------- | ------------------------------------------ |
-| Uncontrolled (default)       | Tab manages its own active state           |
-| Controlled (`currentActive`) | Parent needs to control which tab is shown |
-
-## Props
-
-### Tab
-
-| Prop                     | Type                                     | Default | Description                                                   |
-| ------------------------ | ---------------------------------------- | ------- | ------------------------------------------------------------- |
-| `children`               | `JSX.Element \| JSX.Element[]`           | —       | `Tab.Item` elements — **required**                            |
-| `initialActive`          | `number`                                 | `0`     | Index of the initially active tab (uncontrolled)              |
-| `currentActive`          | `number`                                 | —       | Controlled active tab index; disables internal state when set |
-| `onTabClick`             | `(title: string, index: number) => void` | —       | Called when a tab selector is clicked                         |
-| `fullWidthIndicatorLine` | `boolean`                                | —       | Extend the bottom border to the full container width          |
-| `fadeColor`              | `string[] \| FadeColorSet`               | —       | Scroll fade color on mobile; set to match page background     |
-| `headingLevel`           | `number`                                 | `2`     | Heading level for tab labels                                  |
-| `id`                     | `string`                                 | —       | Unique identifier                                             |
-| `className`              | `string`                                 | —       | Class selector                                                |
-| `data-testid`            | `string`                                 | —       | Test identifier                                               |
-
-### Tab.Item
-
-| Prop          | Type                           | Default | Description                                  |
-| ------------- | ------------------------------ | ------- | -------------------------------------------- |
-| `title`       | `string`                       | —       | Tab selector label — **required**            |
-| `children`    | `JSX.Element \| JSX.Element[]` | —       | Tab panel content — **required**             |
-| `titleAddon`  | `TitleAddonProps`              | —       | Custom addon displayed next to the tab label |
-| `width`       | `string`                       | —       | Custom width of the tab selector             |
-| `id`          | `string`                       | —       | Unique identifier                            |
-| `className`   | `string`                       | —       | Class selector                               |
-| `data-testid` | `string`                       | —       | Test identifier                              |
-
-### TitleAddonProps
-
-| Prop       | Type                | Default   | Description                                 |
-| ---------- | ------------------- | --------- | ------------------------------------------- |
-| `content`  | `JSX.Element`       | —         | The addon element (e.g. a `Badge`)          |
-| `position` | `"left" \| "right"` | `"right"` | Position of the addon relative to the label |
-
-### FadeColorSet
-
-| Prop    | Type       | Description                 |
-| ------- | ---------- | --------------------------- |
-| `left`  | `string[]` | Color(s) for the left fade  |
-| `right` | `string[]` | Color(s) for the right fade |
-
-## Rules
-
--   When `currentActive` is set, the component is in controlled mode — you must update it via `onTabClick`.
--   Tab order is determined by the order of `Tab.Item` children.
--   Keep tab labels short — labels truncate beyond 20 characters on tablet and mobile.
--   Use controlled mode (`currentActive` + `onTabClick`) only when the parent needs to sync tab state with external logic (e.g. URL params, deep links).
--   Use `titleAddon` with a `Badge` to show counts or status indicators on tab labels.
--   Set `headingLevel` to match the component's position in the page heading hierarchy.
--   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
-
-## Anti-patterns
-
--   Do not use tabs for page-level navigation — use Navbar or LocalNav instead.
--   Do not use more than 5–6 tabs — consider a different navigation pattern for many sections.
--   Do not use long labels — they truncate on mobile and tablet.
--   Do not set `currentActive` without also providing `onTabClick` — the tab state will be stuck.
diff --git a/docs/skills/fds-build/resources/v4/components/tag.md b/docs/skills/fds-build/resources/v4/components/tag.md
deleted file mode 100644
index d7446e6e14..0000000000
--- a/docs/skills/fds-build/resources/v4/components/tag.md
+++ /dev/null
@@ -1,71 +0,0 @@
-# Tag
-
-Import: `import { Tag } from "@lifesg/react-design-system/tag"`
-
-## When to use
-
-Use to label categories, apply filters, or tag items. Can be static or interactive — set `interactive` to render as a button for toggleable filters or selectable categories. For status labels, use Pill instead.
-
-## Variants
-
-| `type`      | Usage                                                 |
-| ----------- | ----------------------------------------------------- |
-| `"outline"` | Subtle, secondary label — default for most uses       |
-| `"solid"`   | Higher emphasis — use when the tag needs to stand out |
-
-| `colorType` | Semantic use                  |
-| ----------- | ----------------------------- |
-| `"green"`   | Success, active, approved     |
-| `"red"`     | Error, rejected, danger       |
-| `"yellow"`  | Warning, pending, in progress |
-| `"blue"`    | Informational                 |
-| `"grey"`    | Neutral, inactive, draft      |
-| `"primary"` | Theme primary color           |
-| `"black"`   | Default, no semantic meaning  |
-
-## Usage
-
-```tsx
-import { Tag } from "@lifesg/react-design-system/tag";
-
-{
-    /* Static category tag */
-}
-<Tag type="outline" colorType="blue">
-    Health
-</Tag>;
-
-{
-    /* Interactive filter tag */
-}
-<Tag type="solid" colorType="primary" interactive onClick={() => {}}>
-    Finance
-</Tag>;
-```
-
-## Props
-
-Inherits all `HTMLElement` attributes.
-
-| Prop           | Type                                                                                   | Default   | Description                                  |
-| -------------- | -------------------------------------------------------------------------------------- | --------- | -------------------------------------------- |
-| `type`         | `"solid"` \| `"outline"`                                                               | —         | Display style — required                     |
-| `colorType`    | `"black"` \| `"grey"` \| `"green"` \| `"yellow"` \| `"red"` \| `"blue"` \| `"primary"` | `"black"` | Color variant                                |
-| `icon`         | `JSX.Element`                                                                          | —         | Icon displayed alongside the label           |
-| `iconPosition` | `"left"` \| `"right"`                                                                  | `"left"`  | Position of the icon relative to the label   |
-| `interactive`  | `boolean`                                                                              | `false`   | Renders as a `<button>` — use with `onClick` |
-| `children`     | `string`                                                                               | —         | Label text                                   |
-
-## Rules
-
--   When `interactive` is `true`, the component renders as a `<button>` with an extended touch target on mobile.
--   Always pair `interactive` with `onClick` — interactive tags are larger on mobile to extend the touch target.
--   Use color semantically — do not use `"red"` for non-error states.
--   Keep label text short — text does not wrap inside a tag.
--   Use Tag for categories, filters, and tagging — use Pill for statuses.
-
-## Anti-patterns
-
--   Using Tag for status labels — use Pill instead.
--   Setting `interactive` without providing an `onClick` handler.
--   Using `"red"` for non-error states.
diff --git a/docs/skills/fds-build/resources/v4/components/text-list.md b/docs/skills/fds-build/resources/v4/components/text-list.md
deleted file mode 100644
index e027238d46..0000000000
--- a/docs/skills/fds-build/resources/v4/components/text-list.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# TextList
-
-Import: `import { TextList } from "@lifesg/react-design-system/text-list"`
-
-## When to use
-
-Use for semantic list content. For navigation links, use `LinkList` instead.
-
-## Sub-components
-
-| Sub-component | Renders | When to use                                  |
-| ------------- | ------- | -------------------------------------------- |
-| `TextList.Ul` | `<ul>`  | Unordered list — items without a sequence    |
-| `TextList.Ol` | `<ol>`  | Ordered list — numbered or lettered sequence |
-
-## Props
-
-### TextList.Ul
-
-| Prop           | Type                                                    | Default  | Description                                                        |
-| -------------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------------ |
-| `children`     | `JSX.Element \| JSX.Element[]`                          | —        | `<li>` elements                                                    |
-| `bulletType`   | `"disc" \| "circle" \| "square" \| "none" \| ReactNode` | `"disc"` | Bullet style — pass a ReactNode (e.g. an icon) for a custom bullet |
-| `size`         | `TypographySizeType`                                    | —        | Typography size scale                                              |
-| `bottomMargin` | `number`                                                | —        | Bottom margin in px                                                |
-| `data-testid`  | `string`                                                | —        | Test identifier                                                    |
-
-### TextList.Ol
-
-| Prop               | Type                                          | Default     | Description                                       |
-| ------------------ | --------------------------------------------- | ----------- | ------------------------------------------------- |
-| `children`         | `JSX.Element \| JSX.Element[]`                | —           | `<li>` elements                                   |
-| `counterType`      | `"decimal" \| "lower-alpha" \| "lower-roman"` | `"decimal"` | Counter style                                     |
-| `counterSeparator` | `string`                                      | —           | Character after the counter (e.g. `"."` or `")"`) |
-| `reversed`         | `boolean`                                     | `false`     | Count downward                                    |
-| `start`            | `number`                                      | `1`         | Starting counter value                            |
-| `size`             | `TypographySizeType`                          | —           | Typography size scale                             |
-| `bottomMargin`     | `number`                                      | —           | Bottom margin in px                               |
-| `data-testid`      | `string`                                      | —           | Test identifier                                   |
-
-## Rules
-
--   Children must be `<li>` elements.
--   Use `bulletType` as a `ReactNode` to render a custom icon bullet — the icon is automatically marked `aria-hidden`.
diff --git a/docs/skills/fds-build/resources/v4/components/time-slot-bar-week.md b/docs/skills/fds-build/resources/v4/components/time-slot-bar-week.md
deleted file mode 100644
index 868a56a006..0000000000
--- a/docs/skills/fds-build/resources/v4/components/time-slot-bar-week.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# TimeSlotBarWeek
-
-Import: `import { TimeSlotBarWeek } from "@lifesg/react-design-system/time-slot-bar-week"`
-
-## Sub-components
-
--   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
--   `TimeSlot` — shape of each slot in the `slots` map
--   `TimeSlotBarStyleAttributes` — visual styling for a slot
-
-## Props
-
-| Prop                   | Type                                         | Default      | Description                                                                                        |
-| ---------------------- | -------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------- |
-| `slots` \*             | `{ [date: string]: TimeSlot[] }`             | —            | Time slots keyed by date (`YYYY-MM-DD`); falls back to disabled pattern if not provided for a date |
-| `className`            | `string`                                     | —            | Class selector for the component                                                                   |
-| `data-testid`          | `string`                                     | —            | The test identifier for the component                                                              |
-| `id`                   | `string`                                     | —            | The unique identifier for the component                                                            |
-| `variant`              | `"flexible" \| "fixed"`                      | `"flexible"` | The variant of the rendered timeslot bars                                                          |
-| `interval`             | `number`                                     | `30`         | Duration each cell represents in minutes                                                           |
-| `startTime`            | `string`                                     | —            | Minimum time displayed (`HH:mm`; full hours only, e.g. `"08:00"`)                                  |
-| `endTime`              | `string`                                     | —            | Maximum time displayed (`HH:mm`; full hours only)                                                  |
-| `minDate`              | `string`                                     | —            | Minimum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
-| `maxDate`              | `string`                                     | —            | Maximum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
-| `disabledDates`        | `string[]`                                   | —            | Dates to disable (`YYYY-MM-DD`)                                                                    |
-| `value`                | `string`                                     | —            | Currently selected date (`YYYY-MM-DD`)                                                             |
-| `currentCalendarDate`  | `string`                                     | —            | Initial date visible in the week view (`YYYY-MM-DD`)                                               |
-| `maxVisibleCellHeight` | `number`                                     | —            | Maximum combined cell height before truncation                                                     |
-| `showNavigationHeader` | `boolean`                                    | `true`       | Shows month/year dropdown and navigation arrows                                                    |
-| `enableSelection`      | `boolean`                                    | `true`       | Specifies if a date can be selected                                                                |
-| `onChange`             | `(value: string) => void`                    | —            | Called when the user selects a day; returns `YYYY-MM-DD`                                           |
-| `onWeekDisplayChange`  | `(value: YearMonthWeekDisplay) => void`      | —            | Called when the visible week changes                                                               |
-| `onSlotClick`          | `(date: string, timeSlot: TimeSlot) => void` | —            | Called when a timeslot is clicked                                                                  |
-
-`*` = required
-
-## YearMonthWeekDisplay
-
-| Prop    | Type                                                | Description                                            |
-| ------- | --------------------------------------------------- | ------------------------------------------------------ |
-| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
-| `year`  | `number`                                            | Visible year                                           |
-| `month` | `number`                                            | Visible month (1–12)                                   |
-
-## TimeSlot
-
-| Prop              | Type                         | Description                        |
-| ----------------- | ---------------------------- | ---------------------------------- |
-| `id` \*           | `string`                     | Unique identifier of the slot      |
-| `startTime` \*    | `string`                     | Start time (`HH:mm`)               |
-| `endTime` \*      | `string`                     | End time (`HH:mm`)                 |
-| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                     |
-| `label`           | `string`                     | Text content within the slot cell  |
-| `clickable`       | `boolean`                    | Whether the slot cell is clickable |
-
-## TimeSlotBarStyleAttributes
-
-| Prop                 | Type                     | Default     | Description                                       |
-| -------------------- | ------------------------ | ----------- | ------------------------------------------------- |
-| `backgroundColor` \* | `string`                 | —           | The color of the slot                             |
-| `styleType`          | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
-| `backgroundColor2`   | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
-
-## Rules
-
--   `slots` is mandatory.
--   `startTime`/`endTime` on the component must be full hours (e.g. `"08:00"`, `"13:00"`).
diff --git a/docs/skills/fds-build/resources/v4/components/time-slot-bar.md b/docs/skills/fds-build/resources/v4/components/time-slot-bar.md
deleted file mode 100644
index 0474d1f581..0000000000
--- a/docs/skills/fds-build/resources/v4/components/time-slot-bar.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# TimeSlotBar
-
-Import: `import { TimeSlotBar } from "@lifesg/react-design-system/time-slot-bar"`
-
-## Props
-
-| Prop                     | Type                           | Default     | Description                                                                 |
-| ------------------------ | ------------------------------ | ----------- | --------------------------------------------------------------------------- |
-| `slots` \*               | `TimeSlot[]`                   | —           | Time slots for the bar                                                      |
-| `startTime` \*           | `string`                       | —           | Start time of the bar in `HH:mm` (minutes in 15-min blocks: 00, 15, 30, 45) |
-| `endTime` \*             | `string`                       | —           | End time of the bar in `HH:mm` (minutes in 15-min blocks)                   |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —           | Called when a time slot is selected                                         |
-| `variant`                | `"default" \| "minified"`      | `"default"` | Display variant                                                             |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —           | Default style when no slot is specified for a time period                   |
-| `initialScrollTime`      | `string`                       | —           | Initial scroll offset time in `HH:mm`                                       |
-| `roundInitialScrollTime` | `boolean`                      | `true`      | Rounds `initialScrollTime` to the nearest 30-min interval                   |
-| `onClick`                | `() => void`                   | —           | Called when the bar is selected (useful when no slots specified)            |
-| `className`              | `string`                       | —           | Class selector of the component                                             |
-| `data-testid`            | `string`                       | —           | Test identifier of the component                                            |
-
-`*` = required
-
-## TimeSlot
-
-| Prop              | Type                         | Default | Description                                |
-| ----------------- | ---------------------------- | ------- | ------------------------------------------ |
-| `id` \*           | `string`                     | —       | Unique identifier of the slot              |
-| `startTime` \*    | `string`                     | —       | Slot start time in `HH:mm` (15-min blocks) |
-| `endTime` \*      | `string`                     | —       | Slot end time in `HH:mm` (15-min blocks)   |
-| `styleAttributes` | `TimeSlotBarStyleAttributes` | —       | Styling for this slot                      |
-| `label`           | `string`                     | —       | Text content within the slot cell          |
-| `clickable`       | `boolean`                    | —       | Whether the slot cell is clickable         |
-
-## TimeSlotBarStyleAttributes
-
-| Prop                    | Type                     | Default     | Description                                                            |
-| ----------------------- | ------------------------ | ----------- | ---------------------------------------------------------------------- |
-| `backgroundColor` \*    | `string`                 | —           | Slot color                                                             |
-| `styleType`             | `"default" \| "stripes"` | `"default"` | Style type of the slot                                                 |
-| `backgroundColor2`      | `string`                 | —           | Secondary color; used with `styleType="stripes"`                       |
-| `hoverBackgroundColor`  | `string`                 | —           | Background on hover; only when `clickable`                             |
-| `hoverBackgroundColor2` | `string`                 | —           | Secondary hover color for `styleType="stripes"`; only when `clickable` |
diff --git a/docs/skills/fds-build/resources/v4/components/time-slot-week-view.md b/docs/skills/fds-build/resources/v4/components/time-slot-week-view.md
deleted file mode 100644
index 3bd1c452c0..0000000000
--- a/docs/skills/fds-build/resources/v4/components/time-slot-week-view.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# TimeSlotWeekView
-
-Import: `import { TimeSlotWeekView } from "@lifesg/react-design-system/time-slot-week-view"`
-
-## Sub-components
-
--   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
--   `TimeSlot` — shape of each slot in the `slots` map
--   `TimeSlotBarStyleAttributes` — visual styling for a slot
-
-## Props
-
-| Prop                   | Type                                         | Default | Description                                                                                        |
-| ---------------------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------- |
-| `slots` \*             | `{ [date: string]: TimeSlot[] }`             | —       | Time slots keyed by date (`YYYY-MM-DD`); falls back to disabled pattern if not provided for a date |
-| `className`            | `string`                                     | —       | Class selector for the component                                                                   |
-| `data-testid`          | `string`                                     | —       | The test identifier for the component                                                              |
-| `id`                   | `string`                                     | —       | The unique identifier for the component                                                            |
-| `minDate`              | `string`                                     | —       | Minimum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
-| `maxDate`              | `string`                                     | —       | Maximum selectable date (`YYYY-MM-DD`, inclusive)                                                  |
-| `disabledDates`        | `string[]`                                   | —       | Dates to disable (`YYYY-MM-DD`)                                                                    |
-| `value`                | `string`                                     | —       | Currently selected date (`YYYY-MM-DD`)                                                             |
-| `currentCalendarDate`  | `string`                                     | —       | Initial date visible in the week view (`YYYY-MM-DD`)                                               |
-| `showNavigationHeader` | `boolean`                                    | `true`  | Shows month/year dropdown and navigation arrows                                                    |
-| `enableSelection`      | `boolean`                                    | `true`  | Specifies if a date can be selected                                                                |
-| `onChange`             | `(value: string) => void`                    | —       | Called when the user selects a day; returns `YYYY-MM-DD`                                           |
-| `onWeekDisplayChange`  | `(value: YearMonthWeekDisplay) => void`      | —       | Called when the visible week changes                                                               |
-| `onSlotClick`          | `(date: string, timeSlot: TimeSlot) => void` | —       | Called when a timeslot is clicked                                                                  |
-
-`*` = required
-
-## YearMonthWeekDisplay
-
-| Prop    | Type                                                | Description                                            |
-| ------- | --------------------------------------------------- | ------------------------------------------------------ |
-| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
-| `year`  | `number`                                            | Visible year                                           |
-| `month` | `number`                                            | Visible month (1–12)                                   |
-
-## TimeSlot
-
-| Prop              | Type                         | Description                                                       |
-| ----------------- | ---------------------------- | ----------------------------------------------------------------- |
-| `id` \*           | `string`                     | Unique identifier of the slot                                     |
-| `startTime` \*    | `string`                     | Start time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45) |
-| `endTime` \*      | `string`                     | End time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45)   |
-| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                                                    |
-| `label`           | `string`                     | Text content within the slot cell                                 |
-| `clickable`       | `boolean`                    | Whether the slot cell is clickable                                |
-
-## TimeSlotBarStyleAttributes
-
-| Prop             | Type                     | Default     | Description                                       |
-| ---------------- | ------------------------ | ----------- | ------------------------------------------------- |
-| `color` \*       | `string`                 | —           | The color of the slot                             |
-| `styleType`      | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
-| `secondaryColor` | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
-
-## Rules
-
--   `slots` is mandatory.
--   `TimeSlot` minutes must be in 15-minute blocks (00, 15, 30, 45).
--   `TimeSlotBarStyleAttributes` uses `color`/`secondaryColor` — not `backgroundColor`/`backgroundColor2` as in `TimeSlotBarWeek`.
diff --git a/docs/skills/fds-build/resources/v4/components/timeline.md b/docs/skills/fds-build/resources/v4/components/timeline.md
deleted file mode 100644
index 14abfcb7d5..0000000000
--- a/docs/skills/fds-build/resources/v4/components/timeline.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# Timeline
-
-Import: `import { Timeline } from "@lifesg/react-design-system/timeline"`
-
-## When to use
-
-Use to communicate a process, application history, or sequence of steps. Use the `numeric` variant for numbered step-by-step instructions.
-
-## Sub-components
-
-### TimelineItemProps
-
-| Prop       | Type                                                                                                         | Default | Description                                            |
-| ---------- | ------------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------ |
-| `title`    | `string`                                                                                                     | —       | Item title — required                                  |
-| `content`  | `JSX.Element`                                                                                                | —       | Item content — required                                |
-| `variant`  | `"completed" \| "current" \| "upcoming-active" \| "upcoming-inactive" \| "numeric" \| "error" \| "disabled"` | —       | Visual state of the item indicator                     |
-| `statuses` | `PillProps[]`                                                                                                | —       | Status pills shown alongside the item (max 2 rendered) |
-
-## Variants
-
-| `variant`             | Usage                                |
-| --------------------- | ------------------------------------ |
-| `"completed"`         | Step or event is done                |
-| `"current"`           | Step currently in progress           |
-| `"upcoming-active"`   | Next actionable step                 |
-| `"upcoming-inactive"` | Future step, not yet actionable      |
-| `"error"`             | Step has an error                    |
-| `"disabled"`          | Step is not available                |
-| `"numeric"`           | Numbered step — use for instructions |
-
-## Props
-
-| Prop                         | Type                  | Default | Description                                              |
-| ---------------------------- | --------------------- | ------- | -------------------------------------------------------- |
-| `items`                      | `TimelineItemProps[]` | —       | Array of timeline items — required                       |
-| `title`                      | `string`              | —       | Section title shown above the timeline                   |
-| `className`                  | `string`              | —       | Class selector                                           |
-| `startCol`                   | `number`              | —       | CSS grid column start (when wrapped in a grid container) |
-| `colSpan`                    | `number`              | —       | CSS grid column span (when wrapped in a grid container)  |
-| `counterOffset`              | `number`              | `0`     | Starting offset for `numeric` variant indicators         |
-| `data-testid`                | `string`              | —       | Test identifier                                          |
-| `data-base-indicator-testid` | `string`              | —       | Test identifier for item indicators                      |
-
-## Rules
-
--   The first item defaults to `variant="current"` and subsequent items default to `variant="upcoming-active"` when `variant` is not specified.
--   Only a maximum of 2 `statuses` pills will render per item regardless of how many are provided.
--   `counterOffset` shifts the numeric counter: if `offset=2`, the first item shows `3`.
--   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
--   Use `counterOffset` when showing a partial sequence (e.g. steps 3–5 of a larger flow).
--   Use `statuses` with `PillProps` — follow Pill color semantics (see `pill.md`).
--   Use `"numeric"` variant consistently across all items in an instruction list — do not mix with status variants.
-
-## Anti-patterns
-
--   Mixing `"numeric"` and status variants in the same timeline — choose one paradigm per use case.
--   Providing more than 2 status pills per item — only 2 will render.
--   Using Timeline for non-sequential content — use a list or table instead.
diff --git a/docs/skills/fds-build/resources/v4/components/timetable.md b/docs/skills/fds-build/resources/v4/components/timetable.md
deleted file mode 100644
index 46ecf46701..0000000000
--- a/docs/skills/fds-build/resources/v4/components/timetable.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# Timetable
-
-Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
-
-## Props
-
-| Prop                      | Type                            | Default   | Description                                                               |
-| ------------------------- | ------------------------------- | --------- | ------------------------------------------------------------------------- |
-| `date` \*                 | `string`                        | —         | Current displayed date in `YYYY-MM-DD` format                             |
-| `rowData` \*              | `TimeTableRowData[]`            | —         | Data used to render each unique row                                       |
-| `loading` \*              | `boolean`                       | —         | Shows loading animation while true                                        |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void` | —         | Called when left arrow is clicked on the date navigator                   |
-| `onNextDayClick` \*       | `(currentDate: string) => void` | —         | Called when right arrow is clicked on the date navigator                  |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void` | —         | Called when a calendar date is picked in the dropdown                     |
-| `minTime`                 | `string`                        | `"00:00"` | Start time of the timetable in `HH:mm` format                             |
-| `maxTime`                 | `string`                        | `"23:00"` | End time of the timetable in `HH:mm` format                               |
-| `minDate`                 | `string`                        | —         | Minimum navigation date in `YYYY-MM-DD` format (inclusive)                |
-| `maxDate`                 | `string`                        | —         | Maximum navigation date in `YYYY-MM-DD` format (inclusive)                |
-| `initialScrollTime`       | `string`                        | —         | Initial scroll offset time in `HH:mm`                                     |
-| `roundInitialScrollTime`  | `boolean`                       | `true`    | Rounds `initialScrollTime` to the nearest 15-min grid interval            |
-| `totalRecords`            | `number`                        | —         | Total record count; if omitted, the total records section is not rendered |
-| `emptyContentMessage`     | `string`                        | —         | Message shown when `totalRecords=0` or `rowData=[]`                       |
-| `showCurrentDateAsToday`  | `boolean`                       | —         | Shows today's date as "Today"                                             |
-| `showDateAsShortForm`     | `boolean`                       | —         | Shows the date text in short form                                         |
-| `onRefresh`               | `() => void`                    | —         | Called when refresh button is clicked; if omitted, button is not rendered |
-| `onPage`                  | `() => void`                    | —         | Called when pagination occurs                                             |
-| `id`                      | `string`                        | —         | Identifier of the component                                               |
-| `className`               | `string`                        | —         | Class selector of the component                                           |
-| `data-testid`             | `string`                        | —         | Test identifier of the component                                          |
-
-`*` = required
-
-## TimeTableRowData
-
-| Prop                    | Type                                                       | Default   | Description                                               |
-| ----------------------- | ---------------------------------------------------------- | --------- | --------------------------------------------------------- |
-| `name` \*               | `string`                                                   | —         | Row header name                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                   | —         | Array of row cells; sorted by start time automatically    |
-| `id`                    | `string`                                                   | —         | Row identifier; passed to `onRowNameClick`                |
-| `subtitle`              | `string \| JSX.Element`                                    | —         | Row header subtitle                                       |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                    | —         | Custom popover for the row header                         |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                    | —         | Custom popover for auto-filled blocked cells              |
-| `rowMinTime`            | `string`                                                   | `minTime` | Row start time; blocked cells are auto-filled before this |
-| `rowMaxTime`            | `string`                                                   | `maxTime` | Row end time; blocked cells are auto-filled after this    |
-| `onRowNameClick`        | `(rowData: TimeTableRowData, e: React.MouseEvent) => void` | —         | Called when the row header name is clicked                |
-
-## TimeTableRowCellData
-
-| Prop                  | Type                                                            | Default | Description                                                        |
-| --------------------- | --------------------------------------------------------------- | ------- | ------------------------------------------------------------------ |
-| `startTime` \*        | `string`                                                        | —       | Cell start time in `HH:mm` (duration must be a multiple of 15 min) |
-| `endTime` \*          | `string`                                                        | —       | Cell end time in `HH:mm` (duration must be a multiple of 15 min)   |
-| `id`                  | `string`                                                        | —       | Cell identifier; passed to `onClick`                               |
-| `status`              | `"filled" \| "blocked" \| "default" \| "pending" \| "disabled"` | —       | Cell status, determines rendering style                            |
-| `title`               | `string`                                                        | —       | Title shown for this cell                                          |
-| `subtitle`            | `string`                                                        | —       | Subtitle shown for this cell                                       |
-| `customPopover`       | `TimeTablePopoverProps`                                         | —       | Custom popover for the cell                                        |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                  | —       | Custom style attributes; falls back to default row bar colors      |
-| `onClick`             | `(data: TimeTableRowCellData, e: React.MouseEvent) => void`     | —       | Called when the cell is clicked                                    |
-
-## TimeTablePopoverProps
-
-| Prop         | Type                                               | Default | Description                            |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------- |
-| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover  |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Popover content                        |
-| `delay`      | `{ open: number, close: number }`                  | —       | Hover delay in ms (hover trigger only) |
-| `offset`     | `number`                                           | —       | Offset in px for the popover           |
-
-## TimeTableCellStyleAttributes
-
-| Prop                      | Type                                           | Description                                                                      |
-| ------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------- |
-| `backgroundColor`         | `string \| (props: ThemeStyleProps) => string` | Main background color                                                            |
-| `altBackgroundColor`      | `string \| (props: ThemeStyleProps) => string` | Alternate background color for striped displays                                  |
-| `hoverBackgroundColor`    | `string \| (props: ThemeStyleProps) => string` | Background on hover                                                              |
-| `altHoverBackgroundColor` | `string \| (props: ThemeStyleProps) => string` | Alternate background on hover                                                    |
-| `styleType`               | `"default" \| "solid" \| "stripes"`            | Display style; defaults to cell type (blocked/pending = striped, others = solid) |
-
-## Rules
-
--   Do not combine `onClick` on a cell with a `trigger="click"` popover on the same cell — they conflict.
diff --git a/docs/skills/fds-build/resources/v4/components/toast.md b/docs/skills/fds-build/resources/v4/components/toast.md
deleted file mode 100644
index 3ddb0924f1..0000000000
--- a/docs/skills/fds-build/resources/v4/components/toast.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# Toast
-
-Import: `import { Toast } from "@lifesg/react-design-system/toast"`
-
-## When to use
-
-Use for brief, non-blocking feedback on system or user actions — "Changes saved", "Upload complete", "Request failed". Does not replace persistent callouts — use Alert for section-specific notices.
-
-## Sub-components
-
-### ActionButtonProps
-
-| Prop      | Type         | Default | Description                                         |
-| --------- | ------------ | ------- | --------------------------------------------------- |
-| `label`   | `string`     | —       | Label of the action button — required               |
-| `onClick` | `() => void` | —       | Called when the action button is clicked — required |
-
-## Variants
-
-| `type`      | When to use                   |
-| ----------- | ----------------------------- |
-| `"success"` | Action completed successfully |
-| `"error"`   | Action failed or system error |
-| `"warning"` | Completed with caution        |
-| `"info"`    | Neutral status update         |
-
-## Usage
-
-```tsx
-import { Toast } from "@lifesg/react-design-system/toast";
-
-<Toast
-    type="success"
-    label="Changes saved successfully."
-    autoDismiss
-    onDismiss={() => {}}
-/>;
-```
-
-## Props
-
-Inherits all `HTMLDivElement` attributes.
-
-| Prop              | Type                                          | Default     | Description                                      |
-| ----------------- | --------------------------------------------- | ----------- | ------------------------------------------------ |
-| `type`            | `"success" \| "warning" \| "error" \| "info"` | `"success"` | Status type — required                           |
-| `label`           | `string \| JSX.Element`                       | —           | Toast content — required                         |
-| `title`           | `string \| JSX.Element`                       | —           | Optional heading above the label                 |
-| `autoDismiss`     | `boolean`                                     | `false`     | Auto-dismiss after `autoDismissTime`             |
-| `autoDismissTime` | `number`                                      | `4000`      | Duration in ms before auto-dismiss               |
-| `onDismiss`       | `() => void`                                  | —           | Called when Toast is dismissed (by user or auto) |
-| `fixed`           | `boolean`                                     | `true`      | Fix to top of viewport on scroll                 |
-| `actionButton`    | `ActionButtonProps`                           | —           | Optional action button rendered in the Toast     |
-
-## Rules
-
--   `autoDismissTime` only takes effect when `autoDismiss` is `true`.
--   Use `autoDismiss` for non-critical updates — keep visible for errors that require user action.
--   Use `actionButton` for recoverable errors (retry, undo).
--   Use `title` + `label` together when the toast message has a heading and a description.
--   Do not use Toast for persistent notices — use Alert or NotificationBanner instead.
-
-## Anti-patterns
-
--   Using Toast for errors that require user action without providing an `actionButton`.
--   Setting `autoDismiss` on error toasts — errors should remain visible until the user dismisses them.
--   Replacing Alert with Toast for section-specific inline messages.
diff --git a/docs/skills/fds-build/resources/v4/components/toggle.md b/docs/skills/fds-build/resources/v4/components/toggle.md
deleted file mode 100644
index 6136e67c45..0000000000
--- a/docs/skills/fds-build/resources/v4/components/toggle.md
+++ /dev/null
@@ -1,120 +0,0 @@
-# Toggle
-
-Import: `import { Toggle } from "@lifesg/react-design-system/toggle"`
-
-## When to use
-
--   Form inputs for boolean choices, single/multi-option selection, and yes/no questions.
--   Preferred over bare `Checkbox` and `RadioButton` when building form inputs that need a card-style visible label container.
-
-## Variants
-
-| `type`       | When to use                                                  |
-| ------------ | ------------------------------------------------------------ |
-| `"checkbox"` | Multiple options can be selected or deselected independently |
-| `"radio"`    | Exactly one option must be selected — cannot be deselected   |
-| `"yes"`      | Binary yes answer — use with a paired `type="no"` Toggle     |
-| `"no"`       | Binary no answer — use with a paired `type="yes"` Toggle     |
-
-| `styleType`   | When to use                                                  |
-| ------------- | ------------------------------------------------------------ |
-| `"default"`   | Standard bordered card                                       |
-| `"no-border"` | Borderless — for contexts where the border is visually noisy |
-
-| `type`       | Behaviour                            |
-| ------------ | ------------------------------------ |
-| `"checkbox"` | Allows deselection — standard toggle |
-| `"radio"`    | No deselection — radio-style         |
-| `"yes"`      | No deselection — tick indicator      |
-| `"no"`       | No deselection — cross indicator     |
-
-## Usage
-
-```tsx
-import { Toggle } from "@lifesg/react-design-system/toggle";
-import { Form } from "@lifesg/react-design-system/form";
-
-{/* Checkbox group */}
-<Form.Label>Select your preferences</Form.Label>
-<Toggle type="checkbox" indicator checked={emailChecked} onChange={(e) => {}}>
-  Email notifications
-</Toggle>
-<Toggle type="checkbox" indicator checked={smsChecked} onChange={(e) => {}}>
-  SMS notifications
-</Toggle>
-```
-
-## Props
-
-| Prop                    | Type                                                   | Default      | Description                                                              |
-| ----------------------- | ------------------------------------------------------ | ------------ | ------------------------------------------------------------------------ |
-| `children`              | `string`                                               | —            | Main selector label — **required**                                       |
-| `type`                  | `"checkbox" \| "radio" \| "yes" \| "no"`               | `"checkbox"` | Selection behaviour and indicator icon                                   |
-| `styleType`             | `"default" \| "no-border"`                             | `"default"`  | Whether a border is displayed                                            |
-| `indicator`             | `boolean`                                              | —            | Show the type indicator icon (tick for `"yes"`, cross for `"no"`)        |
-| `checked`               | `boolean`                                              | —            | Controlled checked/selected state                                        |
-| `subLabel`              | `string \| JSX.Element \| () => JSX.Element`           | —            | Secondary text below the main label                                      |
-| `childrenMaxLines`      | `{desktop: number, mobile: number}`                    | —            | Max visible lines in the main label; additional lines are truncated      |
-| `disabled`              | `boolean`                                              | —            | Disables the element — non-interactable                                  |
-| `focusableWhenDisabled` | `boolean`                                              | —            | Keeps component focusable when disabled, preventing all user interaction |
-| `error`                 | `boolean`                                              | —            | Shows error state styling                                                |
-| `removable`             | `boolean`                                              | `false`      | Shows a remove button                                                    |
-| `onRemove`              | `() => void`                                           | —            | Called when the remove button is clicked                                 |
-| `compositeSection`      | `CompositeSectionProps`                                | —            | Collapsible subsection displayed below label and subLabel                |
-| `useContentWidth`       | `boolean`                                              | —            | Changes minimum container width to fit content                           |
-| `onChange`              | `(event: React.ChangeEvent<HTMLInputElement>) => void` | —            | Called when the Toggle is selected or deselected                         |
-| `name`                  | `string`                                               | —            | Name of the element                                                      |
-| `id`                    | `string`                                               | —            | Unique identifier of the element                                         |
-| `className`             | `string`                                               | —            | Class selector of the element                                            |
-| `data-testid`           | `string`                                               | —            | Test identifier of the element                                           |
-
-## CompositeSectionProps
-
-| Prop              | Type                      | Default | Description                                                      |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------- |
-| `children`        | `string \| JSX.Element`   | —       | Contents of the subsection — **required**                        |
-| `collapsible`     | `boolean`                 | `true`  | Whether the subsection is collapsible                            |
-| `initialExpanded` | `boolean`                 | —       | Initial expanded state — only applies when `collapsible` is true |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown when the subsection is collapsed                    |
-
-## Rules
-
--   `children` (main label) is mandatory.
--   `indicator` is recommended when using `type="yes"` or `type="no"` to show the tick/cross icon.
--   Always pass `indicator` for `type="checkbox"`, `type="radio"`, `type="yes"`, and `type="no"` — it shows the relevant icon (tick, dot, tick, cross) inside the toggle.
--   Use `type="radio"` when the option cannot be deselected (e.g. single-select from a list).
--   Use `compositeSection` to reveal dependent fields when a Toggle is selected — do not conditionally render fields outside the Toggle.
--   Use `subLabel` for secondary supporting text — do not embed long descriptions in `children`.
--   Use `childrenMaxLines` to constrain label height in dense list layouts.
--   Place a `Form.Label` above each toggle group to provide the question or field label.
-
-### Spacing
-
-| Layout                    | Gap                                  |
-| ------------------------- | ------------------------------------ |
-| Stacked (checkbox, radio) | `spacing-8` between each Toggle      |
-| Side by side (yes / no)   | `spacing-16` between the two Toggles |
-
-```tsx
-{/* Stacked — checkbox or radio */}
-<Form.Label>Declaration</Form.Label>
-<ToggleWrapper> {/* margin-bottom: spacing-32 — matches Form field built-in */}
-  <Toggle indicator checked={a} onChange={...}>Option A</Toggle>
-  <div style={{ marginBottom: Spacing["spacing-8"] }} />
-  <Toggle indicator checked={b} onChange={...}>Option B</Toggle>
-</ToggleWrapper>
-
-{/* Side by side — yes / no */}
-<Form.Label>Do you have a disability?</Form.Label>
-<YesNoGroup> {/* display: flex; gap: spacing-16 */}
-  <Toggle type="yes" indicator checked={val === "yes"} onChange={...}>Yes</Toggle>
-  <Toggle type="no"  indicator checked={val === "no"}  onChange={...}>No</Toggle>
-</YesNoGroup>
-```
-
-## Anti-patterns
-
--   Do not use bare `Checkbox` or `RadioButton` in forms when a labelled card container is needed — use `Toggle` instead.
--   Do not conditionally render dependent fields outside the Toggle — use `compositeSection`.
--   Do not use `type="yes"` or `type="no"` without pairing both options together in the UI.
--   Do not omit `indicator` for any Toggle type — it is required for all variants.
diff --git a/docs/skills/fds-build/resources/v4/components/typography.md b/docs/skills/fds-build/resources/v4/components/typography.md
deleted file mode 100644
index 08881eca38..0000000000
--- a/docs/skills/fds-build/resources/v4/components/typography.md
+++ /dev/null
@@ -1,92 +0,0 @@
-# Typography
-
-Import: `import { Typography } from "@lifesg/react-design-system/typography"`
-
-## When to use
-
-Use Typography components to render text content — headings, paragraphs, and links. Do not use for parent containers that have text children; use Font tokens instead (see `foundations/typography.md`).
-
-## Sub-components
-
-**Headings:** `Typography.HeadingXXL`, `Typography.HeadingXL`, `Typography.HeadingLG`, `Typography.HeadingMD`, `Typography.HeadingSM`, `Typography.HeadingXS`
-
-**Body:** `Typography.BodyBL`, `Typography.BodyMD`, `Typography.BodySM`, `Typography.BodyXS`
-
-**Links:** `Typography.LinkBL`, `Typography.LinkMD`, `Typography.LinkSM`, `Typography.LinkXS`
-
-## Variants
-
-| Component         | Default element | Usage                                  |
-| ----------------- | --------------- | -------------------------------------- |
-| `HeadingXXL`      | `h1`            | Hero/page-level title                  |
-| `HeadingXL`       | `h2`            | Page title or primary section heading  |
-| `HeadingLG`       | `h3`            | Section heading                        |
-| `HeadingMD`       | `h4`            | Subsection heading                     |
-| `HeadingSM`       | —               | Card heading, secondary heading        |
-| `HeadingXS`       | —               | Small heading                          |
-| `BodyBL`          | —               | Default paragraph text                 |
-| `BodyMD`          | —               | Medium body text                       |
-| `BodySM`          | —               | Helper text                            |
-| `BodyXS`          | —               | Metadata, timestamps                   |
-| `LinkBL/MD/SM/XS` | `<a>`           | Inline links, sized to match body text |
-
-## Usage
-
-```tsx
-import { Typography } from "@lifesg/react-design-system/typography";
-
-<>
-    <Typography.HeadingXL>Page title</Typography.HeadingXL>
-    <Typography.BodyBL paragraph>
-        Supporting body text for the section. Use{" "}
-        <Typography.LinkMD href="/learn-more">
-            link components
-        </Typography.LinkMD>{" "}
-        for inline anchors.
-    </Typography.BodyBL>
-</>;
-```
-
-## Props
-
-### Heading/Body props
-
-Inherits `HTMLElement` attributes.
-
-| Prop        | Type                                           | Default     | Description                                     |
-| ----------- | ---------------------------------------------- | ----------- | ----------------------------------------------- |
-| `as`        | `string`                                       | —           | Override rendered HTML element (e.g. `as="h1"`) |
-| `weight`    | `"regular" \| "semibold" \| "bold" \| "light"` | `"regular"` | Font weight                                     |
-| `inline`    | `boolean`                                      | —           | Display inline instead of block                 |
-| `paragraph` | `boolean`                                      | `false`     | Add bottom margin for text block separation     |
-| `maxLines`  | `number`                                       | —           | Truncate after N lines with ellipsis            |
-
-### Link props
-
-Inherits `HTMLAnchorElement` attributes.
-
-| Prop             | Type                                           | Default       | Description                  |
-| ---------------- | ---------------------------------------------- | ------------- | ---------------------------- |
-| `weight`         | `"regular" \| "semibold" \| "bold" \| "light"` | `"regular"`   | Font weight                  |
-| `external`       | `boolean`                                      | —             | Show external link indicator |
-| `underlineStyle` | `"underline" \| "none"`                        | `"underline"` | Text decoration              |
-
-## Rules
-
--   Default HTML elements: `HeadingXXL` → `h1`, `HeadingXL` → `h2`, `HeadingLG` → `h3`, `HeadingMD` → `h4`.
--   Text color is not set by the component — apply via `styled()` using Colour tokens.
--   Do not pass `color` as a prop — `TypographyProps` extends `HTMLAttributes` and forwards the value to the DOM, triggering a React warning.
--   Do not use Typography for parent containers — use Font tokens instead.
--   Heading components render default HTML elements — use the `as` prop when visual size and reading order don't match.
--   Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
--   Apply text color via `styled()` using Colour tokens — never pass `color` as a prop.
--   Use the `weight` prop to adjust emphasis, not opacity.
--   Links are underlined by default — use `underlineStyle="none"` only when context makes the link obvious.
--   Always use the `external` prop for links that navigate outside the domain.
-
-## Anti-patterns
-
--   Passing `color` directly as a prop — it forwards a Colour object to the DOM and triggers a React warning.
--   Skipping heading levels for visual sizing — use the `as` prop instead.
--   Using `<h1>` raw HTML inside a Typography component instead of `as="h1"`.
--   Using Typography on a container element to inherit font styles — use Font tokens.
diff --git a/docs/skills/fds-build/resources/v4/components/uneditable-section.md b/docs/skills/fds-build/resources/v4/components/uneditable-section.md
deleted file mode 100644
index 74e4b5bd7f..0000000000
--- a/docs/skills/fds-build/resources/v4/components/uneditable-section.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# UneditableSection
-
-Import: `import { UneditableSection } from "@lifesg/react-design-system/uneditable-section"`
-
-## When to use
-
--   Displaying read-only label/value pairs on summary or review screens.
--   Showing retrieved or pre-filled data the user cannot edit.
-
-## Sub-components
-
--   `UneditableSection.ItemSection` — wraps a group of items (extends `HTMLUListElement`)
--   `UneditableSection.Item` — individual label/value item
-
-## Usage
-
-```tsx
-import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
-
-<UneditableSection
-    title="Personal details"
-    items={[
-        { label: "Full name", value: "Jane Tan", displayWidth: "half" },
-        { label: "Date of birth", value: "1 Jan 1990", displayWidth: "half" },
-        { label: "Address", value: "123 Example Road, Singapore 123456" },
-    ]}
-/>;
-```
-
-## Props
-
-### UneditableSection
-
-| Prop            | Type                                         | Default | Description                                        |
-| --------------- | -------------------------------------------- | ------- | -------------------------------------------------- |
-| `items`         | `UneditableSectionItemProps[]`               | —       | Items displayed in label/value format              |
-| `title`         | `string`                                     | —       | Section title (rendered as `Text.H3`)              |
-| `description`   | `string`                                     | —       | Section description (rendered as `Text.Body`)      |
-| `topSection`    | `JSX.Element`                                | —       | Custom section rendered above the items            |
-| `bottomSection` | `JSX.Element`                                | —       | Custom section rendered below the items            |
-| `children`      | `JSX.Element \| JSX.Element[]`               | —       | Full body; enables custom composition              |
-| `background`    | `boolean`                                    | `true`  | Whether a background is rendered                   |
-| `stretch`       | `boolean`                                    | —       | Contents take full width of the section            |
-| `fullWidth`     | `boolean`                                    | —       | Removes default spacing/grid from `Layout.Content` |
-| `onMask`        | `(item: UneditableSectionItemProps) => void` | —       | Called when the mask icon is clicked               |
-| `onUnmask`      | `(item: UneditableSectionItemProps) => void` | —       | Called when the unmask icon is clicked             |
-| `onTryAgain`    | `(item: UneditableSectionItemProps) => void` | —       | Called when "Try again?" indicator is clicked      |
-| `id`            | `string`                                     | —       | Unique id of the component                         |
-| `className`     | `string`                                     | —       | Class selector of the component                    |
-| `data-testid`   | `string`                                     | —       | Test identifier of the component                   |
-
-### UneditableSection.ItemSection
-
-Inherits all props from `HTMLUListElement`.
-
-| Prop      | Type      | Default | Description                                       |
-| --------- | --------- | ------- | ------------------------------------------------- |
-| `stretch` | `boolean` | —       | Contents take full width of the UneditableSection |
-
-### UneditableSectionItemProps
-
-| Prop                | Type                        | Default  | Description                                                 |
-| ------------------- | --------------------------- | -------- | ----------------------------------------------------------- |
-| `label` \*          | `string`                    | —        | Label of the item                                           |
-| `value` \*          | `string \| React.ReactNode` | —        | Value of the item; masking only works for string values     |
-| `displayWidth`      | `"half" \| "full"`          | `"full"` | Column span of the item                                     |
-| `id`                | `string`                    | —        | Unique identifier of the item                               |
-| `maskRange`         | `number[]`                  | —        | [start, end] index range to mask                            |
-| `unmaskRange`       | `number[]`                  | —        | [start, end] index range to NOT mask                        |
-| `maskRegex`         | `RegExp`                    | —        | Regex matched content replaced with `maskChar`              |
-| `maskTransformer`   | `(value) => string`         | —        | Function to transform the value                             |
-| `maskChar`          | `string`                    | `•`      | Character used for masking                                  |
-| `maskState`         | `"masked" \| "unmasked"`    | —        | If undefined, no mask/unmask controls are rendered          |
-| `maskLoadingState`  | `"loading" \| "fail"`       | —        | Loading state for mask/unmask action                        |
-| `disableMaskUnmask` | `boolean`                   | —        | Value is masked/unmasked but no indicator is rendered       |
-| `alert`             | `AlertProps`                | —        | Alert rendered under the section item                       |
-| `onMask`            | `() => void`                | —        | Called when mask icon is clicked (on Item sub-component)    |
-| `onUnmask`          | `() => void`                | —        | Called when unmask icon is clicked (on Item sub-component)  |
-| `onTryAgain`        | `() => void`                | —        | Called when "Try again?" is clicked (on Item sub-component) |
-
-`*` = required
-
-## Rules
-
--   Always supply `items` with a `label` and `value` for each field.
--   Use `displayWidth: "half"` for short values (names, dates, codes) to show two per row; omit for long values.
--   Show `"—"` for any unanswered or empty field rather than leaving `value` blank.
--   Set `background={false}` when rendering inside a `BoxContainer` — the container already provides the visual boundary; the default background creates an unwanted nested box appearance.
--   Set `fullWidth` when rendering inside a container such as `BoxContainer` to remove the default `Layout.Content` spacing and allow content to fill the full width.
-
-## Anti-patterns
-
--   Do not use `UneditableSection` for editable fields — use `Form.*` components with `readOnly` instead.
--   Do not nest `UneditableSection` inside another `UneditableSection`.
diff --git a/package.json b/package.json
index 934b285eac..d380302242 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
         "lint:js:fix": "eslint '**/*.{ts,tsx,js,jsx}' --fix --max-warnings 0",
         "lint:css": "stylelint '**/*.css'",
         "lint:css:fix": "stylelint '**/*.css' --fix",
-        "test:eslint-rules": "node tests/eslint-rules/run-eslint-rule-tests.mjs"
+        "test:eslint-rules": "node tests/eslint-rules/run-eslint-rule-tests.mjs",
+        "generate:skill-props": "tsx scripts/generate-skill-props.ts"
     },
     "repository": {
         "type": "git",
diff --git a/scripts/generate-skill-props.ts b/scripts/generate-skill-props.ts
new file mode 100644
index 0000000000..bf2729b7af
--- /dev/null
+++ b/scripts/generate-skill-props.ts
@@ -0,0 +1,369 @@
+/**
+ * Generates ## Props sections in skill resource files from TypeScript source types.
+ *
+ * Run with: tsx scripts/generate-skill-props.ts
+ *
+ * For each component resource file under skills/fds-build/resources/,
+ * this script:
+ *   1. Reads the "Import:" line to find the source folder
+ *   2. Loads the corresponding src/.../types.ts via ts-morph
+ *   3. Flattens the interface hierarchy (skipping raw HTML/React base types)
+ *   4. Generates a markdown ## Props table
+ *   5. Inserts it before ## Rules (or ## Anti-patterns, or at the end)
+ *
+ * Re-run whenever @lifesg/react-design-system types change.
+ */
+
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+import {
+    InterfaceDeclaration,
+    Node,
+    Project,
+    TypeAliasDeclaration,
+    type SourceFile,
+} from "ts-morph";
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const ROOT_DIR = path.resolve(__dirname, "..");
+const SRC_DIR = path.join(ROOT_DIR, "src");
+const SKILLS_RESOURCES_DIR = path.join(
+    ROOT_DIR,
+    "skills",
+    "fds-build",
+    "resources"
+);
+
+// Props that come from React/HTML base types — noise for skill docs
+const SKIP_PROP_NAMES = new Set([
+    "data-testid",
+    "data-error-testid",
+    "ref",
+    "key",
+]);
+
+// Declaration source paths that indicate a prop is from a React/HTML base type
+function isFromReactOrHtmlBase(declFilePath: string): boolean {
+    return (
+        declFilePath.includes("node_modules/typescript") ||
+        declFilePath.includes("node_modules/@types/react") ||
+        declFilePath.includes("node_modules/@types/react-dom")
+    );
+}
+
+// =============================================================================
+// Source path resolution
+// =============================================================================
+
+/** Extract the import subfolder from the resource file's "Import:" line. */
+function extractImportFolder(content: string): string | null {
+    const match = content.match(/@lifesg\/react-design-system\/([a-z0-9-]+)/);
+    return match ? match[1] : null;
+}
+
+/**
+ * Derive the source types.ts path for a resource file.
+ * Tries candidates in order and returns the first that exists on disk:
+ *   1. src/{importFolder}/{resourceName}/types.ts  (nested — form-select under form/)
+ *   2. src/{importFolder}/types.ts                 (top-level — accordion, otp-verification)
+ *   3. src/{importFolder}s/types.ts                (plural folder — animation → animations)
+ */
+function resolveSourceTypesPath(
+    resourceName: string,
+    importFolder: string
+): string {
+    const candidates = [
+        path.join(SRC_DIR, importFolder, resourceName, "types.ts"),
+        path.join(SRC_DIR, importFolder, "types.ts"),
+        path.join(SRC_DIR, `${importFolder}s`, "types.ts"),
+    ];
+    return candidates.find(fs.existsSync) ?? candidates[0];
+}
+
+// =============================================================================
+// Type extraction
+// =============================================================================
+
+/** Clean up a type string for display in the markdown table. */
+function formatType(raw: string): string {
+    return (
+        raw
+            // Remove trailing | undefined (optional marker)
+            .replace(/\s*\|\s*undefined/g, "")
+            // Collapse excessive whitespace
+            .replace(/\s+/g, " ")
+            .trim()
+    );
+}
+
+type PropEntry = {
+    name: string;
+    type: string;
+    required: boolean;
+    defaultVal: string;
+    description: string;
+};
+
+/**
+ * Collect all props for an interface or type alias using ts-morph's
+ * fully-resolved type system. Handles Omit<>, intersections, extends chains,
+ * and union members in one pass — no manual recursion needed.
+ */
+function collectProps(
+    node: InterfaceDeclaration | TypeAliasDeclaration
+): PropEntry[] {
+    const result: PropEntry[] = [];
+
+    for (const sym of node.getType().getProperties()) {
+        const name = sym.getName();
+        if (SKIP_PROP_NAMES.has(name)) continue;
+        if (name.startsWith("__")) continue;
+
+        // Find the best declaration for type text and JSDoc
+        const decls = sym.getDeclarations();
+        const propDecl =
+            decls.find(Node.isPropertySignature) ??
+            decls.find(Node.isMethodSignature) ??
+            decls[0];
+
+        if (!propDecl) continue;
+
+        // Skip props that originate from React/@types — they're HTML noise
+        const declPath = propDecl.getSourceFile().getFilePath();
+        if (isFromReactOrHtmlBase(declPath)) continue;
+
+        // Get a clean type string
+        let type = "unknown";
+        if (Node.isPropertySignature(propDecl)) {
+            const typeNode = propDecl.getTypeNode();
+            type = formatType(
+                typeNode
+                    ? typeNode.getText()
+                    : propDecl.getType().getText(propDecl)
+            );
+        } else {
+            type = formatType(sym.getTypeAtLocation(node).getText());
+        }
+
+        const required = Node.isPropertySignature(propDecl)
+            ? !propDecl.hasQuestionToken()
+            : false;
+
+        let description = "";
+        let defaultVal = "";
+
+        if (Node.isPropertySignature(propDecl)) {
+            for (const jsDoc of propDecl.getJsDocs()) {
+                const comment = jsDoc.getCommentText();
+                if (comment && !description) {
+                    description = comment.replace(/\n\s*/g, " ").trim();
+                }
+                for (const tag of jsDoc.getTags()) {
+                    if (tag.getTagName() === "default") {
+                        defaultVal = (tag.getCommentText() ?? "").trim();
+                    }
+                }
+            }
+        }
+
+        result.push({ name, type, required, defaultVal, description });
+    }
+
+    return result;
+}
+
+// =============================================================================
+// Markdown generation
+// =============================================================================
+
+function escapeCell(s: string): string {
+    return s.replace(/\|/g, "\\|");
+}
+
+function generatePropsTable(props: PropEntry[]): string {
+    if (props.length === 0) return "";
+
+    const header = [
+        "| Prop | Type | Default | Description |",
+        "| ---- | ---- | ------- | ----------- |",
+    ];
+
+    const rows = props.map((p) => {
+        const namePart = p.required ? `\`${p.name}\` \\*` : `\`${p.name}\``;
+        return `| ${namePart} | \`${escapeCell(p.type)}\` | ${
+            p.defaultVal || "—"
+        } | ${escapeCell(p.description) || "—"} |`;
+    });
+
+    return [...header, ...rows].join("\n");
+}
+
+/** Build the full ## Props content to insert. Supports multiple interfaces (sub-sections). */
+function buildPropsContent(
+    interfaces: Array<{ title: string; props: PropEntry[] }>
+): string {
+    if (interfaces.length === 0) return "";
+
+    const sections = interfaces
+        .filter((i) => i.props.length > 0)
+        .map((i) => `${i.title}\n\n${generatePropsTable(i.props)}`);
+
+    if (sections.length === 0) return "";
+    return sections.join("\n\n");
+}
+
+// =============================================================================
+// Resource file processing
+// =============================================================================
+
+function insertPropsSection(content: string, propsBlock: string): string {
+    const marker = "\n\n" + propsBlock;
+
+    if (content.includes("\n## Rules")) {
+        return content.replace("\n## Rules", marker + "\n\n## Rules");
+    }
+    if (content.includes("\n## Anti-patterns")) {
+        return content.replace(
+            "\n## Anti-patterns",
+            marker + "\n\n## Anti-patterns"
+        );
+    }
+    return content.trimEnd() + marker + "\n";
+}
+
+function processResourceFile(
+    filePath: string,
+    project: Project
+): { skipped: boolean; reason?: string } {
+    const content = fs.readFileSync(filePath, "utf-8");
+
+    const importFolder = extractImportFolder(content);
+    if (!importFolder) return { skipped: true, reason: "no Import: line" };
+
+    const resourceName = path.basename(filePath, ".md");
+    const sourceTypesPath = resolveSourceTypesPath(resourceName, importFolder);
+
+    if (!fs.existsSync(sourceTypesPath)) {
+        return {
+            skipped: true,
+            reason: `no source: ${path.relative(ROOT_DIR, sourceTypesPath)}`,
+        };
+    }
+
+    let sourceFile: SourceFile | undefined;
+    try {
+        sourceFile =
+            project.getSourceFile(sourceTypesPath) ??
+            project.addSourceFileAtPathIfExists(sourceTypesPath);
+    } catch {
+        return { skipped: true, reason: "ts-morph load failed" };
+    }
+
+    if (!sourceFile) {
+        return { skipped: true, reason: "source file not found by ts-morph" };
+    }
+
+    // Collect interfaces and type aliases that have a JSDoc description (public API intent)
+    const hasJsDoc = (n: InterfaceDeclaration | TypeAliasDeclaration) =>
+        n.getJsDocs().some((d) => d.getCommentText());
+
+    const nodesFromFile = (sf: SourceFile) => [
+        ...sf.getInterfaces().filter((i) => i.isExported() && hasJsDoc(i)),
+        ...sf.getTypeAliases().filter((t) => t.isExported() && hasJsDoc(t)),
+    ];
+
+    let publicNodes: Array<InterfaceDeclaration | TypeAliasDeclaration> =
+        nodesFromFile(sourceFile);
+
+    // Barrel files (e.g. form/form-otp-verification/types.ts) only re-export from
+    // another file. Follow named re-exports one level deep.
+    if (publicNodes.length === 0) {
+        for (const exportDecl of sourceFile.getExportDeclarations()) {
+            const reFile = exportDecl.getModuleSpecifierSourceFile();
+            if (!reFile) continue;
+            const exportedNames = new Set(
+                exportDecl.getNamedExports().map((s) => s.getName())
+            );
+            const candidates = nodesFromFile(reFile).filter((n) =>
+                exportedNames.has(n.getName())
+            );
+            publicNodes = publicNodes.concat(candidates);
+        }
+    }
+
+    if (publicNodes.length === 0) {
+        return { skipped: true, reason: "no documented exported interfaces" };
+    }
+
+    // Build interface sections
+    const ifaceSections = publicNodes.map((node) => {
+        const props = collectProps(node);
+        const title =
+            publicNodes.length > 1
+                ? `## Props — \`${node.getName()}\``
+                : "## Props";
+        return { title, props };
+    });
+
+    const propsBlock = buildPropsContent(ifaceSections);
+    if (!propsBlock) return { skipped: true, reason: "no props extracted" };
+
+    const newContent = insertPropsSection(content, propsBlock);
+    fs.writeFileSync(filePath, newContent, "utf-8");
+
+    return { skipped: false };
+}
+
+// =============================================================================
+// Main
+// =============================================================================
+
+function main() {
+    const project = new Project({
+        tsConfigFilePath: path.join(ROOT_DIR, "tsconfig.json"),
+        skipAddingFilesFromTsConfig: true,
+    });
+
+    const resourceDirs = ["v3", "v4"].map((v) =>
+        path.join(SKILLS_RESOURCES_DIR, v, "components")
+    );
+
+    let updated = 0;
+    let skipped = 0;
+
+    for (const dir of resourceDirs) {
+        if (!fs.existsSync(dir)) continue;
+        const version = path.basename(path.dirname(dir));
+
+        for (const file of fs.readdirSync(dir).sort()) {
+            if (!file.endsWith(".md")) continue;
+            const filePath = path.join(dir, file);
+            const { skipped: wasSkipped, reason } = processResourceFile(
+                filePath,
+                project
+            );
+
+            if (wasSkipped) {
+                skipped++;
+                if (process.env.VERBOSE) {
+                    console.log(
+                        `  skip  [${version}] ${file}${
+                            reason ? ` (${reason})` : ""
+                        }`
+                    );
+                }
+            } else {
+                updated++;
+                console.log(`  props [${version}] ${file}`);
+            }
+        }
+    }
+
+    console.log(`\nDone. Updated: ${updated}, Skipped: ${skipped}`);
+}
+
+main();
diff --git a/docs/skills/fds-build/SKILL-v4.md b/skills/fds-build/SKILL-v4.md
similarity index 96%
rename from docs/skills/fds-build/SKILL-v4.md
rename to skills/fds-build/SKILL-v4.md
index e0518adc6a..7d062b1ce8 100644
--- a/docs/skills/fds-build/SKILL-v4.md
+++ b/skills/fds-build/SKILL-v4.md
@@ -149,9 +149,7 @@ This skill is self-contained — all resource files live under `./resources/` re
 | Use a component                                                       | Check `./resources/v4/components/{name}/` first; fall back to `./resources/v3/components/{name}.md` |
 | Grid system, breakpoints, column widths                               | `./resources/v3/components/layout.md`                                                               |
 | Build a form page (single or multi-step)                              | Check `./resources/v4/templates/form.md`; fall back to `./resources/v3/templates/form.md`           |
-| Build a dashboard                                                     | Check `./resources/v4/patterns/dashboard.md`; fall back to `./resources/v3/patterns/dashboard.md`   |
 | Build a listing / search results page                                 | `./resources/v4/templates/listing.md`                                                               |
-| Build a detail / record page                                          | `./resources/v3/patterns/detail.md`                                                                 |
 | Handle loading / error / empty states                                 | `./resources/v3/patterns/states.md`                                                                 |
 | Token question (Colour, Spacing, Radius, Typography)                  | `./resources/v3/foundations/tokens.md`                                                              |
 | Spacing rhythm, visual hierarchy, card rules, settings page structure | `./resources/v3/foundations/layout-composition-patterns.md`                                         |
diff --git a/docs/skills/fds-build/SKILL.md b/skills/fds-build/SKILL.md
similarity index 97%
rename from docs/skills/fds-build/SKILL.md
rename to skills/fds-build/SKILL.md
index 7e1e346f1d..bcb1aa7554 100644
--- a/docs/skills/fds-build/SKILL.md
+++ b/skills/fds-build/SKILL.md
@@ -169,9 +169,7 @@ This skill is self-contained — all resource files live under `./resources/` re
 | Use a component                                                       | `./resources/v3/components/{name}.md` — contains props AND usage rules |
 | Grid system, breakpoints, column widths                               | `./resources/v3/components/layout.md`                                  |
 | Build a form page (single or multi-step)                              | `./resources/v3/templates/form.md`                                     |
-| Build a dashboard                                                     | `./resources/v3/patterns/dashboard.md`                                 |
 | Build a listing / search results page                                 | `./resources/v3/templates/listing.md`                                  |
-| Build a detail / record page                                          | `./resources/v3/patterns/detail.md`                                    |
 | Handle loading / error / empty states                                 | `./resources/v3/patterns/states.md`                                    |
 | Token question (Colour, Spacing, Radius, Typography)                  | `./resources/v3/foundations/tokens.md`                                 |
 | Spacing rhythm, visual hierarchy, card rules, settings page structure | `./resources/v3/foundations/layout-composition-patterns.md`            |
@@ -188,3 +186,11 @@ This skill is self-contained — all resource files live under `./resources/` re
 | styled-components DOM prop warnings | `StyleSheetManager` is missing or not wrapping `ThemeProvider`                  |
 | No styles / wrong fonts             | Read `./resources/v3/setup/setup.md` — CSS imports likely missing or mismatched |
 | Token in inline `style={{}}`        | Tokens are functions — move to a `styled` template literal                      |
+
+---
+
+<!-- dev note -->
+
+## Keeping props up to date
+
+Run `npm run generate:skill-props` from the repo root after upgrading `@lifesg/react-design-system` or modifying types in `src/`. The script reads each component's `types.ts` via ts-morph and regenerates the `## Props` tables in all resource files under `./resources/`.
diff --git a/docs/skills/fds-build/catalogue.md b/skills/fds-build/catalogue.md
similarity index 91%
rename from docs/skills/fds-build/catalogue.md
rename to skills/fds-build/catalogue.md
index 79478fe8e1..1169f9ac2b 100644
--- a/docs/skills/fds-build/catalogue.md
+++ b/skills/fds-build/catalogue.md
@@ -163,11 +163,20 @@ All `Form.*` components import from `@lifesg/react-design-system/form`. `label`
 
 ## Layout & Utility
 
-| Component         | Key                | Also known as                                                               | Pairs with           | Description                                                                                                                                     | Key props                                                      |
-| ----------------- | ------------------ | --------------------------------------------------------------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| `Layout`          | `layout`           | grid, container, column, responsive layout, col                             | `Card`, `Typography` | Responsive grid — `Layout.Container type="grid"` + `Layout.ColDiv xsCols`                                                                       | `Layout.Container type` (req), `Layout.ColDiv xsCols lgCols`   |
-| `TextList`        | `text-list`        | bullet list, unordered list, ordered list, numbered list, ul, ol            | `Typography`, `Card` | Semantic lists — `TextList.Ul` (bullets) and `TextList.Ol` (numbered/lettered). Supports custom icon bullets                                    | `items` (req), `listStyleType`                                 |
-| `HistogramSlider` | `histogram-slider` | range slider with histogram, price range, distribution slider, filter range | `Filter`             | Range slider with histogram chart above — for filter panels where showing value distribution aids range selection                               | `min` (req), `max` (req), `value`, `onChange`, `histogramData` |
-| `Divider`         | `divider`          | horizontal rule, separator, hr, line                                        | `Card`, `Accordion`  | Visual separator between sections                                                                                                               | _(none required)_                                              |
-| `ImageButton`     | `image-button`     | image CTA, image card button, clickable image                               | `Layout`             | Image with text overlay as a button                                                                                                             | `imageUrl` (req), `label`, `onClick`                           |
-| `Animation`       | `animation`        | loading spinner, spinner, loading indicator, animate, transition, dots      | —                    | Loading and transition animations — `LoadingSpinner`, `LoadingDots`, `LoadingDotsSpinner`. Import from `@lifesg/react-design-system/animations` | _(none required)_                                              |
+| Component         | Key                | Also known as                                                               | Pairs with           | Description                                                                                                                                          | Key props                                                      |
+| ----------------- | ------------------ | --------------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| `Layout`          | `layout`           | grid, container, column, responsive layout, col                             | `Card`, `Typography` | Responsive grid — `Layout.Container type="grid"` + `Layout.ColDiv xsCols`                                                                            | `Layout.Container type` (req), `Layout.ColDiv xsCols lgCols`   |
+| `TextList`        | `text-list`        | bullet list, unordered list, ordered list, numbered list, ul, ol            | `Typography`, `Card` | Semantic lists — `TextList.Ul` (bullets) and `TextList.Ol` (numbered/lettered). Supports custom icon bullets                                         | `items` (req), `listStyleType`                                 |
+| `HistogramSlider` | `histogram-slider` | range slider with histogram, price range, distribution slider, filter range | `Filter`             | Range slider with histogram chart above — for filter panels where showing value distribution aids range selection                                    | `min` (req), `max` (req), `value`, `onChange`, `histogramData` |
+| `Divider`         | `divider`          | horizontal rule, separator, hr, line                                        | `Card`, `Accordion`  | Visual separator between sections                                                                                                                    | _(none required)_                                              |
+| `ImageButton`     | `image-button`     | image CTA, image card button, clickable image                               | `Layout`             | Image with text overlay as a button                                                                                                                  | `imageUrl` (req), `label`, `onClick`                           |
+| `Table`           | `table`            | basic table, html table, simple table, read-only table                      | `Typography`         | Styled HTML table wrapper — `Table.Container` + `Table` + `Table.Head/Body/Row/HeaderCell/Cell`. No sorting or selection — use `DataTable` for those | `children`                                                     |
+
+---
+
+## Icons
+
+| Component   | Key         | Also known as                                                          | Pairs with                       | Description                                                                                                                                                                                             | Key props                           |
+| ----------- | ----------- | ---------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| Icons       | `icon`      | icon, svg icon, react icon, arrow icon, tick icon, MUI                 | `Button`, `Navbar`, `IconButton` | Icons from `@lifesg/react-icons` — separate package. Each icon is its own named export: `import { ArrowRightIcon } from "@lifesg/react-icons/arrow-right"`. Never guess names — read the resource file. | `aria-label` (for standalone icons) |
+| `Animation` | `animation` | loading spinner, spinner, loading indicator, animate, transition, dots | —                                | Loading and transition animations — `LoadingSpinner`, `LoadingDots`, `LoadingDotsSpinner`. Import from `@lifesg/react-design-system/animations`                                                         | _(none required)_                   |
diff --git a/docs/skills/fds-build/evals/evals.json b/skills/fds-build/evals/evals.json
similarity index 60%
rename from docs/skills/fds-build/evals/evals.json
rename to skills/fds-build/evals/evals.json
index a45afb2a10..a9afd9c14b 100644
--- a/docs/skills/fds-build/evals/evals.json
+++ b/skills/fds-build/evals/evals.json
@@ -312,6 +312,208 @@
                     "value": "animation: spin"
                 }
             ]
+        },
+        {
+            "id": 6,
+            "prompt": "Build a registration form using @lifesg/react-design-system v3. Collect full name, email, and a date of birth. On submit, show a success Toast. Include Navbar and Footer.",
+            "expected_output": "Uses StyleSheetManager + ThemeProvider with a theme object (e.g. LifeSGTheme) from @lifesg/react-design-system/theme. Uses styled-components for custom layout. Form.Input for name/email. Form.DateInput for DOB. Toast component for success feedback. No raw <input> elements. No plain CSS variables — tokens are interpolation functions inside styled templates.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-stylesheet-manager",
+                    "description": "Wraps app in StyleSheetManager (v3 requirement)",
+                    "type": "contains",
+                    "value": "StyleSheetManager"
+                },
+                {
+                    "id": "theme-object-not-string",
+                    "description": "ThemeProvider receives a theme object, not a string",
+                    "type": "contains",
+                    "value": "LifeSGTheme"
+                },
+                {
+                    "id": "uses-form-input",
+                    "description": "Uses Form.Input for text fields",
+                    "type": "contains",
+                    "value": "Form.Input"
+                },
+                {
+                    "id": "uses-form-date-input",
+                    "description": "Uses Form.DateInput for date of birth",
+                    "type": "contains",
+                    "value": "Form.DateInput"
+                },
+                {
+                    "id": "uses-toast",
+                    "description": "Uses Toast for success feedback",
+                    "type": "contains",
+                    "value": "Toast"
+                },
+                {
+                    "id": "no-css-variable-strings",
+                    "description": "Does not use plain CSS variable strings (v4 pattern) in styled-components",
+                    "type": "not_contains",
+                    "value": "var(--fds-"
+                },
+                {
+                    "id": "uses-subpath-imports",
+                    "description": "Imports use subpath pattern",
+                    "type": "contains",
+                    "value": "@lifesg/react-design-system/form"
+                }
+            ]
+        },
+        {
+            "id": 7,
+            "prompt": "Build a Form.Select dropdown using @lifesg/react-design-system v4. The options are country objects: { value: 'sg', label: 'Singapore' }, { value: 'my', label: 'Malaysia' }. When the user selects an option, the closed selector should show the country name (e.g. 'Singapore'), not the code (e.g. 'sg').",
+            "expected_output": "Form.Select with options array, valueExtractor returning opt.value, listExtractor returning opt.label, and displayValueExtractor returning opt.label. Without displayValueExtractor the selector shows the raw value ('sg') instead of the label. All three extractors must be present.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-form-select",
+                    "description": "Uses Form.Select component",
+                    "type": "contains",
+                    "value": "Form.Select"
+                },
+                {
+                    "id": "has-value-extractor",
+                    "description": "Provides valueExtractor",
+                    "type": "contains",
+                    "value": "valueExtractor"
+                },
+                {
+                    "id": "has-list-extractor",
+                    "description": "Provides listExtractor",
+                    "type": "contains",
+                    "value": "listExtractor"
+                },
+                {
+                    "id": "has-display-value-extractor",
+                    "description": "Provides displayValueExtractor to show label not raw value in closed selector",
+                    "type": "contains",
+                    "value": "displayValueExtractor"
+                },
+                {
+                    "id": "extractor-returns-label",
+                    "description": "displayValueExtractor returns the label field, not value",
+                    "type": "contains",
+                    "value": "opt.label"
+                }
+            ]
+        },
+        {
+            "id": 8,
+            "prompt": "I need a read-only summary table showing 3 rows of data: Name, Status, and Date. No sorting or row selection needed. Use @lifesg/react-design-system.",
+            "expected_output": "Uses Table.Container wrapping Table with Table.Head, Table.Body, Table.Row, Table.HeaderCell and Table.Cell sub-components. Imports from @lifesg/react-design-system/table. Does not use DataTable (overkill for read-only data). Does not use raw <table> HTML.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-table-container",
+                    "description": "Wraps table in Table.Container for scroll behaviour",
+                    "type": "contains",
+                    "value": "Table.Container"
+                },
+                {
+                    "id": "uses-table-head",
+                    "description": "Uses Table.Head for header row",
+                    "type": "contains",
+                    "value": "Table.Head"
+                },
+                {
+                    "id": "uses-table-cell",
+                    "description": "Uses Table.Cell for data cells",
+                    "type": "contains",
+                    "value": "Table.Cell"
+                },
+                {
+                    "id": "correct-import",
+                    "description": "Imports Table from the table subpath",
+                    "type": "contains",
+                    "value": "@lifesg/react-design-system/table"
+                },
+                {
+                    "id": "no-datatable",
+                    "description": "Does not use DataTable for a simple read-only table",
+                    "type": "not_contains",
+                    "value": "DataTable"
+                },
+                {
+                    "id": "no-raw-table",
+                    "description": "Does not use raw <table> HTML elements",
+                    "type": "not_contains",
+                    "value": "<table"
+                }
+            ]
+        },
+        {
+            "id": 9,
+            "prompt": "Add a back arrow icon and a settings gear icon to a page header using @lifesg/react-design-system. The back arrow should be on the left, the gear on the right.",
+            "expected_output": "Imports icons from @lifesg/react-icons subpaths: ArrowLeftIcon from @lifesg/react-icons/arrow-left and GearIcon from @lifesg/react-icons/gear. Does not import from @lifesg/react-design-system directly for icons. Does not use MUI icons when react-icons has a suitable match. Icon component names end in 'Icon'.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "imports-from-react-icons",
+                    "description": "Imports from @lifesg/react-icons, not the main DS package",
+                    "type": "contains",
+                    "value": "@lifesg/react-icons"
+                },
+                {
+                    "id": "uses-arrow-icon",
+                    "description": "Uses a named arrow icon (not a custom SVG)",
+                    "type": "contains",
+                    "value": "ArrowLeft"
+                },
+                {
+                    "id": "uses-gear-icon",
+                    "description": "Uses GearIcon for settings",
+                    "type": "contains",
+                    "value": "Gear"
+                },
+                {
+                    "id": "icon-names-end-in-icon",
+                    "description": "Icon component names end in Icon suffix",
+                    "type": "contains",
+                    "value": "Icon"
+                },
+                {
+                    "id": "no-custom-svg",
+                    "description": "Does not inline a custom <svg> instead of using the package",
+                    "type": "not_contains",
+                    "value": "<svg"
+                }
+            ]
+        },
+        {
+            "id": 10,
+            "prompt": "I have a form with a Yes/No question 'Do you agree to the terms?' and a filter panel with a 'Remember me' tick-box. Which DS components should I use for each? Use @lifesg/react-design-system v4.",
+            "expected_output": "Yes/No question in a form: use Toggle with type='yes' and type='no' (not RadioButton, not Checkbox). Filter tick-box: use Checkbox (not Toggle). Toggle is for card-style form selections; Checkbox is for compact boolean filter/table use.",
+            "files": [],
+            "assertions": [
+                {
+                    "id": "uses-toggle-for-yes-no",
+                    "description": "Uses Toggle for the yes/no form question",
+                    "type": "contains",
+                    "value": "Toggle"
+                },
+                {
+                    "id": "toggle-type-yes",
+                    "description": "Toggle uses type='yes' and type='no'",
+                    "type": "contains",
+                    "value": "type=\"yes\""
+                },
+                {
+                    "id": "uses-checkbox-for-filter",
+                    "description": "Uses Checkbox for the compact filter tick-box",
+                    "type": "contains",
+                    "value": "Checkbox"
+                },
+                {
+                    "id": "no-radio-for-yes-no",
+                    "description": "Does not use RadioButton for the binary yes/no question",
+                    "type": "not_contains",
+                    "value": "RadioButton"
+                }
+            ]
         }
     ]
 }
diff --git a/skills/fds-build/resources/v3/components/accordion.md b/skills/fds-build/resources/v3/components/accordion.md
new file mode 100644
index 0000000000..b758a4edf2
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/accordion.md
@@ -0,0 +1,321 @@
+# Accordion
+
+Import: `import { Accordion } from "@lifesg/react-design-system/accordion"`
+
+## When to use
+
+Use to reduce visual complexity when users don't need all content at once — FAQs, supplementary details, or grouped settings. Do not use when all content needs to be visible at the same time.
+
+## Composition
+
+```
+Accordion                    ← container, manages expand/collapse state
+├── Accordion.Item           ← expandable panel
+├── Accordion.Item
+└── Accordion.Item
+```
+
+All children must be `Accordion.Item`. Do not place other elements directly inside `Accordion`.
+
+## Variants
+
+| `type` on `Accordion.Item` | Usage                                |
+| -------------------------- | ------------------------------------ |
+| `"default"`                | Standard title size — default        |
+| `"small"`                  | Compact title size for dense layouts |
+
+## Usage
+
+```tsx
+import { Accordion } from "@lifesg/react-design-system/accordion";
+
+// Multiple items — all collapsed by default
+const FaqSection = () => (
+    <Accordion
+        title="Frequently asked questions"
+        headingLevel={2}
+        initialDisplay="collapse-all"
+        enableExpandAll
+    >
+        <Accordion.Item title="What is this service?">
+            <p>This service lets you manage your account settings.</p>
+        </Accordion.Item>
+        <Accordion.Item title="How do I reset my password?">
+            <p>Click "Forgot password" on the login page.</p>
+        </Accordion.Item>
+        {/* JSX in title must be wrapped in <span> — title renders inside <button> */}
+        <Accordion.Item
+            title={
+                <span>
+                    Can I use <strong>bold text</strong> in a title?
+                </span>
+            }
+        >
+            <p>Yes — wrap JSX title content in a span.</p>
+        </Accordion.Item>
+    </Accordion>
+);
+
+// Controlled item — force one item open regardless of Expand All state
+const ControlledExample = () => (
+    <Accordion initialDisplay="collapse-all">
+        <Accordion.Item title="Always expanded" expanded={true}>
+            <p>This item ignores the parent initialDisplay.</p>
+        </Accordion.Item>
+        <Accordion.Item title="Follows parent state">
+            <p>This item collapses with the rest.</p>
+        </Accordion.Item>
+    </Accordion>
+);
+```
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionItemHandle`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionItemHandle`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionItemHandle`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionItemHandle`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Rules
+
+-   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
+-   Use `Accordion.Item` for all panels — do not place content directly in `Accordion`.
+-   Wrap custom JSX titles in `<span>` — item title renders inside a `<button>` and block elements are invalid inside it.
+-   Individual `expanded` on `Accordion.Item` overrides Expand All / Collapse All for that item.
+-   Use `initialDisplay="collapse-all"` when content is supplementary and users are unlikely to need it immediately.
+
+## Anti-patterns
+
+-   Placing content directly inside `Accordion` without `Accordion.Item` wrappers.
+-   Using Accordion when all content should be visible at once — use a plain layout instead.
+-   Using block elements (e.g. `<div>`) directly as `title` in `Accordion.Item` — wrap in `<span>`.
+-   Skipping `headingLevel` when `title` is set — this breaks heading hierarchy for screen readers.
diff --git a/skills/fds-build/resources/v3/components/alert.md b/skills/fds-build/resources/v3/components/alert.md
new file mode 100644
index 0000000000..df2769f74e
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/alert.md
@@ -0,0 +1,114 @@
+# Alert
+
+Import: `import { Alert } from "@lifesg/react-design-system/alert"`
+
+## When to use
+
+Use to call out important information within page sections — warnings before a user starts a task, informational notes relevant to a specific section, or non-transient status messages. Not for form validation errors (use form error patterns instead).
+
+## Variants
+
+| `type`          | When to use                                |
+| --------------- | ------------------------------------------ |
+| `"success"`     | Action completed successfully              |
+| `"error"`       | Action failed or system error              |
+| `"warning"`     | User should proceed with caution           |
+| `"info"`        | Neutral informational message              |
+| `"description"` | Descriptive content with no status meaning |
+
+## Usage
+
+```tsx
+import { Alert } from "@lifesg/react-design-system/alert";
+
+<Alert type="warning" showIcon role="alert">
+    Your session will expire in 5 minutes. Save your work to avoid losing
+    progress.
+</Alert>;
+```
+
+## Props
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Props
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Props — `AlertProps`
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Props — `AlertProps`
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Props — `AlertProps`
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Props — `AlertProps`
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Rules
+
+-   Always use `showIcon` — icons provide immediate visual recognition of alert severity.
+-   Use `actionLink` for recoverable errors (retry, undo, view details).
+-   Set `role` based on how the alert appears: `"alert"` for dynamic alerts triggered by user action, `"status"` for background status updates, omit for static content visible on page load.
+-   Use `maxCollapsedHeight` to avoid long content overwhelming the layout.
+-   `role` is not set automatically — set `role="alert"` for dynamic alerts, `role="status"` for background updates, and omit for static content.
+
+## Anti-patterns
+
+-   Using Alert for form field validation errors — use inline form error patterns instead.
+-   Omitting `role` on dynamically injected alerts — screen readers will not announce them.
+-   Using `type="description"` with `showIcon` — description has no semantic status meaning.
diff --git a/skills/fds-build/resources/v3/components/animation.md b/skills/fds-build/resources/v3/components/animation.md
new file mode 100644
index 0000000000..07feac889d
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/animation.md
@@ -0,0 +1,63 @@
+# Animation
+
+Import: `import { Animation } from "@lifesg/react-design-system/animation"`
+
+## Props — `AnimationProps`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `id`        | `string` | —       | —           |
+| `className` | `string` | —       | —           |
+
+## Props — `CustomisableAnimationProps`
+
+| Prop        | Type                                                                      | Default | Description                                              |
+| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `id`        | `string`                                                                  | —       | —                                                        |
+| `className` | `string`                                                                  | —       | —                                                        |
+| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
+
+## Props — `AnimationProps`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `id`        | `string` | —       | —           |
+| `className` | `string` | —       | —           |
+
+## Props — `CustomisableAnimationProps`
+
+| Prop        | Type                                                                      | Default | Description                                              |
+| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `id`        | `string`                                                                  | —       | —                                                        |
+| `className` | `string`                                                                  | —       | —                                                        |
+| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
+
+## Props — `AnimationProps`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `id`        | `string` | —       | —           |
+| `className` | `string` | —       | —           |
+
+## Props — `CustomisableAnimationProps`
+
+| Prop        | Type                                                                      | Default | Description                                              |
+| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `id`        | `string`                                                                  | —       | —                                                        |
+| `className` | `string`                                                                  | —       | —                                                        |
+| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
+
+## Props — `AnimationProps`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `id`        | `string` | —       | —           |
+| `className` | `string` | —       | —           |
+
+## Props — `CustomisableAnimationProps`
+
+| Prop        | Type                                                                      | Default | Description                                              |
+| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `id`        | `string`                                                                  | —       | —                                                        |
+| `className` | `string`                                                                  | —       | —                                                        |
+| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
diff --git a/skills/fds-build/resources/v3/components/avatar.md b/skills/fds-build/resources/v3/components/avatar.md
new file mode 100644
index 0000000000..bb553c1561
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/avatar.md
@@ -0,0 +1,45 @@
+# Avatar
+
+Import: `import { Avatar } from "@lifesg/react-design-system/avatar"`
+
+## Props
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
+
+## Props
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
+
+## Props — `AvatarProps`
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
+
+## Props — `AvatarProps`
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
+
+## Props — `AvatarProps`
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
+
+## Props — `AvatarProps`
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
diff --git a/skills/fds-build/resources/v3/components/badge.md b/skills/fds-build/resources/v3/components/badge.md
new file mode 100644
index 0000000000..14a93a1fd0
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/badge.md
@@ -0,0 +1,68 @@
+# Badge
+
+Import: `import { Badge } from "@lifesg/react-design-system/badge"`
+
+## Props
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Props
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Props — `BadgeProps`
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Props — `BadgeProps`
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Props — `BadgeProps`
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Props — `BadgeProps`
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Rules
+
+-   `count` only applies to `"number"`, `"number-with-border"`, and `"square-number"` variants.
+-   When `children` is provided, the badge overlays the top-right corner of the child element.
diff --git a/skills/fds-build/resources/v3/components/box-container.md b/skills/fds-build/resources/v3/components/box-container.md
new file mode 100644
index 0000000000..a8f27fbcd0
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/box-container.md
@@ -0,0 +1,176 @@
+# BoxContainer
+
+Import: `import { BoxContainer } from "@lifesg/react-design-system/box-container"`
+
+## When to use
+
+Use for a single collapsible panel displaying form data or structured content — typically a named section within a form or detail view. Supports an optional header action and a status indicator to flag section-level errors or warnings.
+
+## Sub-components
+
+### BoxContainerSubComponentTestIds
+
+| Prop               | Type     | Description                            |
+| ------------------ | -------- | -------------------------------------- |
+| `title`            | `string` | Test id for the header title           |
+| `displayStateIcon` | `string` | Test id for the display state icon     |
+| `handle`           | `string` | Test id for the expand/collapse handle |
+
+## Variants
+
+| `displayState` | When to use                                |
+| -------------- | ------------------------------------------ |
+| `"default"`    | Normal state — no icon                     |
+| `"error"`      | Section has validation errors              |
+| `"warning"`    | Section has a warning that needs attention |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Rules
+
+-   Use `displayState` to indicate section-level status — not as a substitute for inline field errors.
+-   Use `callToActionComponent` for section-level actions only — not for form submission buttons.
+-   Use `collapsible={false}` when the content must always be visible.
+-   Use `clickableHeader` to make the full header row the expand/collapse trigger — improves usability for dense layouts.
+
+## Anti-patterns
+
+-   Using `displayState="error"` instead of inline form field errors — `displayState` signals section-level status only.
+-   Using `callToActionComponent` for form submission — use a dedicated submit button outside the container.
+-   Nesting BoxContainer inside another BoxContainer.
diff --git a/skills/fds-build/resources/v3/components/breadcrumb.md b/skills/fds-build/resources/v3/components/breadcrumb.md
new file mode 100644
index 0000000000..a3f549cb30
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/breadcrumb.md
@@ -0,0 +1,157 @@
+# Breadcrumb
+
+Import: `import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb"`
+
+## When to use
+
+Use on pages within a multi-level hierarchy to help users navigate to parent pages.
+
+Do not use on:
+
+-   The home page
+-   Pages with no parent
+-   Focused flows such as forms or wizards
+
+## Variants
+
+| `separatorStyle`      | When to use              |
+| --------------------- | ------------------------ |
+| `"chevron"` (default) | Standard pages           |
+| `"slash"`             | Alternative visual style |
+
+## Usage
+
+```tsx
+import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
+
+<Breadcrumb
+    links={[
+        { children: "Home", href: "/" },
+        { children: "Services", href: "/services" },
+        { children: "Apply" },
+    ]}
+/>;
+```
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Rules
+
+-   Always place the current page last in `links` — omit `href` on the last item.
+-   Keep breadcrumb trails to 4 items or fewer; 5 or more items automatically collapse the middle into an overflow menu.
+-   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
+-   The last item in `links` is rendered as the current page (non-clickable, `aria-current="page"`). Omit `href` on the last item.
+-   When 5 or more items are present, middle items automatically collapse into an overflow menu.
+-   On mobile, breadcrumbs scroll horizontally with a fade effect at the edges controlled by `fadeColor` and `fadePosition`.
+
+## Anti-patterns
+
+-   Do not add `href` to the last breadcrumb item — it represents the current page and must not be clickable.
+-   Do not use breadcrumbs on single-level or flat navigation structures.
+-   Do not use breadcrumbs inside forms or wizard flows.
diff --git a/skills/fds-build/resources/v3/components/button-with-icon.md b/skills/fds-build/resources/v3/components/button-with-icon.md
new file mode 100644
index 0000000000..8feb5f2a5f
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/button-with-icon.md
@@ -0,0 +1,19 @@
+# ButtonWithIcon
+
+> **Not available in v4.** If you are building for v4, do not use this component.
+
+Import: `import { ButtonWithIcon } from "@lifesg/react-design-system/button-with-icon"`
+
+## Sub-components
+
+| Sub-component            | When to use                    |
+| ------------------------ | ------------------------------ |
+| `ButtonWithIcon.Default` | Standard size                  |
+| `ButtonWithIcon.Small`   | Dense layouts, toolbars        |
+| `ButtonWithIcon.Large`   | Only when explicitly specified |
+
+## Rules
+
+-   `styleType` is mandatory.
+-   Use `iconPosition="right"` only for directional actions (next, continue, external link).
+-   Combine `loading` and `disabled` during async operations to prevent double-submission.
diff --git a/skills/fds-build/resources/v3/components/button.md b/skills/fds-build/resources/v3/components/button.md
new file mode 100644
index 0000000000..6407316c2d
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/button.md
@@ -0,0 +1,136 @@
+# Button
+
+Import: `import { Button } from "@lifesg/react-design-system/button"`
+
+## When to use
+
+```
+┌─ "Which button component?"
+│
+├─ Icon only (no text)?
+│  └─ IconButton — aria-label required
+│
+├─ Text + icon together?
+│  └─ ButtonWithIcon — icon left (default) or right for directional actions
+│
+└─ Text only?
+   └─ Button
+```
+
+## Sub-components
+
+| Sub-component    | When to use                                             |
+| ---------------- | ------------------------------------------------------- |
+| `Button.Default` | Standard size — use for all buttons including hero CTAs |
+| `Button.Small`   | Dense layouts, toolbars                                 |
+| `Button.Large`   | Only when explicitly specified — do not use by default  |
+
+## Variants
+
+| `styleType`   | When to use                           |
+| ------------- | ------------------------------------- |
+| `"default"`   | Main action on the page               |
+| `"secondary"` | Cancel, go back, alternative option   |
+| `"light"`     | On colored or dark backgrounds        |
+| `"link"`      | Tertiary, de-emphasized inline action |
+
+Add `danger` for destructive actions (delete, remove) — applies to any `styleType`.
+
+## Usage
+
+```tsx
+import { Button } from "@lifesg/react-design-system/button";
+
+<Button.Default styleType="default" onClick={() => {}}>
+    Save changes
+</Button.Default>;
+```
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Rules
+
+-   `styleType` is mandatory.
+-   Use sentence case for all labels — "Save changes" not "Save Changes".
+-   Use concise verb + noun labels — avoid "OK", "Yes", "Click here".
+-   Do not use `Button.Large` unless explicitly required — `Button.Default` is correct for hero CTAs.
+-   Combine `loading` and `disabled` during async operations to prevent double-submission.
+-   Never use raw `<button>` elements — always use design system button components.
+-   Do not nest buttons inside buttons or links.
+-   `danger` applies to any `styleType`.
+
+## Anti-patterns
+
+-   Do not use `Button.Large` as a default choice — it is a special case only.
+-   Do not use vague labels like "OK" or "Yes" — labels must describe the action.
+-   Do not use `loading` alone without also setting `disabled`.
diff --git a/skills/fds-build/resources/v3/components/calendar.md b/skills/fds-build/resources/v3/components/calendar.md
new file mode 100644
index 0000000000..9c32e3bcd0
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/calendar.md
@@ -0,0 +1,259 @@
+# Calendar
+
+Import: `import { Calendar } from "@lifesg/react-design-system/calendar"`
+
+## When to use
+
+-   Displaying an inline date picker when a full-page or panel calendar is preferable over a dropdown.
+-   Use `variant="single"` for standard single-date selection.
+-   Use `variant="multi"` when the user must pick multiple non-contiguous dates (e.g. recurring appointments).
+
+## Usage
+
+### variant="single" — single date selection
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "@lifesg/react-design-system/calendar";
+
+const AppointmentCalendar = () => {
+    const [date, setDate] = useState("2024-06-15");
+
+    return (
+        <Calendar
+            variant="single"
+            value={date}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            onChange={(selected) => setDate(selected)}
+        />
+    );
+};
+```
+
+### variant="multi" — multiple date selection
+
+Note `values` (plural) and `onChange` receives the full updated array.
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "@lifesg/react-design-system/calendar";
+
+const MultiDateCalendar = () => {
+    const [dates, setDates] = useState<string[]>([]);
+
+    return (
+        <Calendar
+            variant="multi"
+            values={dates}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            maxSelectable={5}
+            onChange={(selected) => setDates(selected)}
+        />
+    );
+};
+```
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                           |
+| ------- | -------- | ------------------------------------- |
+| `year`  | `number` | Current visible year in `YYYY` format |
+| `month` | `number` | Current visible month, 1–12           |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarProps`
+
+| Prop                       | Type                                  | Default    | Description                                                                                           |
+| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —          | —                                                                                                     |
+| `id`                       | `string`                              | —          | —                                                                                                     |
+| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
+| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
+| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
+| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
+| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarProps`
+
+| Prop                       | Type                                  | Default    | Description                                                                                           |
+| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —          | —                                                                                                     |
+| `id`                       | `string`                              | —          | —                                                                                                     |
+| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
+| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
+| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
+| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
+| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarProps`
+
+| Prop                       | Type                                  | Default    | Description                                                                                           |
+| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —          | —                                                                                                     |
+| `id`                       | `string`                              | —          | —                                                                                                     |
+| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
+| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
+| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
+| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
+| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarProps`
+
+| Prop                       | Type                                  | Default    | Description                                                                                           |
+| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —          | —                                                                                                     |
+| `id`                       | `string`                              | —          | —                                                                                                     |
+| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
+| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
+| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
+| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
+| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
+
+## Rules
+
+-   `variant="single"` uses `value: string` and `onChange: (date: string) => void`.
+-   `variant="multi"` uses `values: string[]` and `onChange: (dates: string[]) => void` — note the plural prop names.
+-   All dates must be in `YYYY-MM-DD` format.
+-   Use `minDate`/`maxDate` to constrain selectable range.
+-   Use `disabledDates` for specific non-selectable dates within the allowed range.
+
+## Anti-patterns
+
+-   Do not pass `value` to `variant="multi"` — the prop is `values` (plural).
+-   Do not pass `values` to `variant="single"` — the prop is `value` (singular).
+-   Do not use Calendar inside a form for simple date entry — prefer `Form.DateInput` for that pattern.
diff --git a/docs/skills/fds-build/resources/v3/components/card.md b/skills/fds-build/resources/v3/components/card.md
similarity index 82%
rename from docs/skills/fds-build/resources/v3/components/card.md
rename to skills/fds-build/resources/v3/components/card.md
index 8327d37526..5eb6a44b93 100644
--- a/docs/skills/fds-build/resources/v3/components/card.md
+++ b/skills/fds-build/resources/v3/components/card.md
@@ -26,14 +26,6 @@ const CardBody = styled.div`
 </Card>;
 ```
 
-## Props
-
-Inherits all standard `HTMLDivElement` attributes.
-
-| Prop          | Type     | Default | Description                       |
-| ------------- | -------- | ------- | --------------------------------- |
-| `data-testid` | `string` | —       | Test identifier for the component |
-
 ## Rules
 
 -   Card has no default padding — use `spacing-24` internal padding and `spacing-16` gap between content items as the standard.
diff --git a/skills/fds-build/resources/v3/components/checkbox.md b/skills/fds-build/resources/v3/components/checkbox.md
new file mode 100644
index 0000000000..9fbbc7826b
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/checkbox.md
@@ -0,0 +1,98 @@
+# Checkbox
+
+Import: `import { Checkbox } from "@lifesg/react-design-system/checkbox"`
+
+## When to use
+
+-   Simple boolean selections where a compact tick-box is sufficient.
+-   Table row selection (single or "select all").
+-   Filter lists with multiple independent options.
+-   "Select all" patterns using the `indeterminate` state.
+
+Prefer `Toggle` over `Checkbox` when building form inputs that need a visible card-style label container.
+
+## Variants
+
+| `displaySize` | When to use                    |
+| ------------- | ------------------------------ |
+| `"default"`   | Standard use                   |
+| `"small"`     | Dense layouts, inline controls |
+
+## Usage
+
+```tsx
+import { Checkbox } from "@lifesg/react-design-system/checkbox";
+
+<label>
+    <Checkbox checked={agreed} onChange={(e) => {}} />I agree to the terms and
+    conditions
+</label>;
+```
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Rules
+
+-   Always pair with a visible label — wrap in `<label>` or use `aria-label`.
+-   Use `indeterminate` for "select all" controls when only some items in a list are selected — not as a permanent state.
+-   Use the same `name` attribute when grouping checkboxes in a form.
+-   No dedicated `disabled` prop — use the inherited `disabled` from `InputHTMLAttributes`, or `focusableWhenDisabled` to retain focus while blocking interaction.
+-   `indeterminate` is a visual state; manage controlled `checked` separately.
+
+## Anti-patterns
+
+-   Do not use `indeterminate` as a permanent or final state — it is a transitional indicator only.
+-   Do not use `Checkbox` alone without a label — always provide accessible text.
+-   Do not use `Checkbox` when only one option from a set can be selected — use `RadioButton` instead.
diff --git a/skills/fds-build/resources/v3/components/countdown-timer.md b/skills/fds-build/resources/v3/components/countdown-timer.md
new file mode 100644
index 0000000000..dd6f2c040c
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/countdown-timer.md
@@ -0,0 +1,71 @@
+# CountdownTimer
+
+Import: `import { CountdownTimer } from "@lifesg/react-design-system/countdown-timer"`
+
+## Props
+
+| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
+| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
+| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
+| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
+| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
+| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
+| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
+| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
+| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
+| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
+| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
+| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
+| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
+
+## Props
+
+| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
+| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
+| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
+| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
+| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
+| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
+| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
+| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
+| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
+| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
+| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
+| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
+| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
+
+## Props
+
+| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
+| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
+| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
+| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
+| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
+| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
+| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
+| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
+| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
+| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
+| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
+| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
+| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
+
+## Props
+
+| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
+| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
+| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
+| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
+| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
+| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
+| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
+| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
+| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
+| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
+| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
+| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
+| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
diff --git a/skills/fds-build/resources/v3/components/data-table.md b/skills/fds-build/resources/v3/components/data-table.md
new file mode 100644
index 0000000000..33586184db
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/data-table.md
@@ -0,0 +1,309 @@
+# DataTable
+
+Import: `import { DataTable } from "@lifesg/react-design-system/data-table"`
+
+## When to use
+
+-   Displaying tabular data with optional sorting, row selection, and custom cell rendering.
+-   Use `enableMultiSelect` + `enableSelectAll` when users need to act on multiple rows at once.
+
+## Usage
+
+### Column definitions, sorting, selection, and custom cell rendering
+
+```tsx
+import { useState, useMemo } from "react";
+import {
+    DataTable,
+    SortIndicatorsProps,
+} from "@lifesg/react-design-system/data-table";
+import { Pill } from "@lifesg/react-design-system/pill";
+
+const rows = [
+    { id: "1", name: "Alice", status: "active", score: 90 },
+    { id: "2", name: "Bob", status: "inactive", score: 72 },
+    { id: "3", name: "Carol", status: "active", score: 85 },
+];
+
+const Example = () => {
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [sortState, setSortState] = useState<SortIndicatorsProps>({
+        score: "desc",
+    });
+
+    // onSelect: toggle a single row id
+    const handleSelect = (rowId: string, isSelected: boolean) => {
+        setSelectedIds((prev) =>
+            isSelected ? [...prev, rowId] : prev.filter((id) => id !== rowId)
+        );
+    };
+
+    // onSelectAll: isAllSelected=true means "clear all"; false means "select all"
+    const handleSelectAll = (isAllSelected: boolean) => {
+        setSelectedIds(isAllSelected ? [] : rows.map((r) => r.id));
+    };
+
+    const handleHeaderClick = (fieldKey: string) => {
+        if (fieldKey === "score") {
+            setSortState({ score: sortState.score === "asc" ? "desc" : "asc" });
+        }
+    };
+
+    const sorted = useMemo(
+        () =>
+            [...rows].sort((a, b) =>
+                sortState.score === "asc"
+                    ? a.score - b.score
+                    : b.score - a.score
+            ),
+        [sortState]
+    );
+
+    return (
+        <DataTable
+            headers={[
+                { fieldKey: "name", label: "Name", keyColumn: true },
+                { fieldKey: "status", label: "Status" },
+                { fieldKey: "score", label: "Score", clickable: true },
+            ]}
+            rows={sorted.map((row) => ({
+                ...row,
+                // custom cell: render status as a Pill
+                status: <Pill type="outline">{row.status}</Pill>,
+            }))}
+            selectedIds={selectedIds}
+            disabledIds={["2"]}
+            sortIndicators={sortState}
+            enableMultiSelect
+            enableSelectAll
+            onSelect={handleSelect}
+            onSelectAll={handleSelectAll}
+            onHeaderClick={handleHeaderClick}
+        />
+    );
+};
+```
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## HeaderItemProps
+
+| Prop          | Type                        | Default | Description                                                            |
+| ------------- | --------------------------- | ------- | ---------------------------------------------------------------------- |
+| `fieldKey` \* | `string`                    | —       | Key name in the row item object                                        |
+| `label` \*    | `string \| React.ReactNode` | —       | Display label for the column header                                    |
+| `clickable`   | `boolean`                   | —       | If true, `onHeaderClick` is called when the cell is clicked            |
+| `style`       | `CSSProperties`             | —       | Custom styles for the column header cell                               |
+| `keyColumn`   | `boolean`                   | —       | Marks this column as descriptive for screen reader row checkbox labels |
+
+## RowProps
+
+| Prop         | Type                                                                           | Default | Description                             |
+| ------------ | ------------------------------------------------------------------------------ | ------- | --------------------------------------- |
+| `id` \*      | `string`                                                                       | —       | Row id                                  |
+| `[fieldKey]` | `string \| number \| React.ReactNode \| (row, renderProps) => React.ReactNode` | —       | Other properties on the row item object |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Rules
+
+-   Each row object must have a unique `id: string` field.
+-   `selectedIds` and `disabledIds` are arrays of row `id` strings — manage them in external state.
+-   `onSelect(rowId, isSelected)` fires per row; toggle the id into/out of your `selectedIds` array.
+-   `onSelectAll(isAllSelected)` fires when the header checkbox is clicked; `isAllSelected` is `true` when the action should clear all selections (the parameter name is inverted — see example).
+-   For sortable columns, set `clickable: true` on the header and handle `onHeaderClick(fieldKey)`.
+-   Custom cell rendering: set a row field to a `ReactNode` or a render function `(row, renderProps) => ReactNode`.
+
+## Anti-patterns
+
+-   Do not derive `selectedIds` from row data alone without external state — the table is uncontrolled for selection without it.
+-   Do not omit `id` on row objects — selection and disabled logic will break silently.
+-   Do not add `clickable: true` to a header without wiring `onHeaderClick` — clicks will silently do nothing.
diff --git a/skills/fds-build/resources/v3/components/date-navigator.md b/skills/fds-build/resources/v3/components/date-navigator.md
new file mode 100644
index 0000000000..ddba7852ef
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/date-navigator.md
@@ -0,0 +1,115 @@
+# DateNavigator
+
+Import: `import { DateNavigator } from "@lifesg/react-design-system/date-navigator"`
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Rules
+
+-   Only override `dropdownRootNode` if you need the dropdown to share a stacking context with a scroll container — may cause z-index issues.
diff --git a/skills/fds-build/resources/v3/components/divider.md b/skills/fds-build/resources/v3/components/divider.md
new file mode 100644
index 0000000000..5db1ba48ed
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/divider.md
@@ -0,0 +1,103 @@
+# Divider
+
+Import: `import { Divider } from "@lifesg/react-design-system/divider"`
+
+## Props
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Props
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Props — `DividerProps`
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Props — `DividerProps`
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Props — `DividerProps`
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Props — `DividerProps`
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Rules
+
+-   `mobileCols`, `tabletCols`, `desktopCols` follow the same semantics as `Layout.ColDiv` — see ColDiv docs for details.
diff --git a/skills/fds-build/resources/v3/components/drawer.md b/skills/fds-build/resources/v3/components/drawer.md
new file mode 100644
index 0000000000..4875195819
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/drawer.md
@@ -0,0 +1,139 @@
+# Drawer
+
+Import: `import { Drawer } from "@lifesg/react-design-system/drawer"`
+
+## When to use
+
+Use to show supplementary content or actions without navigating away from the current page — for example, filter panels or detail views.
+
+Do not use for:
+
+-   Primary forms that require focused attention
+-   Flows that need the full viewport
+
+## Usage
+
+```tsx
+import { useState } from "react";
+import { Drawer } from "@lifesg/react-design-system/drawer";
+import { Button } from "@lifesg/react-design-system/button";
+import { Text } from "@lifesg/react-design-system/text";
+
+const FilterDrawer = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+
+    return (
+        <>
+            <Button.Default onClick={() => setShow(true)}>
+                Open filters
+            </Button.Default>
+
+            <Drawer
+                show={show}
+                heading="Filter options"
+                onClose={handleClose}
+                onOverlayClick={handleClose}
+            >
+                <div style={{ padding: "1.5rem" }}>
+                    <Text.H4 style={{ marginBottom: "0.75rem" }}>
+                        Category
+                    </Text.H4>
+                    <Text.Body style={{ marginBottom: "2rem" }}>
+                        Filter content goes here.
+                    </Text.Body>
+                    <Button.Default styleType="secondary" onClick={handleClose}>
+                        Close
+                    </Button.Default>
+                </div>
+            </Drawer>
+        </>
+    );
+};
+```
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Rules
+
+-   Always provide `onClose` so users can dismiss the panel via the close button.
+-   Provide `onOverlayClick` to allow dismissal by clicking outside the panel; set it to the same handler as `onClose` unless the overlay should not close the panel.
+-   Use `heading` to give the drawer a descriptive title for the user and for screen readers.
+-   The drawer slides in from the right edge of the viewport.
+-   Content scrolls independently within the panel when it exceeds the panel height.
+
+## Anti-patterns
+
+-   Do not use the Drawer for full forms — use a dedicated page or Modal instead.
+-   Do not omit `onClose` — users must have a way to dismiss the panel.
diff --git a/skills/fds-build/resources/v3/components/error-display.md b/skills/fds-build/resources/v3/components/error-display.md
new file mode 100644
index 0000000000..52dace764a
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/error-display.md
@@ -0,0 +1,327 @@
+# ErrorDisplay
+
+Import: `import { ErrorDisplay } from "@lifesg/react-design-system/error-display"`
+
+## When to use
+
+Use for full-page or full-section states where the primary content cannot be shown — HTTP errors, empty results, session states, and system messages. It handles illustration, title, description, and action button as a unit.
+
+Do not build custom error pages with raw Typography + Button — always use `ErrorDisplay` so illustrations and copy stay consistent across products.
+
+## Variants
+
+| `type`                          | When to use                                                      |
+| ------------------------------- | ---------------------------------------------------------------- |
+| `"no-item-found"`               | Search or filter returned no results                             |
+| `"404"`                         | Page not found                                                   |
+| `"403"`                         | Access denied / permission error                                 |
+| `"500"`                         | Internal server error                                            |
+| `"400"`                         | Bad request                                                      |
+| `"408"`                         | Request timeout                                                  |
+| `"502"`                         | Bad gateway                                                      |
+| `"503"`                         | Service unavailable                                              |
+| `"504"`                         | Gateway timeout                                                  |
+| `"maintenance"`                 | Planned downtime — requires `additionalProps.dateString`         |
+| `"inactivity"`                  | Session timeout warning — requires `additionalProps.secondsLeft` |
+| `"logout"`                      | User has been logged out                                         |
+| `"warning"`                     | General warning state                                            |
+| `"confirmation"`                | Action confirmed (e.g. submission complete)                      |
+| `"link-error"`                  | Broken or expired link                                           |
+| `"insufficient-credits"`        | User lacks credits to proceed                                    |
+| `"payment-unsuccessful"`        | Payment failed                                                   |
+| `"transfer-unsuccessful"`       | Transfer failed                                                  |
+| `"unsupported-browser"`         | Browser not supported                                            |
+| `"partially-supported-browser"` | Browser partially supported                                      |
+
+## Usage
+
+```tsx
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+
+{
+    /* No search results */
+}
+<ErrorDisplay
+    type="no-item-found"
+    title="No results found"
+    description="Try adjusting your search or filters."
+    actionButton={{ children: "Clear filters", onClick: handleClear }}
+/>;
+
+{
+    /* Page not found */
+}
+<ErrorDisplay type="404" />;
+
+{
+    /* Maintenance with scheduled date */
+}
+<ErrorDisplay
+    type="maintenance"
+    additionalProps={{ dateString: "1 Jan 2025, 8:00am to 10:00am" }}
+/>;
+
+{
+    /* Session inactivity warning */
+}
+<ErrorDisplay
+    type="inactivity"
+    additionalProps={{ secondsLeft: 60, reminderInterval: 30 }}
+/>;
+```
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## MaintenanceAdditionalAttributes
+
+| Prop            | Type     | Default | Description                            |
+| --------------- | -------- | ------- | -------------------------------------- |
+| `dateString` \* | `string` | —       | Date display for the maintenance error |
+
+## InactivityAdditionalAttributes
+
+| Prop             | Type     | Default | Description                                          |
+| ---------------- | -------- | ------- | ---------------------------------------------------- |
+| `secondsLeft` \* | `number` | —       | Time remaining in seconds for the inactivity display |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Rules
+
+-   Always use `ErrorDisplay` for error/empty states — never build custom error pages with raw components.
+-   `type` is required — it determines the default illustration, title, and description.
+-   Override `title` and `description` only when the defaults don't fit your context.
+-   `actionButton` accepts standard `ButtonProps` — label and `onClick` are the common fields.
+-   `"maintenance"` requires `additionalProps.dateString` to render the scheduled date in the description.
+-   `"inactivity"` requires `additionalProps.secondsLeft` for the countdown display.
+-   For listing pages use `type="no-item-found"` — it has the correct "empty results" illustration.
+
+## Anti-patterns
+
+-   Do not use `imageOnly` unless rendering inside a constrained space where text would overflow.
+-   Do not hardcode error page titles/descriptions that duplicate what `ErrorDisplay` already provides by default.
+-   Do not use `type="warning"` as a generic placeholder — it implies a system-level warning, not a validation message (use `Alert` for that).
diff --git a/skills/fds-build/resources/v3/components/feedback-rating.md b/skills/fds-build/resources/v3/components/feedback-rating.md
new file mode 100644
index 0000000000..769b51d7b4
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/feedback-rating.md
@@ -0,0 +1,126 @@
+# FeedbackRating
+
+Import: `import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating"`
+
+## When to use
+
+Use at the end of a flow or session to collect a star rating and an optional submission action from the user.
+
+## Usage
+
+### Complete controlled pattern
+
+```tsx
+import { useState } from "react";
+import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating";
+
+const RatingWidget = () => {
+    // Track rating separately — onSubmit does NOT receive it
+    const [rating, setRating] = useState(0);
+
+    const handleSubmit = () => {
+        // Read from state, not from onSubmit arguments (there are none)
+        submitFeedback({ stars: rating });
+    };
+
+    return (
+        <FeedbackRating
+            rating={rating}
+            onRatingChange={(value) => setRating(value)}
+            onSubmit={handleSubmit}
+            description="How was your experience?"
+            buttonLabel="Send feedback"
+        />
+    );
+};
+```
+
+**Key gotcha:** `onSubmit` has the signature `() => void` — it carries no payload. The rating value is only available through the `rating` state you control via `onRatingChange`.
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Rules
+
+-   All three props — `rating`, `onRatingChange`, `onSubmit` — are required.
+-   `onSubmit` does **not** receive the rating value. Track the rating separately via `onRatingChange` state and read it inside `onSubmit`.
+-   `rating` must be controlled state; the component does not manage selection internally.
+
+## Anti-patterns
+
+-   Do not try to read the rating from inside `onSubmit`'s arguments — it receives none. Always use the state value set by `onRatingChange`.
diff --git a/skills/fds-build/resources/v3/components/file-download.md b/skills/fds-build/resources/v3/components/file-download.md
new file mode 100644
index 0000000000..95073261ce
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/file-download.md
@@ -0,0 +1,182 @@
+# FileDownload
+
+Import: `import { FileDownload } from "@lifesg/react-design-system/file-download"`
+
+## Sub-components
+
+-   `FileItemProps` — shape of each item in `fileItems`
+
+## FileItemProps
+
+| Prop                    | Type                        | Default | Description                                   |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------- |
+| `id` \*                 | `string`                    | —       | The unique identifier of the file             |
+| `name` \*               | `string`                    | —       | The name of the file                          |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file                     |
+| `filePath` \*           | `string`                    | —       | The remote path of the file                   |
+| `size`                  | `number`                    | —       | The size of the file in bytes                 |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Custom error message when file download fails |
+| `thumbnailImageDataUrl` | `string`                    | —       | The thumbnail of the file                     |
+| `truncateText`          | `boolean`                   | `true`  | Indicates if text should be truncated         |
+| `ready`                 | `boolean`                   | `true`  | Indicates if the file is ready for download   |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Rules
+
+-   `fileItems` and `onDownload` are required.
+-   On `FileItemProps`: `id`, `name`, `mimeType`, and `filePath` are required.
diff --git a/skills/fds-build/resources/v3/components/file-upload.md b/skills/fds-build/resources/v3/components/file-upload.md
new file mode 100644
index 0000000000..cfdb8c14da
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/file-upload.md
@@ -0,0 +1,399 @@
+# FileUpload
+
+Import: `import { FileUpload } from "@lifesg/react-design-system/file-upload"`
+
+## When to use
+
+-   Forms that require users to attach one or more files (e.g. supporting documents, ID scans, images).
+-   Use `sortable` when file order matters for downstream processing.
+-   Use `editableFileItems` when image files need alt-text or descriptions.
+-   Use `readOnly` on review or summary screens to display uploaded files without allowing changes.
+
+## Usage
+
+```tsx
+import { FileUpload } from "@lifesg/react-design-system/file-upload";
+
+<FileUpload
+    title="Upload supporting documents"
+    description="PDF, JPG, or PNG. Max 5 MB each."
+    accept=".pdf,.jpg,.png"
+    fileItems={fileItems}
+    onChange={(files) => {}}
+    onDelete={(item) => {}}
+/>;
+```
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Custom labels
+
+| Prop                             | Type     | Default          | Description                                       |
+| -------------------------------- | -------- | ---------------- | ------------------------------------------------- |
+| `customLabels.uploadButtonLabel` | `string` | `"Upload files"` | Label of the button that triggers the file dialog |
+
+## FileItemProps
+
+| Prop                    | Type                        | Required | Description                              |
+| ----------------------- | --------------------------- | -------- | ---------------------------------------- |
+| `id`                    | `string`                    | Yes      | Unique identifier for the file           |
+| `name`                  | `string`                    | Yes      | File name displayed in the list          |
+| `type`                  | `string`                    | Yes      | MIME type of the file                    |
+| `size`                  | `number`                    | Yes      | File size in bytes                       |
+| `description`           | `string`                    | —        | Alt text or description for the file     |
+| `progress`              | `number`                    | —        | Upload progress from 0 to 1              |
+| `errorMessage`          | `string \| React.ReactNode` | —        | Per-file error message                   |
+| `thumbnailImageDataUrl` | `string`                    | —        | Thumbnail data URL rendered for the file |
+| `truncateText`          | `boolean`                   | `true`   | Truncates long file names                |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Rules
+
+-   Always manage `fileItems` state in the parent — the component does not store files internally.
+-   Always handle `onChange` to convert incoming `File[]` into `FileItemProps[]` and add them to state.
+-   Always handle `onDelete` to remove the corresponding item from state.
+-   Use `maxFiles` to enforce the maximum number of attachments allowed by the backend.
+-   Use `progress` on individual `FileItemProps` to show per-file upload progress.
+-   Use `errorMessage` on individual `FileItemProps` to surface per-file upload errors.
+-   Use the component-level `errorMessage` for overall validation errors (e.g. "At least one file is required").
+-   Use `accept` (inherited from `<input type="file">`) to restrict file types to what the backend accepts.
+
+## Anti-patterns
+
+-   Do not use without wiring `onChange` and `onDelete` — the list will not update.
+-   Do not store files in component state inside the same component that renders `FileUpload` — hoist state to the form level.
+-   Do not skip `id`, `name`, `type`, and `size` in `FileItemProps` — they are required fields.
+-   Do not use `editableFileItems` for non-image files — description editing only applies to images.
diff --git a/skills/fds-build/resources/v3/components/filter.md b/skills/fds-build/resources/v3/components/filter.md
new file mode 100644
index 0000000000..6239669de7
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/filter.md
@@ -0,0 +1,727 @@
+# Filter
+
+Import: `import { Filter } from "@lifesg/react-design-system/filter"`
+
+## When to use
+
+Use on listing pages to narrow a result set. `Filter` automatically switches between a desktop sidebar and a mobile modal at the `lg-max` breakpoint.
+
+## Composition
+
+```
+Filter                                  ← recommended: auto-switches sidebar ↔ modal at lg breakpoint
+├── Filter.Item title="Sort by"         ← section header + collapsible wrapper
+│   └── {RadioButton group}             ← sort options use RadioButton, not Filter.Checkbox
+├── Filter.Item title="Category"
+│   └── Filter.Checkbox                 ← multi-select filter options
+└── Filter.Item title="..."
+    └── Filter.Checkbox
+```
+
+Manual variants (bypass auto-responsive):
+
+```
+Filter.Sidebar                          ← desktop sidebar only
+Filter.Modal                            ← mobile modal only
+Filter.Page                             ← full-page filter (mobile-only flows)
+```
+
+`Filter.Item` is the only valid direct child of `Filter`, `Filter.Sidebar`, or `Filter.Modal`. Use `RadioButton` for sort (single-select); use `Filter.Checkbox` for multi-select filters.
+
+## Variants
+
+| Variant                  | When to use                                                     |
+| ------------------------ | --------------------------------------------------------------- |
+| `<Filter>` (recommended) | Auto-responsive — desktop sidebar + mobile modal                |
+| `<Filter.Sidebar>`       | Desktop sidebar only — when bypassing auto-responsive behaviour |
+| `<Filter.Modal>`         | Mobile modal only — when bypassing auto-responsive behaviour    |
+
+## Usage
+
+### Auto-responsive Filter (recommended)
+
+`Filter` renders a sidebar on desktop and a modal on mobile automatically. Pass children as a function to receive `mode` (`"desktop" | "mobile"`) when you need to render differently per viewport.
+
+```tsx
+import { useState } from "react";
+import { Filter } from "@lifesg/react-design-system/filter";
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+const ListingFilter = () => {
+    const [category, setCategory] = useState("all");
+    const [activeCount, setActiveCount] = useState(0);
+
+    const handleClear = () => {
+        setCategory("all");
+        setActiveCount(0);
+    };
+
+    return (
+        <Filter
+            count={activeCount}
+            onClear={handleClear}
+            onDone={() => {
+                /* commit draft state */
+            }}
+            onDismiss={() => {
+                /* discard draft state */
+            }}
+        >
+            {(mode) => (
+                <>
+                    <Filter.Item title="Category">
+                        <RadioButton
+                            name="category"
+                            value="all"
+                            checked={category === "all"}
+                            onChange={() => setCategory("all")}
+                        >
+                            All
+                        </RadioButton>
+                        <RadioButton
+                            name="category"
+                            value="news"
+                            checked={category === "news"}
+                            onChange={() => setCategory("news")}
+                        >
+                            News
+                        </RadioButton>
+                    </Filter.Item>
+                    <Filter.Item title="Sort by" collapsible={false}>
+                        <RadioButton name="sort" value="newest" defaultChecked>
+                            Newest first
+                        </RadioButton>
+                        <RadioButton name="sort" value="oldest">
+                            Oldest first
+                        </RadioButton>
+                    </Filter.Item>
+                </>
+            )}
+        </Filter>
+    );
+};
+```
+
+Key points:
+
+-   `onDone` and `onDismiss` are mobile-only callbacks; they are ignored on desktop.
+-   `collapsible={false}` on sort sections keeps them always expanded.
+-   `count` drives the active-filter badge in the header.
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Rules
+
+-   `Filter` is the recommended entry point — it automatically renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile.
+-   Always provide `onClear` to reset all filter state in a single handler.
+-   Set `collapsible={false}` on sort sections — sort options should always be visible.
+-   Pass children as a function `(mode) => ReactNode` to render different content on desktop vs mobile.
+-   `Filter.Modal` has a built-in Done button — do not add an external Apply button; use `onDone` to react to it.
+-   Add a keyword search input (`Form.Input`) above the `Filter` component — search is not built into `Filter`.
+-   Use `count` to show the number of active filters in the header.
+-   Use `Filter.Sidebar` or `Filter.Modal` directly only when overriding the responsive behaviour.
+-   `Filter.Page` is used inside `Filter.Modal` only, for drill-down sub-pages.
+
+## Anti-patterns
+
+-   Do not pass `viewport`, `showSearch`, or `searchText` — these props do not exist.
+-   Do not add an external Apply button when using `Filter.Modal` — the built-in Done button handles it.
+-   Do not use `Filter.Sidebar` and `Filter.Modal` separately unless you need to override responsive behaviour — use `Filter` instead.
diff --git a/skills/fds-build/resources/v3/components/footer.md b/skills/fds-build/resources/v3/components/footer.md
new file mode 100644
index 0000000000..07e0f7c2e9
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/footer.md
@@ -0,0 +1,291 @@
+# Footer
+
+Import: `import { Footer } from "@lifesg/react-design-system/footer"`
+
+## When to use
+
+Place at the bottom of every page. Required on all pages.
+
+## Variants
+
+| Variant                 | When to use                                                      |
+| ----------------------- | ---------------------------------------------------------------- |
+| `<Footer />` (no props) | Standard pages — disclaimer links and copyright are theme-driven |
+| `links`                 | Pages with navigational footer links (max 2 columns)             |
+| `copyrightInfo`         | Custom copyright text required                                   |
+| `layout="stretch"`      | Full-width layout — pair with `Navbar layout="stretch"`          |
+
+## Usage
+
+```tsx
+import { Footer } from "@lifesg/react-design-system/footer";
+
+{
+    /* Standard footer — no props required */
+}
+<Footer />;
+
+{
+    /* Footer with navigation links */
+}
+<Footer
+    links={[
+        [
+            { children: "About us", href: "/about" },
+            { children: "Contact", href: "/contact" },
+        ],
+    ]}
+    lastUpdated={new Date("2025-01-01")}
+/>;
+```
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## FooterLinkProps\<T\>
+
+Inherits `TypographyLinkProps`, plus:
+
+| Prop           | Type     | Description                                 |
+| -------------- | -------- | ------------------------------------------- |
+| `data-options` | `T`      | Custom attributes passed to the link object |
+| `data-testid`  | `string` | Test identifier                             |
+
+## DisclaimerLinks
+
+| Prop                  | Type                  | Default    | Description                                                         |
+| --------------------- | --------------------- | ---------- | ------------------------------------------------------------------- |
+| `privacy`             | `TypographyLinkProps` | predefined | Privacy Statement link — text is fixed to "Privacy Statement"       |
+| `termsOfUse`          | `TypographyLinkProps` | predefined | Terms of Use link — text is fixed to "Terms of Use"                 |
+| `reportVulnerability` | `TypographyLinkProps` | predefined | Report Vulnerability link — text is fixed to "Report Vulnerability" |
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Rules
+
+-   Use `<Footer />` with no props for standard pages — do not add unnecessary props.
+-   `layout` must match the Navbar `layout` prop; do not mix `"default"` and `"stretch"`.
+-   Wrap the app in a flex column layout so the footer stays pinned to the bottom on short pages:
+    -   Outer wrapper: `display: flex; flex-direction: column; min-height: 100vh`
+    -   Page content area: `flex: 1`
+-   Disclaimer link text cannot be customised — only `href` and event handlers can be overridden via `disclaimerLinks`.
+-   `copyrightInfo` overrides `lastUpdated` — do not set both.
+-   When `showDownloadAddon` and `showResourceAddon` are both `true`, download takes precedence.
+-   `links` is a 2D array: each inner array is one column of links.
+
+## Anti-patterns
+
+-   Do not omit the flex layout wrapper — the footer will not stick to the bottom on short pages.
+-   Do not pass `children` and `links` together — `children` replaces the top section entirely.
+-   Do not customise disclaimer link labels — they are legally fixed strings.
diff --git a/skills/fds-build/resources/v3/components/form-date-input.md b/skills/fds-build/resources/v3/components/form-date-input.md
new file mode 100644
index 0000000000..539721fcbd
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-date-input.md
@@ -0,0 +1,250 @@
+# Form.DateInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a single date from the user (e.g. date of birth, appointment date, submission deadline).
+-   Any form field that requires calendar-based date selection.
+
+## Usage
+
+```tsx
+const StyledDateInput = styled(Form.DateInput)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper — `max-width` constrains the component without conflicting with its internal `width: 100%`.
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                       |
+| ------- | -------- | --------------------------------- |
+| `year`  | `number` | Currently displayed year (`YYYY`) |
+| `month` | `number` | Currently displayed month (1–12)  |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `YYYY-MM-DD` string.
+-   Use `minDate`/`maxDate` to constrain selectable dates to valid business ranges.
+-   Use `disabledDates` for known blackout dates (e.g. public holidays).
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
+-   Use `readOnly` on review or summary screens where the value should be visible but not editable.
+-   Specify `dropdownRootNode` if the component is inside a scrollable container to prevent the calendar from clipping.
+-   Date strings use `YYYY-MM-DD` format throughout (value, minDate, maxDate, disabledDates, onChange return).
+
+## Anti-patterns
+
+-   Do not use a plain text input for date collection — the picker enforces valid date formats automatically.
+-   Do not set `allowDisabledSelection` unless there is a specific UX reason to allow out-of-range dates.
+-   Do not rely on `error` prop alone without an `errorMessage`; users need descriptive feedback.
+-   Do not use for date-range selection — use `Form.DateRangeInput` instead.
diff --git a/skills/fds-build/resources/v3/components/form-date-range-input.md b/skills/fds-build/resources/v3/components/form-date-range-input.md
new file mode 100644
index 0000000000..02ea7e55dc
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-date-range-input.md
@@ -0,0 +1,326 @@
+# Form.DateRangeInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a start and end date from the user (e.g. leave period, booking period, date range filter).
+-   Use `variant="week"` when the selection must always be a full calendar week.
+-   Use `variant="fixed-range"` when the duration is predetermined (e.g. always 7 days).
+
+## Usage
+
+`onChange` always receives both start and end as `YYYY-MM-DD` strings, even for week and fixed-range variants.
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const LeavePeriodField = () => {
+    const [start, setStart] = useState("");
+    const [end, setEnd] = useState("");
+
+    return (
+        <Form.DateRangeInput
+            label="Leave period"
+            value={start}
+            valueEnd={end}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            onChange={(s, e) => {
+                setStart(s);
+                setEnd(e);
+            }}
+        />
+    );
+};
+```
+
+```tsx
+{
+    /* variant="week" — whole-week selection */
+}
+<Form.DateRangeInput
+    label="Select week"
+    variant="week"
+    value={start}
+    valueEnd={end}
+    onChange={(s, e) => {
+        setStart(s);
+        setEnd(e);
+    }}
+/>;
+
+{
+    /* variant="fixed-range" — valueEnd derived automatically; only store start */
+}
+<Form.DateRangeInput
+    label="14-day quarantine period"
+    variant="fixed-range"
+    numberOfDays={14}
+    value={start}
+    valueEnd={end}
+    onChange={(s, e) => {
+        setStart(s);
+        setEnd(e);
+    }}
+/>;
+```
+
+Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper:
+
+```tsx
+const StyledDateRangeInput = styled(Form.DateRangeInput)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                       |
+| ------- | -------- | --------------------------------- |
+| `year`  | `number` | Currently displayed year (`YYYY`) |
+| `month` | `number` | Currently displayed month (1–12)  |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` (start) and `valueEnd` (end) for controlled usage; `onChange` receives both as `YYYY-MM-DD` strings.
+-   Use `minDate`/`maxDate` to restrict selection to valid business date ranges.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
+-   Use `readOnly` on review screens where the range should be visible but not editable.
+-   Specify `dropdownRootNode` if the component is inside a scrollable container.
+-   `valueEnd` is only relevant for `variant="range"` and `variant="fixed-range"`.
+-   `numberOfDays` only applies when `variant="fixed-range"`.
+
+## Anti-patterns
+
+-   Do not use for single-date selection — use `Form.DateInput` instead.
+-   Do not set `numberOfDays` unless `variant="fixed-range"` is also set.
+-   Do not rely on `error` alone without an `errorMessage`.
+-   Do not allow end date before start date — validate in `onChange` before updating state.
diff --git a/skills/fds-build/resources/v3/components/form-e-signature.md b/skills/fds-build/resources/v3/components/form-e-signature.md
new file mode 100644
index 0000000000..4808458372
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-e-signature.md
@@ -0,0 +1,170 @@
+# Form.ESignature
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Forms that legally require a handwritten signature from the user (e.g. consent forms, declarations, agreements).
+-   Use `description` to guide the user on how to sign (e.g. "Sign within the box using your mouse or touchscreen").
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; the value is a base64-encoded PNG string.
+-   Use `loadingProgress` and `loadingLabel` to indicate server upload progress after the signature is submitted.
+-   Set `errorMessage` when signature validation fails (e.g. canvas is empty on submit).
+-   Use `disabled` when the signature field should be locked (e.g. after submission or in a locked step).
+-   `value` and the `onChange` return value are both base64-encoded PNG strings.
+-   `loadingProgress` and `loadingLabel` are used to show upload progress after the signature is captured.
+
+## Anti-patterns
+
+-   Do not use for typed signatures or checkbox confirmations — this component is for handwritten drawing input only.
+-   Do not store the raw base64 string in a URL parameter or cookie — it is large; use server-side storage.
+-   Do not omit `description` — users need guidance on where and how to draw their signature.
diff --git a/skills/fds-build/resources/v3/components/form-input.md b/skills/fds-build/resources/v3/components/form-input.md
new file mode 100644
index 0000000000..89c8768e03
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-input.md
@@ -0,0 +1,160 @@
+# Form.Input
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use for any single-line text entry inside a form. Always prefer `Form.Input` over the bare `Input` component when a label or error message is required.
+
+## Variants
+
+| `styleType`            | When to use                                                                                 |
+| ---------------------- | ------------------------------------------------------------------------------------------- |
+| `"bordered"` (default) | Standard form fields — provides clear affordance                                            |
+| `"no-border"`          | Inline editing or contexts where a surrounding container already provides visual separation |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+<Form.Input
+    label="Full name"
+    placeholder="Enter your name"
+    value={value}
+    onChange={(e) => {}}
+/>;
+```
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Set `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
+-   Use `readOnly` on review or summary screens — not `disabled`. Disabled implies interaction is unavailable; read-only implies the field is intentionally non-editable in context.
+-   Use `allowClear` for optional fields and search-like inputs; pair with `onClear` to reset controlled value.
+-   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
+-   Provide `errorMessage` rather than `error` alone — the string drives both the visual state and the accessible error text.
+-   Use `label` as a plain string for simple labels; use `FormLabelProps` (with `subtitle` or `addon`) only when additional context is needed.
+-   `error` is redundant when `errorMessage` is provided — `errorMessage` implies the error state automatically.
+-   `spacing` only has effect when `type="tel"`.
+-   `styleType="no-border"` removes the visible border — use only in contexts with a background that provides visual separation.
+
+## Anti-patterns
+
+-   Do not use `disabled` on review screens — use `readOnly`.
+-   Do not set both `error` and `errorMessage` — `errorMessage` is sufficient.
+-   Do not use `spacing` with input types other than `"tel"`.
+-   Do not use `styleType="no-border"` in a form context without a containing element that visually distinguishes the field.
diff --git a/skills/fds-build/resources/v3/components/form-masked-input.md b/skills/fds-build/resources/v3/components/form-masked-input.md
new file mode 100644
index 0000000000..f17e94d3df
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-masked-input.md
@@ -0,0 +1,244 @@
+# Form.MaskedInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Displaying sensitive data that should be partially hidden by default with a user-controlled reveal toggle (e.g. NRIC, FIN, passport number, bank account number).
+-   Read-only fields that are loaded asynchronously and should show a loading / error state.
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Choose one masking strategy per instance: `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer`.
+-   Use `maskRange` for fixed-position sensitive segments (e.g. `[1, 4]` for NRIC middle characters).
+-   Use `maskRegex` when the characters to mask follow a pattern rather than a fixed range.
+-   Use `transformInput="uppercase"` for identifiers that are conventionally uppercase (e.g. NRIC, passport).
+-   Use `loadState` only when `readOnly` is also `true` — for fields that are fetched asynchronously.
+-   Provide `onTryAgain` when `loadState="fail"` so users can retry the fetch.
+-   `loadState` only takes effect when `readOnly` is also `true`.
+-   Provide only one of `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer` per instance.
+
+## Anti-patterns
+
+-   Do not use for non-sensitive fields — masking adds friction and should be reserved for data that genuinely requires it.
+-   Do not set `loadState` without `readOnly` — it has no effect in editable mode.
+-   Do not combine multiple masking strategies (`maskRange` + `maskRegex`) on the same instance.
diff --git a/skills/fds-build/resources/v3/components/form-multi-select.md b/skills/fds-build/resources/v3/components/form-multi-select.md
new file mode 100644
index 0000000000..91c28ffc74
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-multi-select.md
@@ -0,0 +1,320 @@
+# Form.MultiSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users can select more than one option from a predefined list. For single selections use `Form.Select`. For hierarchical options use `Form.NestedMultiSelect`.
+
+## Variants
+
+| `variant`   | When to use                                              |
+| ----------- | -------------------------------------------------------- |
+| `"default"` | Standard form context                                    |
+| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+const options = [
+    { value: "doc", label: "Document" },
+    { value: "img", label: "Image" },
+    { value: "pdf", label: "PDF" },
+];
+
+<Form.MultiSelect
+    label="File types"
+    options={options}
+    selectedOptions={selected}
+    valueExtractor={(opt) => opt.value}
+    listExtractor={(opt) => opt.label}
+    displayValueExtractor={(opt) => opt.label}
+    onSelectOptions={(opts) => {}}
+/>;
+```
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always provide `options` — the component has no meaning without it.
+-   Provide `valueExtractor` and `listExtractor` for typed option arrays — treat as required.
+-   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing raw values instead of labels in the closed selector.
+-   Use `maxSelectable` when there is a business rule limiting how many options can be chosen; the component enforces it automatically.
+-   Use `enableSearch` when the list exceeds ~10 items.
+-   Provide `customLabels` to localise or contextualise "Select all", "Clear all", and count labels.
+-   Use `optionsLoadState` to communicate async loading states.
+-   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
+-   `onSelectOptions` receives the complete updated selection array — not a delta.
+-   Unlike `Form.Select`, there is no `readOnly` prop — use `disabled` for non-editable states.
+
+## Anti-patterns
+
+-   Do not use `Form.MultiSelect` when only one option can be selected — use `Form.Select`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
+-   Do not set both `error` and `errorMessage`.
+-   Do not manage selection capping manually in `onSelectOptions` — use `maxSelectable` instead.
diff --git a/skills/fds-build/resources/v3/components/form-nested-multi-select.md b/skills/fds-build/resources/v3/components/form-nested-multi-select.md
new file mode 100644
index 0000000000..ceb912cfe6
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-nested-multi-select.md
@@ -0,0 +1,364 @@
+# Form.NestedMultiSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users can select multiple options from a hierarchically organised list of up to 3 levels. For hierarchical single-select use `Form.NestedSelect`. For flat multi-select use `Form.MultiSelect`.
+
+## Variants
+
+| `variant`   | When to use           |
+| ----------- | --------------------- |
+| `"default"` | Standard form context |
+| `"small"`   | Compact layouts       |
+
+| `mode`       | When to use                                                                              |
+| ------------ | ---------------------------------------------------------------------------------------- |
+| `"default"`  | System decides initial expand state                                                      |
+| `"expand"`   | Expand all categories on open — for short, browsable lists                               |
+| `"collapse"` | Collapse all categories on open — for long lists where search is the primary interaction |
+
+## Usage
+
+### Multi-select with parallel keyPaths / values arrays
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
+
+interface SkillValue {
+    id: string;
+    name: string;
+}
+
+const options: L1OptionProps<SkillValue, SkillValue, SkillValue>[] = [
+    {
+        key: "design",
+        label: "Design",
+        subItems: [
+            {
+                key: "design-ux",
+                label: "UX Design",
+                value: { id: "ux", name: "UX Design" },
+            },
+            {
+                key: "design-ui",
+                label: "UI Design",
+                value: { id: "ui", name: "UI Design" },
+            },
+        ],
+    },
+    {
+        key: "engineering",
+        label: "Engineering",
+        subItems: [
+            {
+                key: "eng-fe",
+                label: "Frontend",
+                value: { id: "fe", name: "Frontend" },
+            },
+            {
+                key: "eng-be",
+                label: "Backend",
+                value: { id: "be", name: "Backend" },
+            },
+        ],
+    },
+];
+
+const NestedMultiSelectExample = () => {
+    // keyPaths[i] and values[i] always refer to the same selection — keep them in sync
+    const [keyPaths, setKeyPaths] = useState<string[][]>([
+        ["design", "design-ux"], // pre-selected: UX Design
+    ]);
+    const [values, setValues] = useState<SkillValue[]>([
+        { id: "ux", name: "UX Design" },
+    ]);
+
+    return (
+        <Form.NestedMultiSelect<SkillValue, SkillValue, SkillValue>
+            label="Skills"
+            options={options}
+            selectedKeyPaths={keyPaths}
+            // onSelectOptions provides the NEXT full selection state — replace, don't merge
+            onSelectOptions={(nextKeyPaths, nextValues) => {
+                setKeyPaths(nextKeyPaths);
+                setValues(nextValues as SkillValue[]);
+            }}
+            valueToStringFunction={(val) => val.name}
+            enableSearch
+        />
+    );
+};
+```
+
+**The parallel-array contract:** index `i` in `keyPaths` and index `i` in `values` always describe the same selected item. `onSelectOptions` delivers the complete next state — replace both arrays together, never splice one independently. Initialise both arrays with matching entries when pre-populating selections.
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Rules
+
+-   Every option node must have a unique `key` string — key paths are used for controlled state.
+-   Provide `valueToStringFunction` when values are not plain strings. The same function is applied to values at all nesting levels — ensure values are homogeneous across levels, or that the function handles all types.
+-   Use `enableSearch` when the total option count across all levels is large.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Provide `customLabels` to localise "Select all", "Clear all", and count labels.
+-   `options` is the only mandatory component-specific prop.
+-   Options follow the same nested structure as `Form.NestedSelect`: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
+-   `selectedKeyPaths` is an array of key-path arrays — one per selected item.
+-   `onSelectOptions` receives the complete updated `keyPaths` and `values` arrays on every change.
+-   `valueToStringFunction` uses a single callback for all nesting levels — values across levels must be the same type or handled uniformly.
+
+## Anti-patterns
+
+-   Do not use `Form.NestedMultiSelect` for flat option lists — use `Form.MultiSelect`.
+-   Do not use when only one option can be selected — use `Form.NestedSelect`.
+-   Do not use duplicate `key` values across options — selection state will break.
+-   Do not set both `error` and `errorMessage`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
diff --git a/skills/fds-build/resources/v3/components/form-nested-select.md b/skills/fds-build/resources/v3/components/form-nested-select.md
new file mode 100644
index 0000000000..aade4e7dc3
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-nested-select.md
@@ -0,0 +1,361 @@
+# Form.NestedSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when options are organised in a hierarchy of up to 3 levels — e.g. industry → sector → role, or country → state → city. For flat single-select use `Form.Select`. For hierarchical multi-select use `Form.NestedMultiSelect`.
+
+## Variants
+
+| `variant`   | When to use           |
+| ----------- | --------------------- |
+| `"default"` | Standard form context |
+| `"small"`   | Compact layouts       |
+
+| `mode`       | When to use                                                                            |
+| ------------ | -------------------------------------------------------------------------------------- |
+| `"default"`  | System decides initial expand state based on selected path                             |
+| `"expand"`   | Expand all categories on open — useful when the list is short and browsing is expected |
+| `"collapse"` | Collapse all categories on open — useful for long lists where search is primary        |
+
+## Usage
+
+### Three-level hierarchy with controlled keyPath
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
+
+interface RoleValue {
+    id: string;
+    label: string;
+}
+
+const options: L1OptionProps<RoleValue, RoleValue, RoleValue>[] = [
+    {
+        key: "engineering",
+        label: "Engineering",
+        subItems: [
+            {
+                key: "engineering-frontend",
+                label: "Frontend",
+                subItems: [
+                    {
+                        key: "engineering-frontend-react",
+                        label: "React Developer",
+                        value: { id: "fe-react", label: "React Developer" },
+                    },
+                    {
+                        key: "engineering-frontend-vue",
+                        label: "Vue Developer",
+                        value: { id: "fe-vue", label: "Vue Developer" },
+                    },
+                ],
+            },
+            {
+                key: "engineering-backend",
+                label: "Backend",
+                value: { id: "be", label: "Backend Developer" },
+            },
+        ],
+    },
+];
+
+const NestedSelectExample = () => {
+    // keyPath is the path of keys from root to selected node
+    const [keyPath, setKeyPath] = useState<string[]>([]);
+    const [value, setValue] = useState<RoleValue | undefined>();
+
+    return (
+        <Form.NestedSelect<RoleValue, RoleValue, RoleValue>
+            label="Job role"
+            options={options}
+            selectedKeyPath={keyPath}
+            // onChange receives the full key path and the node's value
+            onChange={(path, val) => {
+                setKeyPath(path);
+                setValue(val);
+            }}
+            valueToStringFunction={(val) => val.label}
+            selectableCategory // intermediate nodes (e.g. "Backend") are also selectable
+            enableSearch
+        />
+    );
+};
+```
+
+**keyPath explains the selection:** `["engineering", "engineering-frontend", "engineering-frontend-react"]` means the user drilled through Engineering → Frontend → React Developer. An empty array means nothing is selected.
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Rules
+
+-   Every option node must have a unique `key` string — the key path is used for controlled state.
+-   Provide `valueToStringFunction` when values are not plain strings and the selected display needs to be derived from the value.
+-   Enable `selectableCategory` only when selecting a parent category is a valid business outcome — otherwise category nodes serve as navigational groupings only.
+-   Use `enableSearch` when the total option count across all levels is large.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
+-   `options` is the only mandatory component-specific prop.
+-   Options follow a nested structure: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
+-   `selectedKeyPath` is an array of keys tracing the path to the selected leaf (e.g. `["parent-key", "child-key"]`).
+-   `selectableCategory` enables selection of non-leaf (parent category) nodes.
+
+## Anti-patterns
+
+-   Do not use `Form.NestedSelect` for flat option lists — use `Form.Select`.
+-   Do not use when multiple selections are needed — use `Form.NestedMultiSelect`.
+-   Do not use duplicate `key` values across options — selection state will break.
+-   Do not set both `error` and `errorMessage`.
diff --git a/skills/fds-build/resources/v3/components/form-otp-verification.md b/skills/fds-build/resources/v3/components/form-otp-verification.md
new file mode 100644
index 0000000000..2513ba3d79
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-otp-verification.md
@@ -0,0 +1,247 @@
+# Form.OtpVerification
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Flows that require identity verification via a one-time password sent to a phone number or email address.
+-   The component manages the full multi-step UI: input contact → send OTP → enter OTP → verify.
+
+## Usage
+
+### Email variant
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
+
+const EmailOtpExample = () => {
+    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
+    const [email, setEmail] = useState("");
+
+    return (
+        <Form.OtpVerification
+            label="Verify your email"
+            type="email"
+            emailValue={email}
+            onEmailChange={setEmail}
+            otpState={otpState}
+            onOtpStateChange={setOtpState}
+            onSendOtp={async () => {
+                // Throw to surface the error inline — do NOT return an error string
+                const res = await api.sendEmailOtp(email);
+                if (!res.ok) throw new Error("Invalid email address");
+            }}
+            onVerifyOtp={async (otpInput) => {
+                const res = await api.verifyOtp(otpInput);
+                if (!res.ok)
+                    throw new Error("Incorrect OTP. Please try again.");
+            }}
+            onResendOtp={async () => {
+                const res = await api.sendEmailOtp(email);
+                if (!res.ok) throw new Error("Could not resend OTP");
+            }}
+            verifyOtpCountdownTimer={300}
+        />
+    );
+};
+```
+
+### Phone variant (`fixedCountry` required)
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
+import { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input";
+
+const PhoneOtpExample = () => {
+    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
+    const [phone, setPhone] = useState<PhoneNumberInputValue>({ number: "" });
+
+    return (
+        <Form.OtpVerification
+            label="Verify your mobile number"
+            type="phone-number"
+            phoneNumberValue={phone}
+            onPhoneNumberChange={setPhone}
+            fixedCountry // required when type="phone-number"; hides country selector
+            otpState={otpState}
+            onOtpStateChange={setOtpState}
+            onSendOtp={async () => {
+                const res = await api.sendSmsOtp(phone.number);
+                if (!res.ok) throw new Error("Invalid phone number");
+            }}
+            onVerifyOtp={async (otpInput) => {
+                const res = await api.verifyOtp(otpInput);
+                if (!res.ok)
+                    throw new Error("Incorrect OTP. Please try again.");
+            }}
+            onResendOtp={async () => {
+                const res = await api.sendSmsOtp(phone.number);
+                if (!res.ok) throw new Error("Could not resend OTP");
+            }}
+            verifyOtpCountdownTimer={180}
+        />
+    );
+};
+```
+
+**Key gotcha — callbacks must throw, not return error strings.**
+The component catches the thrown error and displays `error.message` inline.
+Returning a value (or nothing) always signals success and advances the state machine.
+
+## Phone-number-specific props
+
+| Prop                  | Type                                     | Description                                            |
+| --------------------- | ---------------------------------------- | ------------------------------------------------------ |
+| `phoneNumberValue`    | `PhoneNumberInputValue`                  | Controlled phone number value                          |
+| `onPhoneNumberChange` | `(value: PhoneNumberInputValue) => void` | Called when phone input changes                        |
+| `fixedCountry`        | `true`                                   | Locks the country code; required for phone-number type |
+
+## Email-specific props
+
+| Prop            | Type                      | Description                     |
+| --------------- | ------------------------- | ------------------------------- |
+| `emailValue`    | `string`                  | Controlled email value          |
+| `onEmailChange` | `(value: string) => void` | Called when email input changes |
+
+## PhoneNumberInputValue
+
+| Prop          | Type     | Description                 |
+| ------------- | -------- | --------------------------- |
+| `number`      | `string` | Phone number                |
+| `countryCode` | `string` | Country code (e.g. `"+65"`) |
+
+## Form-specific props
+
+| Prop    | Type                       | Description |
+| ------- | -------------------------- | ----------- |
+| `label` | `string \| FormLabelProps` | Field label |
+
+## Props
+
+| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
+| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
+| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
+| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
+| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
+| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
+| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
+| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
+| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
+| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
+| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
+| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
+| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
+| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
+| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
+| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
+| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
+| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
+| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
+| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
+| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
+| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
+| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
+| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
+| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
+| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
+| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
+| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
+| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
+| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
+| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
+| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
+| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
+| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
+| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
+| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
+| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
+| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
+| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
+| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
+| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
+| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
+| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
+| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
+| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
+| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
+| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
+| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
+| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
+| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
+| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
+| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
+| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
+| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
+| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Control `otpState` externally and update it via `onOtpStateChange` — the component does not manage its own state.
+-   `onSendOtp`, `onVerifyOtp`, and `onResendOtp` must be async functions; throw an error inside them to trigger the corresponding error display (`sendOtpError`, `verifyOtpError`).
+-   Always pass `fixedCountry` when `type="phone-number"` — the prop is required to lock the country selector.
+-   Set `verifyOtpCountdownTimer` to match the actual OTP expiry window from your backend.
+-   Pass `sendOtpError` and `verifyOtpError` from server responses so users receive actionable feedback.
+-   `otpState` is externally controlled — the component does not manage its own flow state.
+-   `fixedCountry` is required when `type="phone-number"`.
+
+## Anti-patterns
+
+-   Do not try to manage the step sequence manually — use `otpState` and let `onOtpStateChange` drive transitions.
+-   Do not use for non-identity-verification scenarios — for simple code inputs, use a plain `Form.Input`.
+-   Do not omit `fixedCountry` for `type="phone-number"` — the country selector will be shown unexpectedly.
+-   Do not use synchronous functions for `onSendOtp`, `onVerifyOtp`, or `onResendOtp` — they must return Promises.
diff --git a/skills/fds-build/resources/v3/components/form-phone-number-input.md b/skills/fds-build/resources/v3/components/form-phone-number-input.md
new file mode 100644
index 0000000000..cb28ddfa81
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-phone-number-input.md
@@ -0,0 +1,267 @@
+# Form.PhoneNumberInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+Type import: `import type { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input"`
+
+## When to use
+
+-   Collecting a phone number that requires a country code prefix.
+-   International forms where users may have numbers from different countries.
+-   Use `fixedCountry` when the service only accepts numbers from one country (e.g. Singapore-only services).
+
+## Usage
+
+```tsx
+const StyledPhoneNumberInput = styled(Form.PhoneNumberInput)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## PhoneNumberInputValue
+
+| Prop          | Type     | Description                                                                                                             |
+| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `number`      | `string` | The phone number                                                                                                        |
+| `countryCode` | `string` | The country code (e.g. `"+65"`). The `+` prefix is optional on input but always included in the `onChange` return value |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` returns `{ countryCode, number }`.
+-   Use `enableSearch` when the country list is long and users need to find their country quickly.
+-   Use `fixedCountry` together with a pre-set `value.countryCode` so the locked code is visible.
+-   Use `allowClear` when the field can be optionally cleared by the user.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+
+## Anti-patterns
+
+-   Do not use a plain text input for international phone numbers — formatting and country code handling must be consistent.
+-   Do not use without `fixedCountry` when only one country is supported — it creates unnecessary friction.
+-   Do not omit `value.countryCode` when `fixedCountry` is true — the locked code won't render without it.
diff --git a/skills/fds-build/resources/v3/components/form-predictive-text-input.md b/skills/fds-build/resources/v3/components/form-predictive-text-input.md
new file mode 100644
index 0000000000..a8babd0d9e
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-predictive-text-input.md
@@ -0,0 +1,268 @@
+# Form.PredictiveTextInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   The option set is too large for a static dropdown and must be fetched dynamically (e.g. address lookup, postal code search, product search, large dataset autocomplete).
+-   Users need to type to narrow down results before selecting.
+
+## Usage
+
+### Location search — three extractors working together
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+interface Location {
+    id: string;
+    name: string;
+    address: string;
+}
+
+const LocationSearchExample = () => {
+    const [selected, setSelected] = useState<Location | undefined>();
+
+    const fetchOptions = async (input: string): Promise<Location[]> => {
+        const res = await api.searchLocations(input);
+        return res.results;
+    };
+
+    return (
+        <Form.PredictiveTextInput<Location, string>
+            label="Search location"
+            minimumCharacters={3} // fetch only after 3 chars typed
+            fetchOptions={fetchOptions}
+            // Populates the text field when an option is selected
+            valueExtractor={(item) => item.name}
+            // Populates each row in the dropdown list
+            listExtractor={(item) => `${item.name} — ${item.address}`}
+            // Displays the chosen value as a chip / confirmation label
+            displayValueExtractor={(item) => item.name}
+            selectedOption={selected}
+            onSelectOption={(item) => setSelected(item ?? undefined)}
+        />
+    );
+};
+```
+
+**How the three extractors divide responsibility:**
+
+| Extractor               | When it runs               | What it renders                  |
+| ----------------------- | -------------------------- | -------------------------------- |
+| `listExtractor`         | While the dropdown is open | Each option row in the list      |
+| `valueExtractor`        | After selection            | The text field value             |
+| `displayValueExtractor` | After selection            | The chip / confirmed-value label |
+
+Debounce `fetchOptions` internally (e.g. with `setTimeout` or a library) — the component calls it on every character change.
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   `fetchOptions` is required — it must be async and return an array of option objects.
+-   Debounce inside `fetchOptions` to avoid flooding the API on every keystroke.
+-   Set `minimumCharacters` to a value that produces useful results — `3` is the default, but adjust for your data source.
+-   Always provide `valueExtractor`, `listExtractor`, and `displayValueExtractor` — omitting any of these produces inconsistent display behaviour.
+-   Use `selectedOption` and `onSelectOption` for controlled selection.
+-   Set `errorMessage` when the selected option fails validation.
+-   `fetchOptions` is called on every keystroke after `minimumCharacters` is reached — debounce inside the function if needed.
+-   Generic type `T` is the option object shape; `V` is the extracted value type.
+
+## Anti-patterns
+
+-   Do not use when the full option list is small and known upfront — use `Form.Select` or `Form.MultiSelect` instead.
+-   Do not use `fetchOptions` without debouncing — each keystroke fires a new call.
+-   Do not omit extractor functions — the component cannot determine what to display without them.
diff --git a/skills/fds-build/resources/v3/components/form-select.md b/skills/fds-build/resources/v3/components/form-select.md
new file mode 100644
index 0000000000..8b0092fe43
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-select.md
@@ -0,0 +1,332 @@
+# Form.Select
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users must select exactly one option from a predefined list. For multiple selections use `Form.MultiSelect`. For hierarchical options use `Form.NestedSelect`.
+
+## Variants
+
+| `variant`   | When to use                                              |
+| ----------- | -------------------------------------------------------- |
+| `"default"` | Standard form context                                    |
+| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+const options = [
+    { value: "sg", label: "Singapore" },
+    { value: "my", label: "Malaysia" },
+];
+
+<Form.Select
+    label="Country"
+    options={options}
+    selectedOption={selected}
+    valueExtractor={(opt) => opt.value}
+    listExtractor={(opt) => opt.label}
+    displayValueExtractor={(opt) => opt.label}
+    onSelectOption={(opt) => {}}
+/>;
+```
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always provide `options` — the component has no meaning without it.
+-   Provide `valueExtractor` and `listExtractor` when the option objects are not plain strings — these are effectively required for typed option arrays.
+-   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing the raw value (e.g. "sg") in the closed selector instead of the label (e.g. "Singapore").
+-   Use `optionsLoadState` to communicate async loading states — set to `"loading"` while fetching, `"failed"` on error (triggers retry UI).
+-   Use `enableSearch` when the list exceeds ~10 items.
+-   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
+-   Use `dropdownWidth` when the dropdown must be wider than the trigger (e.g. long option text).
+-   `options` is the only mandatory component-specific prop.
+-   Only specify `dropdownRootNode` when the default `body` rendering causes scroll or z-index conflicts.
+
+## Anti-patterns
+
+-   Do not use `Form.Select` when users can choose more than one option — use `Form.MultiSelect`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
+-   Do not set both `error` and `errorMessage`.
+-   Do not use `disabled` on review screens — use `readOnly`.
diff --git a/skills/fds-build/resources/v3/components/form-slider.md b/skills/fds-build/resources/v3/components/form-slider.md
new file mode 100644
index 0000000000..156a622ea5
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-slider.md
@@ -0,0 +1,286 @@
+# Form.Slider
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Selecting a single numeric value within a bounded range (e.g. budget, age, percentage, rating).
+-   When the relative position of a value matters more than typing an exact number.
+
+## Usage
+
+### Basic slider with display-only `onChange` and API-safe `onChangeEnd`
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const BudgetSlider = () => {
+    const [displayValue, setDisplayValue] = useState(500);
+
+    const handleChange = (value: number) => {
+        // Safe: fires continuously during drag — update display only
+        setDisplayValue(value);
+    };
+
+    const handleChangeEnd = (value: number) => {
+        // Safe: fires once on mouse/touch release — trigger API calls here
+        fetchResults({ maxBudget: value });
+    };
+
+    return (
+        <Form.Slider
+            label={`Budget: $${displayValue}`}
+            min={0}
+            max={2000}
+            step={100}
+            value={displayValue}
+            onChange={handleChange}
+            onChangeEnd={handleChangeEnd}
+            showSliderLabels
+            sliderLabelPrefix="$"
+            showIndicatorLabel
+            indicatorLabelPrefix="$"
+        />
+    );
+};
+```
+
+**Never put API calls or expensive state updates in `onChange`** — it fires on every pixel of drag movement. Use `onChangeEnd` instead.
+
+### Custom track colours
+
+`colors` takes a two-element array: `[leftTrackColor, rightTrackColor]`.
+
+```tsx
+<Form.Slider
+    label="Risk level"
+    min={0}
+    max={10}
+    colors={["#4caf50", "#e0e0e0"]}
+    showSliderLabels
+    sliderLabelSuffix=" / 10"
+/>
+```
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Always set `min` and `max` to meaningful bounds for the use case.
+-   Use `step` to restrict values to meaningful increments (e.g. `step={500}` for a budget slider).
+-   Use `onChangeEnd` for expensive operations (API calls, heavy computations) — `onChange` fires on every pixel of movement.
+-   Enable `showSliderLabels` so users know the range bounds.
+-   Enable `showIndicatorLabel` so users can see the current value while dragging.
+-   Provide `ariaLabel` when the label alone does not fully describe the slider's purpose to screen readers.
+-   `onChange` fires continuously during drag; use `onChangeEnd` for expensive operations such as API calls.
+-   `colors` array format is `[leftTrack, rightTrack]`.
+
+## Anti-patterns
+
+-   Do not use `onChange` to trigger API calls — use `onChangeEnd` to avoid flooding the network.
+-   Do not use when the user needs to enter a precise value — prefer a number input in that case.
+-   Do not omit `min` and `max` — the defaults (0–100) may not be appropriate for the domain.
diff --git a/skills/fds-build/resources/v3/components/form-textarea.md b/skills/fds-build/resources/v3/components/form-textarea.md
new file mode 100644
index 0000000000..332014daa7
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-textarea.md
@@ -0,0 +1,206 @@
+# Form.Textarea
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use for freeform long-text entry — descriptions, comments, reasons, or any field where users need more than one line. Use `Form.Input` for single-line text.
+
+## Usage
+
+### 1. Basic controlled textarea
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const [value, setValue] = useState("");
+
+<Form.Textarea
+    label="Description"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    placeholder="Enter a description..."
+    rows={4}
+/>;
+```
+
+### 2. With `maxLength` — auto-renders a character counter
+
+```tsx
+<Form.Textarea
+    label="Comments"
+    maxLength={200}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+/>;
+{
+    /* A counter "0 / 200" appears below automatically — no extra code needed */
+}
+```
+
+### 3. With `renderCustomCounter`
+
+The prop signature is `(maxLength: number, currentValueLength: number) => JSX.Element`. Note the argument order: `maxLength` first, then `currentValueLength`.
+
+```tsx
+<Form.Textarea
+    label="Comments"
+    maxLength={200}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    renderCustomCounter={(maxLength, currentValueLength) => (
+        <span
+            style={{
+                color: currentValueLength > maxLength * 0.9 ? "red" : "inherit",
+            }}
+        >
+            {currentValueLength} of {maxLength} characters used
+        </span>
+    )}
+/>
+```
+
+### 4. With `transformValue`
+
+`transformValue` runs on every input event and replaces the raw value before it is applied. Do not duplicate this logic in `onChange`.
+
+```tsx
+<Form.Textarea
+    label="Reference code"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    transformValue={(raw) => raw.toUpperCase()}
+    maxLength={50}
+/>;
+{
+    /* User types "abc" → stored value becomes "ABC" */
+}
+```
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Set `rows` to match the expected content length — a short reason field needs fewer rows than a free-text description.
+-   Set `resize="none"` when the textarea height is fixed by design to prevent layout disruption.
+-   Provide `maxLength` when a character limit must be enforced — the built-in counter appears automatically.
+-   Use `renderCustomCounter` only when the default counter format does not meet content requirements.
+-   Use `transformValue` for on-the-fly normalisation (e.g. forced capitalisation) — do not replicate this in `onChange`.
+-   Provide `errorMessage` rather than `error` alone.
+-   Setting native `maxLength` renders a character counter below the textarea automatically.
+-   `renderCustomCounter` overrides the default counter UI when `maxLength` is set.
+-   `error` is redundant when `errorMessage` is provided.
+-   `transformValue` runs on every input event — use for normalisation (e.g. uppercase conversion).
+
+## Anti-patterns
+
+-   Do not use `Form.Textarea` for single-line inputs — use `Form.Input`.
+-   Do not implement a manual character counter in consumer code when `maxLength` is set — the built-in counter handles it.
+-   Do not set both `error` and `errorMessage`.
diff --git a/skills/fds-build/resources/v3/components/form-time-range-picker.md b/skills/fds-build/resources/v3/components/form-time-range-picker.md
new file mode 100644
index 0000000000..5295143f51
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-time-range-picker.md
@@ -0,0 +1,283 @@
+# Form.TimeRangePicker
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a start and end time from the user (e.g. operating hours, meeting slot, booking window).
+-   Use `variant="combobox"` with `interval` when users should pick from fixed time slots (e.g. every 30 minutes).
+-   Use `variant="dial"` (default) for freeform time selection.
+
+## Usage
+
+```tsx
+const StyledTimeRangePicker = styled(Form.TimeRangePicker)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Combobox-variant-specific props
+
+| Prop                     | Type     | Default | Description                                                  |
+| ------------------------ | -------- | ------- | ------------------------------------------------------------ |
+| `interval`               | `number` | `15`    | Minutes between each dropdown option                         |
+| `startLimit`             | `string` | —       | Earliest time shown in the dropdown                          |
+| `endLimit`               | `string` | —       | Latest time shown in the dropdown                            |
+| `initialScrollStartTime` | `string` | —       | Time the start dropdown scrolls to when start field is empty |
+| `initialScrollEndTime`   | `string` | —       | Time the end dropdown scrolls to when end field is empty     |
+
+## TimeRangePickerValue
+
+| Prop    | Type     | Description                                                                                                 |
+| ------- | -------- | ----------------------------------------------------------------------------------------------------------- |
+| `start` | `string` | Start time. Dial 24hr: `"HH:mm"`, dial 12hr: `"hh:mmA"`. Combobox 24hr: `"HH:mm"`, combobox 12hr: `"h:mma"` |
+| `end`   | `string` | End time, same format as `start`                                                                            |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `TimeRangePickerValue`.
+-   Match `format` to the expected string format in `TimeRangePickerValue`.
+-   Use `startLimit`/`endLimit` with `combobox` variant to restrict available options to valid business hours.
+-   Set `errorMessage` rather than `error` alone.
+-   Use `dropdownRootNode` when inside a modal or scrollable container.
+-   Time string format differs between `dial` and `combobox` variants — see `TimeRangePickerValue` above.
+-   `interval`, `startLimit`, `endLimit`, and `initialScroll*` props only apply when `variant="combobox"`.
+
+## Anti-patterns
+
+-   Do not use for single time selection — use `Form.TimePicker` instead.
+-   Do not mix dial and combobox time string formats — the format differs between variants.
+-   Do not set combobox-specific props (`interval`, `startLimit`, `endLimit`, `initialScroll*`) when `variant="dial"`.
diff --git a/skills/fds-build/resources/v3/components/form-timepicker.md b/skills/fds-build/resources/v3/components/form-timepicker.md
new file mode 100644
index 0000000000..062bb21b5a
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-timepicker.md
@@ -0,0 +1,232 @@
+# Form.Timepicker
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+> **Casing:** the export is `Form.Timepicker` (lowercase `p`), not `Form.TimePicker`.
+
+## When to use
+
+-   Collecting a single time value from the user (e.g. appointment time, start time, notification time).
+-   Use `format="12hr"` for consumer-facing forms where AM/PM is more intuitive.
+-   Use `format="24hr"` (default) for operational or technical contexts.
+
+## Usage
+
+```tsx
+const StyledTimepicker = styled(Form.Timepicker)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage.
+-   Match `format` to the expected string format: `"HH:mm"` for 24hr, `"hh:mmA"` for 12hr.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `dropdownRootNode` when the picker is inside a modal or fixed container to avoid z-index issues.
+-   Use `alignment="right"` when the picker is near the right edge of the viewport.
+-   `onChange` fires only after the user clicks the Confirm button, not on every dial interaction.
+-   `onBlur` does not apply any in-progress selection — use `onChange` for committed values.
+
+## Anti-patterns
+
+-   Do not use for time-range selection — use `Form.TimeRangePicker` instead.
+-   Do not mix 12hr format strings with `format="24hr"` or vice versa.
+-   Do not rely on `onBlur` to capture the selected value — it does not commit the selection.
diff --git a/skills/fds-build/resources/v3/components/form-unit-number-input.md b/skills/fds-build/resources/v3/components/form-unit-number-input.md
new file mode 100644
index 0000000000..92e3436720
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/form-unit-number-input.md
@@ -0,0 +1,288 @@
+# Form.UnitNumberInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a Singapore unit number in `#floor-unit` format (e.g. `#01-234`).
+-   Any address form that includes a unit number field for Singapore addresses.
+
+## Usage
+
+### Basic controlled usage with validation guard
+
+`onChange` returns a `floor-unit` string (e.g. `"03-12"`) or the sentinel string `"Invalid unit number"` for malformed input. Always check before persisting.
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const UnitField = () => {
+    const [value, setValue] = useState("");
+    const [error, setError] = useState("");
+
+    const handleChange = (val: string) => {
+        if (val === "Invalid unit number") {
+            setError("Please enter a valid unit number.");
+            // Do not persist — keep previous valid value in state
+        } else {
+            setError("");
+            setValue(val); // e.g. "03-12"
+        }
+    };
+
+    return (
+        <Form.UnitNumberInput
+            label="Unit number"
+            value={value}
+            onChange={handleChange}
+            errorMessage={error}
+        />
+    );
+};
+```
+
+### `onBlur` zero-pads automatically
+
+After the user tabs away, `onBlur` fires with the formatted value. The displayed value may change without any user input — update state accordingly.
+
+```tsx
+<Form.UnitNumberInput
+    label="Unit number"
+    value={value}
+    onChange={handleChange}
+    onBlur={(formatted) => {
+        // e.g. user typed "3-2" → formatted is "03-02"
+        setValue(formatted);
+    }}
+/>
+```
+
+### `onChangeRaw` — separate floor and unit
+
+Use `onChangeRaw` when downstream code needs floor and unit as distinct values, regardless of validity.
+
+```tsx
+<Form.UnitNumberInput
+    label="Unit number"
+    onChangeRaw={(parts: string[]) => {
+        const [floor, unit] = parts; // e.g. ["03", "12"]
+        setFloor(floor);
+        setUnit(unit);
+    }}
+/>
+```
+
+Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper:
+
+```tsx
+const StyledUnitNumberInput = styled(Form.UnitNumberInput)`
+    ${MediaQuery.MinWidth.lg} {
+        max-width: 24rem;
+    }
+`;
+```
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage.
+-   Check the return value of `onChange` for `"Invalid unit number"` and handle it before persisting the value.
+-   Use `onChangeRaw` if you need floor and unit as separate values for downstream processing.
+-   Use `onBlur` to get the zero-padded, formatted value after the user finishes typing.
+-   Set `errorMessage` to explain validation failures.
+-   `onChange` returns `"Invalid unit number"` for malformed input — check for this string before saving.
+-   `onBlur` zero-pads the unit part (e.g. `"11-2"` → `"11-02"`).
+-   Use `onChangeRaw` / `onBlurRaw` when you need floor and unit as separate values.
+
+## Anti-patterns
+
+-   Do not use a plain text input for unit numbers — the component enforces the correct format automatically.
+-   Do not persist the value returned from `onChange` without first checking it is not `"Invalid unit number"`.
+-   Do not use for non-Singapore address formats — the component enforces the `floor-unit` structure.
diff --git a/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md b/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
new file mode 100644
index 0000000000..a15b2145d0
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
@@ -0,0 +1,486 @@
+# FullscreenImageCarousel
+
+Import: `import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel"`
+
+## When to use
+
+Use to display a fullscreen overlay carousel of images or custom content (e.g. PDFs, videos) with thumbnail navigation, zoom, and optional delete controls.
+
+## Sub-components
+
+-   `FullscreenImageCarouselItemProps` — union of `FullscreenImageCarouselImageItemProps` and `FullscreenImageCarouselCustomItemProps`
+
+## Usage
+
+### Mixed image and custom items
+
+Items use a discriminated union on `type`. Image items may omit `type` (defaults to image); custom items **must** set `type: "custom"` and provide `renderContent`.
+
+```tsx
+import { useState } from "react";
+import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel";
+
+const DocViewer = () => {
+    const [show, setShow] = useState(false);
+
+    const items = [
+        // Image item — type may be omitted
+        {
+            src: "https://example.com/photo.jpg",
+            alt: "Site photo",
+            fileName: "photo.jpg",
+            fileSize: "1.2 MB",
+        },
+        // Custom item — type is required
+        {
+            type: "custom" as const,
+            itemLabel: "PDF",
+            thumbnailSrc: "https://example.com/pdf-thumb.svg",
+            renderContent: () => (
+                <iframe
+                    src="https://example.com/document.pdf"
+                    title="PDF preview"
+                    style={{ width: "100%", height: "100%", border: "none" }}
+                />
+            ),
+        },
+    ];
+
+    const handleDelete = (item, index) => {
+        // Remove the item from your state; the delete button only appears
+        // because onDelete is provided.
+        removeItem(index);
+    };
+
+    return (
+        <>
+            <button onClick={() => setShow(true)}>View files</button>
+            <FullscreenImageCarousel
+                show={show}
+                items={items}
+                onClose={() => setShow(false)}
+                onDelete={handleDelete} // omit to hide delete button
+                showFirstAndLastNav
+            />
+        </>
+    );
+};
+```
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## FullscreenImageCarouselItemProps (shared)
+
+| Prop       | Type     | Default | Description                                      |
+| ---------- | -------- | ------- | ------------------------------------------------ |
+| `fileName` | `string` | —       | File name displayed in the info bar at the top   |
+| `fileSize` | `string` | —       | Pre-formatted file size string (e.g. `"2.4 MB"`) |
+
+## FullscreenImageCarouselImageItemProps
+
+| Prop           | Type      | Default | Description                                   |
+| -------------- | --------- | ------- | --------------------------------------------- |
+| `type`         | `"image"` | —       | Discriminant; may be omitted for image items  |
+| `src` \*       | `string`  | —       | The image src                                 |
+| `alt`          | `string`  | —       | Descriptive text for screen readers           |
+| `thumbnailSrc` | `string`  | —       | Thumbnail src; falls back to `src` if omitted |
+
+## FullscreenImageCarouselCustomItemProps
+
+| Prop               | Type                    | Default | Description                                  |
+| ------------------ | ----------------------- | ------- | -------------------------------------------- |
+| `type` \*          | `"custom"`              | —       | Discriminant; must be `"custom"`             |
+| `renderContent` \* | `() => React.ReactNode` | —       | Custom render prop for the full slide area   |
+| `thumbnailSrc`     | `string`                | —       | Thumbnail src; shows placeholder if omitted  |
+| `itemLabel`        | `string`                | —       | Label describing content type (e.g. `"PDF"`) |
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Rules
+
+-   Always provide `show` and `items` — both are required.
+-   Always wire `onClose` to set `show` to `false`; the component does not close itself.
+-   Do not reorder the `items` array while a delete is in flight.
+-   The delete button only appears when `onDelete` is provided — omit the prop to hide the button entirely.
+
+## Anti-patterns
+
+-   Do not use for inline image galleries — this component renders as a fullscreen modal overlay.
diff --git a/skills/fds-build/resources/v3/components/histogram-slider.md b/skills/fds-build/resources/v3/components/histogram-slider.md
new file mode 100644
index 0000000000..8275933252
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/histogram-slider.md
@@ -0,0 +1,193 @@
+# HistogramSlider
+
+Import: `import { HistogramSlider } from "@lifesg/react-design-system/histogram-slider"`
+
+A range slider with a histogram distribution chart above it — used in filter panels where showing the value distribution helps users pick a range (e.g. price range, age range).
+
+## HistogramBinProps
+
+| Prop       | Type     | Description                                         |
+| ---------- | -------- | --------------------------------------------------- |
+| `count`    | `number` | Number of items in this bin — determines bar height |
+| `minValue` | `number` | Starting value of this bin                          |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Rules
+
+-   `onChange` fires continuously during drag — do not put API calls here; use `onChangeEnd`.
+-   `interval` must match the gap between `minValue` of consecutive bins.
+-   Always provide `ariaLabels` or `aria-labelledby` for accessibility.
+-   Pair with `Filter` in a filter sidebar — `HistogramSlider` is not a `Form.*` component and does not use `label`/`errorMessage`.
diff --git a/skills/fds-build/resources/v3/components/icon-button.md b/skills/fds-build/resources/v3/components/icon-button.md
new file mode 100644
index 0000000000..095e001cff
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/icon-button.md
@@ -0,0 +1,14 @@
+# IconButton
+
+> **Not available in v4.** If you are building for v4, do not use this component.
+
+Import: `import { IconButton } from "@lifesg/react-design-system/icon-button"`
+
+## Rules
+
+-   `aria-label` is required on every `IconButton` — icon-only buttons have no visible text for screen readers.
+-   Pass the icon component as `children`.
+
+## Anti-patterns
+
+-   Omitting `aria-label` — icon-only buttons are inaccessible without it.
diff --git a/docs/skills/fds-build/resources/v4/components/icon.md b/skills/fds-build/resources/v3/components/icon.md
similarity index 92%
rename from docs/skills/fds-build/resources/v4/components/icon.md
rename to skills/fds-build/resources/v3/components/icon.md
index 7fa6d022fe..96b82ec3e1 100644
--- a/docs/skills/fds-build/resources/v4/components/icon.md
+++ b/skills/fds-build/resources/v3/components/icon.md
@@ -14,14 +14,6 @@ import { PersonIcon } from "@lifesg/react-icons/person";
 
 Pattern: `kebab-case` name → import path `@lifesg/react-icons/{name}` → component `{PascalCase}Icon`
 
-## Props
-
-| Prop        | Type     | Default  | Description                      |
-| ----------- | -------- | -------- | -------------------------------- |
-| `size`      | `number` | `24`     | Icon size in px                  |
-| `color`     | `string` | inherits | CSS colour value or token string |
-| `className` | `string` | —        | CSS class                        |
-
 ## Available icons
 
 Icons come in two variants: outline (default) and filled (`-fill` suffix).
diff --git a/skills/fds-build/resources/v3/components/image-button.md b/skills/fds-build/resources/v3/components/image-button.md
new file mode 100644
index 0000000000..8533c75e54
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/image-button.md
@@ -0,0 +1,57 @@
+# ImageButton
+
+Import: `import { ImageButton } from "@lifesg/react-design-system/image-button"`
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
diff --git a/skills/fds-build/resources/v3/components/input.md b/skills/fds-build/resources/v3/components/input.md
new file mode 100644
index 0000000000..bd09756498
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/input.md
@@ -0,0 +1,128 @@
+# Input
+
+Import: `import { Input } from "@lifesg/react-design-system/input"`
+
+## When to use
+
+Use `Input` for standalone inputs that do not need a label or error message — search bars, inline editing, filter fields, or composition contexts where the form layout is provided externally. For all labelled form fields with validation messages, use `Form.Input` instead.
+
+## Variants
+
+| `styleType`            | When to use                                                                                                      |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `"bordered"` (default) | Standard standalone input — provides clear affordance                                                            |
+| `"no-border"`          | Inline editing or search bars embedded in headers/toolbars where a border would conflict with the surrounding UI |
+
+## Props
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputPartialProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputPartialProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputPartialProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputPartialProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Rules
+
+-   Use `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
+-   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
+-   Use `allowClear` for search inputs and optional fields; pair with `onClear` to reset the controlled value.
+-   Set `error={true}` to communicate an invalid state visually — provide a separate error message element in the surrounding layout.
+-   Use `styleType="no-border"` only when the surrounding container or background provides sufficient visual separation.
+-   `Input` is the bare input field with no label or error message wrapper. Use `Form.Input` when a label or validation message is needed.
+-   `spacing` only has effect when `type="tel"`.
+-   `styleType="no-border"` removes the visible border — use only when the surrounding context provides sufficient visual distinction.
+-   `error` drives error-state styling only; there is no built-in error message — pair with external error text if needed.
+
+## Anti-patterns
+
+-   Do not use `Input` inside a form that needs labels or validation messages — use `Form.Input`.
+-   Do not use `spacing` with input types other than `"tel"`.
+-   Do not rely on `Input` alone to surface error messages — it has no built-in error text slot.
diff --git a/skills/fds-build/resources/v3/components/language-switcher.md b/skills/fds-build/resources/v3/components/language-switcher.md
new file mode 100644
index 0000000000..cd0671507a
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/language-switcher.md
@@ -0,0 +1,55 @@
+# LanguageSwitcher
+
+Import: `import { LanguageSwitcher } from "@lifesg/react-design-system/language-switcher"`
+
+## Props
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Props
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Props — `LanguageSwitcherProps`
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Props — `LanguageSwitcherProps`
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Props — `LanguageSwitcherProps`
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Props — `LanguageSwitcherProps`
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Rules
+
+-   `LanguageSwitcherCode` is the union of supported language codes: `"en" | "zh" | "ms" | "ta"`.
diff --git a/skills/fds-build/resources/v3/components/layout.md b/skills/fds-build/resources/v3/components/layout.md
new file mode 100644
index 0000000000..26eb9163c4
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/layout.md
@@ -0,0 +1,388 @@
+# Layout
+
+Import: `import { Layout } from "@lifesg/react-design-system/layout"`
+
+## Composition
+
+```
+Layout.Container type="grid"        ← responsive 12-col grid (desktop) / 8-col (mobile)
+├── Layout.ColDiv xsCols lgCols     ← column span — always set xsCols
+├── Layout.ColDiv xsCols lgCols
+└── Layout.ColDiv xsCols lgCols
+
+Layout.Container type="flex"        ← horizontal flexbox row
+└── {children}
+
+Layout.Container type="flex-column" ← vertical flexbox column
+└── {children}
+```
+
+`Layout.Section` and `Layout.Content` share the same props as `Layout.Container` and can be used in place of it for semantic HTML structure. Never nest `Layout.Container` inside another `Layout.Container`. Always set `xsCols` on every `Layout.ColDiv` — never set only `lgCols`.
+
+-   `Layout.ColDiv` — responsive grid column div
+
+## Usage
+
+```tsx
+import { Layout } from "@lifesg/react-design-system/layout";
+
+<Layout.Container type="grid">
+    <Layout.ColDiv xsCols={8} lgCols={6}>
+        Content
+    </Layout.ColDiv>
+</Layout.Container>;
+```
+
+| `type`          | Use case                         |
+| --------------- | -------------------------------- |
+| `"grid"`        | Responsive column grid (default) |
+| `"flex"`        | Horizontal flexbox layout        |
+| `"flex-column"` | Vertical flexbox layout          |
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Breakpoints
+
+| Breakpoint | Min width | Columns | Gutter | Device                |
+| ---------- | --------- | ------- | ------ | --------------------- |
+| `xxs`      | 0px       | 8       | 16px   | Smallest mobile       |
+| `xs`       | 321px     | 8       | 16px   | Small mobile          |
+| `sm`       | 376px     | 8       | 16px   | Mobile                |
+| `md`       | 481px     | 8       | 16px   | Large mobile / tablet |
+| `lg`       | 769px     | 12      | 32px   | Desktop               |
+| `xl`       | 1201px    | 12      | 32px   | Large desktop         |
+| `xxl`      | 1441px    | 12      | 32px   | Extra-large           |
+
+### Common column widths
+
+| Use case                             | `xsCols` | `lgCols` | `xlCols` |
+| ------------------------------------ | -------- | -------- | -------- |
+| Full width                           | 8        | 12       | —        |
+| Full width (form progress indicator) | 12       | 12       | —        |
+| Narrow content (forms)               | 12       | 9        | 8        |
+| Half-width (2-up cards)              | 8        | 6        | —        |
+| Third-width (3-up cards)             | 8        | 4        | —        |
+| Quarter-width (4-up metrics)         | 8        | 6        | 3        |
+| Sidebar                              | 8        | 3        | —        |
+| Main + sidebar main                  | 8        | 9        | —        |
+
+## Responsive styles
+
+Use `MediaQuery` for media queries in styled-components — not `Breakpoint`. `Breakpoint` contains raw numbers only; `MediaQuery` produces the actual `@media` string.
+
+```tsx
+import { MediaQuery, Spacing } from "@lifesg/react-design-system/theme";
+import styled from "styled-components";
+
+const ResponsiveDiv = styled.div`
+    padding: ${Spacing["spacing-16"]};
+
+    @media ${MediaQuery.MinWidth.lg} {
+        padding: ${Spacing["spacing-32"]};
+    }
+`;
+```
+
+| Token                    | Query type          | When it applies                  |
+| ------------------------ | ------------------- | -------------------------------- |
+| `MediaQuery.MinWidth.md` | `min-width: 481px`  | md and up (tablet+)              |
+| `MediaQuery.MinWidth.lg` | `min-width: 769px`  | lg and up (desktop+)             |
+| `MediaQuery.MaxWidth.md` | `max-width: 768px`  | md and below (mobile only)       |
+| `MediaQuery.MaxWidth.lg` | `max-width: 1200px` | lg and below (non-large-desktop) |
+
+Design mobile-first — define base styles for mobile, then override with `MinWidth` for larger screens.
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Do not use CSS modules or plain CSS/SCSS — styled-components only.
+-   Use `MediaQuery.MinWidth.*` for responsive styles — never `Breakpoint.*` or hardcoded pixel breakpoints.
+-   Use Spacing tokens for padding and margins — never hardcode pixel values.
+-   Prefix transient styled-component props with `$` to prevent DOM forwarding (e.g. `$variant`).
+
+Grid rules:
+
+-   Always use `type="grid"` on Container for responsive column layouts.
+-   Always specify `xsCols` on ColDiv — mobile-first; never only `lgCols`.
+-   Max `xsCols` is 8 (mobile/tablet), max `lgCols` is 12 (desktop).
+-   Never nest `Layout.Container` inside another `Layout.Container`.
+-   A column span applies to all larger viewports until overridden.
diff --git a/skills/fds-build/resources/v3/components/link-list.md b/skills/fds-build/resources/v3/components/link-list.md
new file mode 100644
index 0000000000..430d63de1d
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/link-list.md
@@ -0,0 +1,278 @@
+# LinkList
+
+Import: `import { LinkList } from "@lifesg/react-design-system/link-list"`
+
+## When to use
+
+Use to present a set of related links — related articles, resources, or quick-access shortcuts. Use `style="small"` for compact contexts such as sidebars or footnotes.
+
+## Sub-components
+
+### LinkListItemProps
+
+| Prop                   | Type                                                   | Default | Description                                        |
+| ---------------------- | ------------------------------------------------------ | ------- | -------------------------------------------------- |
+| `title`                | `string`                                               | —       | Link label — required                              |
+| `description`          | `string`                                               | —       | First-level supporting text below the title        |
+| `secondaryDescription` | `string`                                               | —       | Second-level supporting text below the description |
+| `options`              | `T`                                                    | —       | Custom properties to pass to the item              |
+| `onClick`              | `(event: React.MouseEvent<HTMLAnchorElement>) => void` | —       | Per-item click handler — overrides `onItemClick`   |
+| `data-testid`          | `string`                                               | —       | Test identifier for the item                       |
+
+Inherits `HTMLAnchorElement` attributes (e.g. `href`, `target`).
+
+### Custom labels
+
+| Prop       | Type     | Default       | Description                    |
+| ---------- | -------- | ------------- | ------------------------------ |
+| `viewMore` | `string` | `"View more"` | Label for the show-more button |
+| `viewLess` | `string` | `"View less"` | Label for the show-less button |
+
+## Variants
+
+| `style`     | Usage                                                  |
+| ----------- | ------------------------------------------------------ |
+| `"default"` | Standard size — use in main content areas              |
+| `"small"`   | Compact — use in sidebars, footnotes, or dense layouts |
+
+| `loadMode` | Usage                                                         |
+| ---------- | ------------------------------------------------------------- |
+| `"eager"`  | All items loaded upfront; use `maxShown` to collapse the list |
+| `"lazy"`   | Items fetched on demand; requires `loadMore` and `onLoadMore` |
+
+## Usage
+
+```tsx
+import { LinkList } from "@lifesg/react-design-system/link-list";
+
+<LinkList
+    items={[
+        {
+            title: "Apply for a grant",
+            description: "Find out if you qualify.",
+            href: "/grants/apply",
+        },
+        { title: "Check application status", href: "/grants/status" },
+        { title: "Download forms", href: "/grants/forms" },
+    ]}
+    maxShown={2}
+/>;
+```
+
+## Props
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListItemProps`
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListBaseProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+
+## Props — `LinkListEagerProps`
+
+| Prop       | Type      | Default | Description                                                                                                                                                                               |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
+| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
+
+## Props — `LinkListLazyProps`
+
+| Prop            | Type                          | Default | Description                                                                               |
+| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
+| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
+| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
+
+## Props — `LinkListProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
+
+## Props — `LinkListItemProps`
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListBaseProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+
+## Props — `LinkListEagerProps`
+
+| Prop       | Type      | Default | Description                                                                                                                                                                               |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
+| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
+
+## Props — `LinkListLazyProps`
+
+| Prop            | Type                          | Default | Description                                                                               |
+| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
+| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
+| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
+
+## Props — `LinkListProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
+
+## Props — `LinkListItemProps`
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListBaseProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+
+## Props — `LinkListEagerProps`
+
+| Prop       | Type      | Default | Description                                                                                                                                                                               |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
+| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
+
+## Props — `LinkListLazyProps`
+
+| Prop            | Type                          | Default | Description                                                                               |
+| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
+| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
+| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
+
+## Props — `LinkListProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
+
+## Props — `LinkListItemProps`
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListBaseProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+
+## Props — `LinkListEagerProps`
+
+| Prop       | Type      | Default | Description                                                                                                                                                                               |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
+| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
+
+## Props — `LinkListLazyProps`
+
+| Prop            | Type                          | Default | Description                                                                               |
+| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
+| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
+| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
+
+## Props — `LinkListProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
+
+## Rules
+
+-   Use `maxShown` when the list has many items to avoid overwhelming the user on first load (eager mode).
+-   In `"lazy"` mode, both `loadMore` and `onLoadMore` are required.
+-   `onItemClick` applies to all items; per-item `onClick` in `LinkListItemProps` overrides it for that item.
+-   Use per-item `onClick` when individual items need different handling; use `onItemClick` for a uniform handler across all items.
+-   Use `description` to give users enough context to choose the right link without clicking.
+
+## Anti-patterns
+
+-   Using lazy mode without providing `onLoadMore` — the "View more" button will be non-functional.
+-   Omitting `description` when link titles are ambiguous.
+-   Using LinkList for non-link content — use a list or table instead.
diff --git a/skills/fds-build/resources/v3/components/local-nav.md b/skills/fds-build/resources/v3/components/local-nav.md
new file mode 100644
index 0000000000..6bac8af5c2
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/local-nav.md
@@ -0,0 +1,331 @@
+# LocalNav
+
+Import: `import { LocalNavMenu, LocalNavDropdown } from "@lifesg/react-design-system/local-nav"`
+
+## When to use
+
+Use to let users navigate between sections on the same page (in-page navigation). Two components exist for different breakpoints — use both together for full responsive coverage.
+
+## Sub-components
+
+`LocalNavMenu`, `LocalNavDropdown`
+
+## Variants
+
+| Component          | Viewport          | Behaviour                                                              |
+| ------------------ | ----------------- | ---------------------------------------------------------------------- |
+| `LocalNavMenu`     | Desktop           | Vertical link list fixed to the left of page content, sticky on scroll |
+| `LocalNavDropdown` | Tablet and mobile | Renders inline, then sticks to top of viewport after scroll            |
+
+## Usage
+
+```tsx
+import {
+    LocalNavMenu,
+    LocalNavDropdown,
+} from "@lifesg/react-design-system/local-nav";
+
+const navItems = [
+    { title: "Overview", id: "overview" },
+    { title: "Eligibility", id: "eligibility" },
+    { title: "How to apply", id: "how-to-apply" },
+];
+
+{
+    /* Desktop */
+}
+<LocalNavMenu
+    items={navItems}
+    selectedItemIndex={activeIndex}
+    onNavItemSelect={(e, item, index) => {}}
+/>;
+
+{
+    /* Mobile / tablet */
+}
+<LocalNavDropdown
+    items={navItems}
+    selectedItemIndex={activeIndex}
+    defaultLabel="Jump to section"
+    onNavItemSelect={(e, item, index) => {}}
+/>;
+```
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Rules
+
+-   Use `LocalNavMenu` on desktop and `LocalNavDropdown` on tablet/mobile — render both and show/hide with CSS breakpoints.
+-   Always implement scroll-spy: update `selectedItemIndex` as the user scrolls to keep the active item in sync with the visible section. This is not automatic.
+-   Place `LocalNavMenu` on the left side of the page content area — not above it.
+-   Set `stickyOffset` on `LocalNavDropdown` equal to the height of the fixed Navbar so the dropdown does not overlap it when sticky.
+-   Keep item labels short — long labels cause overflow.
+-   `defaultLabel` is required on `LocalNavDropdown` — it is the placeholder shown before any item is selected.
+
+## Anti-patterns
+
+-   Do not use `LocalNavMenu` on tablet or mobile — use `LocalNavDropdown` instead.
+-   Do not omit scroll-spy logic — without it, `selectedItemIndex` will not reflect the current section.
+-   Do not place `LocalNavMenu` above the content — it must be a left sidebar.
diff --git a/skills/fds-build/resources/v3/components/masthead.md b/skills/fds-build/resources/v3/components/masthead.md
new file mode 100644
index 0000000000..6d477b6be7
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/masthead.md
@@ -0,0 +1,44 @@
+# Masthead
+
+Import: `import { Masthead } from "@lifesg/react-design-system/masthead"`
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Rules
+
+-   No mandatory props.
+-   `Masthead` is typically included via the `Navbar` `masthead` prop — use this standalone component only when rendering the masthead outside a Navbar context.
diff --git a/skills/fds-build/resources/v3/components/menu.md b/skills/fds-build/resources/v3/components/menu.md
new file mode 100644
index 0000000000..53f260f150
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/menu.md
@@ -0,0 +1,338 @@
+# Menu
+
+Import: `import { Menu } from "@lifesg/react-design-system/menu"`
+
+## When to use
+
+Use when a trigger element (button, avatar, nav link) should open a floating dropdown with a list of actions or links.
+
+Common use cases:
+
+-   Avatar / user account menu in authenticated dashboards
+-   Navbar link dropdown for sub-navigation
+
+## Sub-components
+
+`Menu`, `Menu.Content`, `Menu.Section`, `Menu.Item`, `Menu.Link`
+
+## Variants
+
+| Use case          | Structure                                                                                                                   |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| User account menu | First section: name + email as `Menu.Item`. Subsequent sections: `Menu.Link` for profile/settings, `Menu.Item` for sign out |
+| Nav link dropdown | Single `Menu.Section` with `Menu.Link` items                                                                                |
+| Action menu       | `Menu.Section` with `Menu.Item` elements and optional `label`                                                               |
+
+## Usage
+
+```tsx
+import { Menu } from "@lifesg/react-design-system/menu";
+import { Button } from "@lifesg/react-design-system/button";
+
+<Menu
+    menuContent={
+        <Menu.Content>
+            <Menu.Section showDivider={false}>
+                <Menu.Link href="/profile">Profile</Menu.Link>
+                <Menu.Link href="/settings">Settings</Menu.Link>
+            </Menu.Section>
+            <Menu.Section>
+                <Menu.Item label="Sign out" onClick={() => {}} />
+            </Menu.Section>
+        </Menu.Content>
+    }
+>
+    <Button.Default styleType="secondary">Account</Button.Default>
+</Menu>;
+```
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Rules
+
+-   `Menu` wraps a trigger element as its child — the trigger can be any element (e.g. `Avatar`, `Button`, `NavbarLink`).
+-   Pass `Menu.Content` as the `menuContent` prop — not as a child of `Menu`.
+-   Use `Menu.Link` for navigation (href-based); use `Menu.Item` for in-page actions (onClick-based).
+-   Use `Menu.Section` with `showDivider` to visually separate unrelated groups of actions.
+-   For user account menus, always show the user's name and email as the first section.
+-   Use `position` to control which side of the trigger the menu appears on; default `"bottom-start"` suits most cases.
+
+## Anti-patterns
+
+-   Do not pass `Menu.Content` as a child of `Menu` — it must be passed as `menuContent`.
+-   Do not mix navigation links and action items in the same `Menu.Section` without a divider.
+-   Do not use `Menu.Item` for links that navigate to a new page — use `Menu.Link` instead.
diff --git a/skills/fds-build/resources/v3/components/modal.md b/skills/fds-build/resources/v3/components/modal.md
new file mode 100644
index 0000000000..f9b0d97024
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/modal.md
@@ -0,0 +1,224 @@
+# Modal
+
+Import: `import { Modal } from "@lifesg/react-design-system/modal"`
+
+## When to use
+
+Use for focused interactions that interrupt the user's flow — confirmations, detail views, or short multi-field forms that do not warrant a new page.
+
+## Sub-components
+
+`Modal`, `Modal.Box`
+
+## Variants
+
+| Use case            | Notes                                                         |
+| ------------------- | ------------------------------------------------------------- |
+| Confirmation dialog | Title, description, and primary/secondary action buttons      |
+| Detail view         | Informational content with a close button                     |
+| Short form          | Minimal fields only; complex forms belong on a dedicated page |
+
+## Usage
+
+### Confirmation dialog
+
+```tsx
+import { useState } from "react";
+import { Modal } from "@lifesg/react-design-system/modal";
+import { Button } from "@lifesg/react-design-system/button";
+import { Text } from "@lifesg/react-design-system/text";
+
+const ConfirmDeleteModal = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+
+    const handleConfirm = () => {
+        // perform action
+        setShow(false);
+    };
+
+    return (
+        <>
+            <Button.Default onClick={() => setShow(true)}>
+                Delete item
+            </Button.Default>
+
+            <Modal show={show} enableOverlayClick onOverlayClick={handleClose}>
+                <Modal.Box showCloseButton onClose={handleClose}>
+                    <div style={{ padding: "2rem" }}>
+                        <Text.H3 style={{ marginBottom: "0.5rem" }}>
+                            Delete this item?
+                        </Text.H3>
+                        <Text.Body style={{ marginBottom: "1.5rem" }}>
+                            This action cannot be undone.
+                        </Text.Body>
+                        <div style={{ display: "flex", gap: "1rem" }}>
+                            <Button.Default
+                                styleType="secondary"
+                                onClick={handleClose}
+                            >
+                                Cancel
+                            </Button.Default>
+                            <Button.Default onClick={handleConfirm}>
+                                Confirm
+                            </Button.Default>
+                        </div>
+                    </div>
+                </Modal.Box>
+            </Modal>
+        </>
+    );
+};
+```
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Rules
+
+-   Always include `showCloseButton` on `Modal.Box` — the close button is the minimum required exit mechanism.
+-   `Modal` handles the overlay and animation. Always nest `Modal.Box` (or a custom content container) inside `Modal`.
+-   Fragments are not supported as direct children of `Modal`.
+-   Content inside `Modal.Box` scrolls automatically when it exceeds the screen height.
+-   Use `animationFrom="bottom"` for mobile-friendly sheet-style modals.
+-   Optionally also allow overlay dismissal via `enableOverlayClick` + `onOverlayClick`.
+-   Use Typography components for all text inside the modal — not raw HTML elements.
+-   Keep modal content focused — one task or decision per modal.
+-   Use illustrations (image above the title) for complex messages to reduce cognitive load; skip them for simple confirmations.
+
+## Anti-patterns
+
+-   Do not use a Fragment as a direct child of `Modal` — use a valid HTML element or a component that forwards a ref.
+-   Do not use modals for complex multi-step forms — navigate to a dedicated page instead.
+-   Do not stack modals unless using `zIndex` to manage layering explicitly.
+-   Do not omit `showCloseButton` — users must always have a way to exit the modal.
diff --git a/skills/fds-build/resources/v3/components/navbar.md b/skills/fds-build/resources/v3/components/navbar.md
new file mode 100644
index 0000000000..77d6872fe0
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/navbar.md
@@ -0,0 +1,995 @@
+# Navbar
+
+Import: `import { Navbar } from "@lifesg/react-design-system/navbar"`
+
+## When to use
+
+Place at the top of every page. Required on all pages. Automatically collapses navigation items into a hamburger drawer on mobile.
+
+## Variants
+
+| `layout`    | When to use                                     |
+| ----------- | ----------------------------------------------- |
+| `"default"` | Centered content container — standard pages     |
+| `"stretch"` | Full-width content — must match Footer `layout` |
+
+## Usage
+
+### Complete Navbar with link items, a submenu, and an action button
+
+`NavItemProps` is a discriminated union on `itemType`. The default (no `itemType`) is a link item. Use `itemType: "component"` for custom elements like an avatar with a dropdown.
+
+```tsx
+import { useState } from "react";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+
+const AppNavbar = () => {
+    const [selectedId, setSelectedId] = useState("home");
+
+    return (
+        <Navbar
+            masthead
+            selectedId={selectedId}
+            onItemClick={(item) => item.id && setSelectedId(item.id)}
+            items={{
+                desktop: [
+                    // itemType defaults to "link"
+                    {
+                        id: "home",
+                        children: "Home",
+                        href: "/",
+                    },
+                    {
+                        id: "guides",
+                        children: "Guides",
+                        href: "/guides",
+                        // subMenu items share the same shape as top-level link items
+                        subMenu: [
+                            {
+                                id: "guides-start",
+                                children: "Getting started",
+                                href: "/guides/start",
+                            },
+                            {
+                                id: "guides-api",
+                                children: "API reference",
+                                href: "/guides/api",
+                            },
+                        ],
+                    },
+                    {
+                        // itemType: "component" — renders arbitrary JSX; no href or id needed
+                        itemType: "component",
+                        children: <UserAvatar />,
+                    },
+                ],
+            }}
+            actionButtons={{
+                desktop: [
+                    {
+                        type: "button",
+                        args: { children: "Log in", styleType: "secondary" },
+                    },
+                ],
+            }}
+            resources={{
+                primary: { brandName: "MyService", logoSrc: "/logo.svg" },
+            }}
+        />
+    );
+};
+```
+
+Key points:
+
+-   Omit `itemType` (or set `itemType: "link"`) for standard anchor items.
+-   `subMenu` accepts the same `NavItemCommonProps` shape as top-level items.
+-   `itemType: "component"` items take `children: JSX.Element`; they do not accept `id`, `href`, or `subMenu`.
+-   `selectedId` matches against the `id` field of link items to highlight the active page.
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavbarButtonProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarDrawerApi`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavbarDrawerHandle`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavbarButtonProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarDrawerApi`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavbarDrawerHandle`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavbarButtonProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarDrawerApi`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavbarDrawerHandle`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavbarButtonProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarDrawerApi`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavbarDrawerHandle`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Rules
+
+-   Always set `masthead` — all government services must display the masthead.
+-   Always provide a meaningful `id` on each `NavItemCommonProps` item — used by `selectedId` to highlight the active page.
+-   `items.desktop` is required; the component crashes without it.
+-   `items.mobile` is optional — falls back to `desktop` if omitted.
+-   `layout` must match the `Footer` `layout` prop; do not mix `"default"` and `"stretch"`.
+-   Limit action buttons to 2–3 maximum.
+-   Use SVG format for brand logos.
+-   When using `fixed`, add corresponding top padding to page content to prevent overlap.
+-   Set `uncollapsible: true` on action buttons that must remain visible on mobile (e.g. avatar).
+-   Use `itemType: "component"` for custom nav elements such as an avatar with a `Menu` dropdown.
+-   Pass `type: "component"` with `args: { render: <Element /> }` for custom action button elements.
+-   `BrandType` is `"primary" | "secondary"` — passed to `onBrandClick`.
+-   The `"download"` button type is pre-programmed for LifeSG purposes.
+-   `NavbarButtonComponentProps` accepts a `render: JSX.Element` field for custom components.
+
+## Anti-patterns
+
+-   Do not omit `masthead` — it is required for government compliance.
+-   Do not supply a custom `resources.primary.logoSrc` unless the service has its own brand logo — omit `resources` to let the theme render its built-in logo.
+-   Do not use `hideNavElements` as a default state — it is for special page states only (e.g. maintenance).
+-   Do not use `fixed: false` unless the layout explicitly requires a non-fixed header.
+-   Do not add more than 3 action buttons — the navbar becomes visually cluttered.
diff --git a/skills/fds-build/resources/v3/components/notification-banner.md b/skills/fds-build/resources/v3/components/notification-banner.md
new file mode 100644
index 0000000000..5c0088852e
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/notification-banner.md
@@ -0,0 +1,371 @@
+# NotificationBanner
+
+Import: `import { NotificationBanner } from "@lifesg/react-design-system/notification-banner"`
+
+## When to use
+
+Use for notices that must always be visible to the user — maintenance windows, policy changes, mandatory announcements. Unlike Toast, it does not auto-dismiss. Unlike Alert, it applies to the entire page, not a specific section.
+
+## Sub-components
+
+-   `NotificationBanner.Link` — Inherits `TypographyLinkProps`. Use for links within banner content.
+
+## HOC
+
+```ts
+withNotificationBanner(data: NotificationContentAttributes[])
+```
+
+### NotificationContentAttributes
+
+| Prop              | Type                                       | Default | Description                                      |
+| ----------------- | ------------------------------------------ | ------- | ------------------------------------------------ |
+| `type`            | `"text"` \| `"link"`                       | —       | Type of content — required                       |
+| `content`         | `string`                                   | —       | Text content — required                          |
+| `otherAttributes` | `TypographyLinkProps` \| `TypographyProps` | —       | Additional props passed to the content component |
+
+## Usage
+
+```tsx
+import { NotificationBanner } from "@lifesg/react-design-system/notification-banner";
+
+<NotificationBanner dismissible sticky onDismiss={() => {}}>
+    Scheduled maintenance on 1 Feb 2026, 2–4 AM.{" "}
+    <NotificationBanner.Link href="/status">
+        View status
+    </NotificationBanner.Link>
+</NotificationBanner>;
+```
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Rules
+
+-   Place directly below the Navbar — above all page content.
+-   Use for page-wide or system-wide notices only — not for section-specific messages.
+-   Use `dismissible={false}` for mandatory notices users must not be able to dismiss.
+-   Use `NotificationBanner.Link` for all links within the banner — renders with the external link indicator automatically.
+-   Use `maxCollapsedHeight` for long notices to avoid overwhelming the layout.
+-   Use the `withNotificationBanner` HOC for banner content driven from a backend or external data source.
+
+## Anti-patterns
+
+-   Using NotificationBanner for section-specific messages — use Alert instead.
+-   Using raw anchor tags inside banner content — use `NotificationBanner.Link`.
+-   Placing the banner below page content — it must sit directly below the Navbar.
diff --git a/skills/fds-build/resources/v3/components/pagination.md b/skills/fds-build/resources/v3/components/pagination.md
new file mode 100644
index 0000000000..b75b1b8bb1
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/pagination.md
@@ -0,0 +1,213 @@
+# Pagination
+
+Import: `import { Pagination } from "@lifesg/react-design-system/pagination"`
+
+## When to use
+
+Use below lists or tables when content is split across multiple pages.
+
+## Usage
+
+### Basic pagination (1-based indexing)
+
+```tsx
+import { useState } from "react";
+import { Pagination } from "@lifesg/react-design-system/pagination";
+
+const ResultsList = () => {
+    const totalItems = 243;
+    const pageSize = 10;
+    // activePage is 1-based: page 1 is the first page, not page 0
+    const [activePage, setActivePage] = useState(1);
+
+    return (
+        <>
+            <MyResultsTable
+                items={results.slice(
+                    (activePage - 1) * pageSize,
+                    activePage * pageSize
+                )}
+            />
+            <Pagination
+                totalItems={totalItems}
+                pageSize={pageSize}
+                activePage={activePage}
+                onPageChange={(page) => setActivePage(page)} // page is 1-based
+                showFirstAndLastNav
+            />
+        </>
+    );
+};
+```
+
+### With page size changer
+
+`onPageSizeChange` receives `(page, pageSize)` — reset to page 1 when size changes.
+
+```tsx
+const [activePage, setActivePage] = useState(1);
+const [pageSize, setPageSize] = useState(10);
+
+<Pagination
+    totalItems={500}
+    pageSize={pageSize}
+    activePage={activePage}
+    onPageChange={(page) => setActivePage(page)}
+    onPageSizeChange={(page, size) => {
+        setPageSize(size);
+        setActivePage(page); // component resets to page 1 on size change
+    }}
+    showFirstAndLastNav
+    showPageSizeChanger
+/>;
+```
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Rules
+
+-   `activePage` is 1-based — the first page is `1`, not `0`.
+-   Always provide `onPageChange` to update `activePage` when the user changes page.
+-   Provide `onPageSizeChange` when `showPageSizeChanger` is enabled.
+-   Always center-align pagination below the results list.
+-   Place pagination below the results — never above.
+-   When total pages exceed 7, the component automatically shows an ellipsis — no additional props needed.
+-   The page size changer is only visible in the desktop viewport.
+-   The selected option in the page size changer takes precedence over `pageSize`.
+
+## Anti-patterns
+
+-   Do not use `showFirstAndLastNav` and `showPageSizeChanger` together unless the dataset is large enough to warrant both — avoid cluttering the interface with excessive controls.
+-   Do not left- or right-align pagination.
+-   Do not place pagination above the results.
+-   Do not use `pageSize` and a `pageSizeOptions` selection simultaneously without handling `onPageSizeChange` — the changer selection overrides `pageSize`.
diff --git a/skills/fds-build/resources/v3/components/pill.md b/skills/fds-build/resources/v3/components/pill.md
new file mode 100644
index 0000000000..54118a8ec4
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/pill.md
@@ -0,0 +1,95 @@
+# Pill
+
+Import: `import { Pill } from "@lifesg/react-design-system/pill"`
+
+## When to use
+
+Use to communicate a status — application state, approval outcome, or processing stage. For categories, filters, or tagging, use Tag instead.
+
+## Variants
+
+| `type`      | Usage                                                    |
+| ----------- | -------------------------------------------------------- |
+| `"outline"` | Subtle, secondary label — default for most uses          |
+| `"solid"`   | Higher emphasis — use when the status needs to stand out |
+
+| `colorType` | Semantic use                  |
+| ----------- | ----------------------------- |
+| `"green"`   | Success, active, approved     |
+| `"red"`     | Error, rejected, danger       |
+| `"yellow"`  | Warning, pending, in progress |
+| `"blue"`    | Informational                 |
+| `"grey"`    | Neutral, inactive, draft      |
+| `"primary"` | Theme primary color           |
+| `"black"`   | Default, no semantic meaning  |
+
+## Usage
+
+```tsx
+import { Pill } from "@lifesg/react-design-system/pill";
+
+<Pill type="outline" colorType="green">
+    Approved
+</Pill>;
+```
+
+## Props
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Props
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Props — `PillProps`
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Props — `PillProps`
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Props — `PillProps`
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Props — `PillProps`
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Rules
+
+-   Use color semantically — do not use `"red"` for non-error states.
+-   Use `"solid"` sparingly — reserve for statuses that need emphasis.
+-   Keep label text to 1–2 words — text does not wrap inside a pill.
+-   Pill is a static, non-interactive label — it does not accept `onClick`. Use Tag with `interactive` for clickable labels.
+
+## Anti-patterns
+
+-   Using Pill for categories or filters — use Tag instead.
+-   Using `"red"` for non-error states.
+-   Labels longer than 2–3 words — text overflow is not handled.
diff --git a/skills/fds-build/resources/v3/components/popover.md b/skills/fds-build/resources/v3/components/popover.md
new file mode 100644
index 0000000000..cc1df61a0e
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/popover.md
@@ -0,0 +1,295 @@
+# Popover
+
+Import: `import { Popover, withPopover } from "@lifesg/react-design-system/popover"`
+
+## When to use
+
+Use to show supplementary information when a user interacts with (clicks or hovers over) an element. On mobile, the popover renders as a bottom modal sheet.
+
+## Variants
+
+Two usage patterns are available:
+
+-   **`withPopover` HOC** — wraps an existing element to add popover behaviour.
+-   **`Popover` component** — a standalone popover that you control manually.
+
+## Usage
+
+```tsx
+import { withPopover } from "@lifesg/react-design-system/popover";
+import { Button } from "@lifesg/react-design-system/button";
+
+{
+    /* Preferred: HOC wraps an existing element */
+}
+{
+    withPopover(
+        <Button.Default styleType="link">What is this?</Button.Default>,
+        { content: "This field requires your NRIC number.", trigger: "click" }
+    );
+}
+```
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Rules
+
+-   Use `withPopover` for most cases — it handles trigger logic automatically.
+-   Use the `Popover` component directly when you need full manual control over visibility.
+-   On mobile viewports the Popover renders as a bottom modal sheet — provide `onMobileClose` to handle dismissal.
diff --git a/skills/fds-build/resources/v3/components/progress-indicator.md b/skills/fds-build/resources/v3/components/progress-indicator.md
new file mode 100644
index 0000000000..96aa9ae66e
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/progress-indicator.md
@@ -0,0 +1,97 @@
+# ProgressIndicator
+
+Import: `import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator"`
+
+## When to use
+
+Use in multi-step forms or wizards to show the user's position within the flow.
+
+## Usage
+
+```tsx
+import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
+
+const steps = [
+    { label: "Personal details" },
+    { label: "Documents" },
+    { label: "Review" },
+];
+
+<ProgressIndicator
+    steps={steps}
+    currentIndex={1}
+    displayExtractor={(step) => step.label}
+/>;
+```
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Rules
+
+-   `currentIndex` is zero-based — the first step is `0`.
+-   Always provide `displayExtractor` when `steps` contains objects — without it, step labels will not render.
+-   Update `currentIndex` as the user moves between steps.
+-   Do not use `fadeColor` or `fadePosition` — these props are deprecated and have no effect in v3.
+
+## Anti-patterns
+
+-   Do not use ProgressIndicator on single-step pages.
+-   Do not use it as a general progress bar for loading states — use a loading spinner or skeleton instead.
diff --git a/skills/fds-build/resources/v3/components/radio-button.md b/skills/fds-build/resources/v3/components/radio-button.md
new file mode 100644
index 0000000000..2d99b432b5
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/radio-button.md
@@ -0,0 +1,111 @@
+# RadioButton
+
+Import: `import { RadioButton } from "@lifesg/react-design-system/radio-button"`
+
+## When to use
+
+-   User must choose exactly one option from a small set (typically 2–5 options).
+-   Options are mutually exclusive.
+
+Prefer `Toggle` with `type="radio"` over bare `RadioButton` when building form inputs that need a visible card-style label container.
+
+## Variants
+
+| `displaySize` | When to use                    |
+| ------------- | ------------------------------ |
+| `"default"`   | Standard use                   |
+| `"small"`     | Dense layouts, inline controls |
+
+## Usage
+
+```tsx
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+<div role="radiogroup" aria-labelledby="group-label">
+    <label>
+        <RadioButton
+            name="plan"
+            value="basic"
+            checked={selected === "basic"}
+            onChange={(e) => {}}
+        />
+        Basic
+    </label>
+    <label>
+        <RadioButton
+            name="plan"
+            value="pro"
+            checked={selected === "pro"}
+            onChange={(e) => {}}
+        />
+        Pro
+    </label>
+</div>;
+```
+
+## Props
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Props — `RadioButtonProps`
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Props — `RadioButtonProps`
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Props — `RadioButtonProps`
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Props — `RadioButtonProps`
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Rules
+
+-   Always wrap a group in `role="radiogroup"` with a visible group label (`aria-labelledby`).
+-   Always set the same `name` on all buttons in a group for native radio behaviour.
+-   Always pair each button with a visible label — wrap in `<label>` or use `aria-label`.
+-   Never render a single `RadioButton` in isolation — radio inputs only make sense in groups.
+
+## Anti-patterns
+
+-   Do not use `RadioButton` for binary yes/no questions in forms — use `Toggle` with `type="yes"` / `type="no"`.
+-   Do not use `RadioButton` when multiple selections are allowed — use `Checkbox` instead.
+-   Do not omit the `name` prop — without it, browsers cannot enforce mutual exclusivity natively.
diff --git a/skills/fds-build/resources/v3/components/schedule.md b/skills/fds-build/resources/v3/components/schedule.md
new file mode 100644
index 0000000000..a780729625
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/schedule.md
@@ -0,0 +1,429 @@
+# Schedule
+
+Import: `import { Schedule } from "@lifesg/react-design-system/schedule"`
+
+## Sub-components
+
+-   `ScheduleEntityProps` — a service/resource row with its time slots
+-   `ScheduleSlotProps` — a single bookable timeslot cell
+-   `SchedulePopoverProps` — popover config for a slot
+
+## ScheduleEntityProps
+
+| Prop       | Type                  | Description                          |
+| ---------- | --------------------- | ------------------------------------ |
+| `name` \*  | `string`              | The name of the service or resource  |
+| `slots` \* | `ScheduleSlotProps[]` | Array of time slots for this service |
+| `id`       | `string`              | Identifier for the service entity    |
+
+## ScheduleSlotProps
+
+| Prop            | Type                                                     | Description                                                 |
+| --------------- | -------------------------------------------------------- | ----------------------------------------------------------- |
+| `startTime` \*  | `string`                                                 | Start time (`HH:mm`)                                        |
+| `endTime` \*    | `string`                                                 | End time (`HH:mm`)                                          |
+| `status` \*     | `"booked" \| "available" \| "blocked" \| "pending"`      | Determines slot visual style                                |
+| `date` \*       | `string`                                                 | Date for this timeslot (`YYYY-MM-DD`)                       |
+| `id`            | `string`                                                 | Identifier; passed to `onClick` and `onSlotClick` callbacks |
+| `capacity`      | `number`                                                 | Maximum capacity for this timeslot                          |
+| `booked`        | `number`                                                 | Number of current bookings                                  |
+| `customPopover` | `SchedulePopoverProps`                                   | Popover config for the slot                                 |
+| `onClick`       | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | Per-slot click callback                                     |
+
+## SchedulePopoverProps
+
+| Prop         | Type                                               | Default | Description                                        |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------- |
+| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover              |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered in the popover                    |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Hover delay in milliseconds (`hover` trigger only) |
+| `offset`     | `number`                                           | —       | Offset in px applied to the popover                |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Rules
+
+-   `date`, `serviceData`, `onPreviousDayClick`, and `onNextDayClick` are mandatory.
+-   Avoid combining a per-slot `onClick` with `customPopover` using `trigger: "click"` on the same slot — they conflict.
diff --git a/skills/fds-build/resources/v3/components/sidenav.md b/skills/fds-build/resources/v3/components/sidenav.md
new file mode 100644
index 0000000000..dac2924a3f
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/sidenav.md
@@ -0,0 +1,438 @@
+# Sidenav
+
+Import: `import { Sidenav } from "@lifesg/react-design-system/sidenav"`
+
+## When to use
+
+Use for section-level navigation in admin dashboards or portals. The Sidenav sits fixed to the left and fills the full viewport height below the Navbar, which is always present at the top.
+
+Do not use for:
+
+-   Consumer-facing pages (use Navbar nav items or LocalNav instead)
+-   Simple single-section apps
+
+## Sub-components
+
+```
+Sidenav                          ← fixed sidebar container
+├── Sidenav.Group                ← logical section (optional separator)
+│   ├── Sidenav.Item             ← top-level nav link (no children)
+│   ├── Sidenav.DrawerItem       ← expandable item with sub-links
+│   │   ├── Sidenav.DrawerSubitem
+│   │   └── Sidenav.DrawerSubitem
+│   └── Sidenav.Item
+└── Sidenav.Group
+    └── Sidenav.Item
+```
+
+`Sidenav.Group` is the only valid direct child of `Sidenav`. Use `Sidenav.Item` for leaf links, `Sidenav.DrawerItem` when a nav entry has sub-items. `Sidenav.DrawerSubitem` can only nest inside `Sidenav.DrawerItem`.
+
+## Variants
+
+| Depth    | Components used                              |
+| -------- | -------------------------------------------- |
+| 1 level  | `Sidenav` → `Sidenav.Group` → `Sidenav.Item` |
+| 2 levels | + `Sidenav.DrawerItem`                       |
+| 3 levels | + `Sidenav.DrawerSubitem`                    |
+
+## Usage
+
+### 2-group, 3-item nav with full nesting
+
+```tsx
+import { CalendarIcon } from "@lifesg/react-icons/calendar";
+import { DocIcon } from "@lifesg/react-icons/doc";
+import { Square2x2Icon } from "@lifesg/react-icons/square-2x2";
+import { useState } from "react";
+import { Sidenav } from "@lifesg/react-design-system/sidenav";
+
+const AdminSidenav = () => {
+    const [selectedId, setSelectedId] = useState("dashboard");
+
+    return (
+        <Sidenav>
+            {/* Group 1 — top-level items with no sub-items: onClick fires */}
+            <Sidenav.Group separator>
+                <Sidenav.Item
+                    id="dashboard"
+                    title="Dashboard"
+                    icon={<Square2x2Icon />}
+                    selected={selectedId === "dashboard"}
+                    onClick={(id) => setSelectedId(id)}
+                />
+            </Sidenav.Group>
+
+            {/* Group 2 — Reports has sub-items so onClick is omitted;
+                clicking it opens the drawer instead */}
+            <Sidenav.Group>
+                <Sidenav.Item
+                    id="reports"
+                    title="Reports"
+                    icon={<DocIcon />}
+                    selected={
+                        selectedId === "monthly-reports" ||
+                        selectedId === "annual-reports"
+                    }
+                >
+                    {/* DrawerItem with no children: onClick fires */}
+                    <Sidenav.DrawerItem
+                        id="monthly-reports"
+                        title="Monthly reports"
+                        onClick={(id) => setSelectedId(id)}
+                    />
+                    {/* DrawerItem with children: onClick is omitted */}
+                    <Sidenav.DrawerItem
+                        id="annual-reports"
+                        title="Annual reports"
+                        selected={selectedId === "annual-reports"}
+                    >
+                        <Sidenav.DrawerSubitem
+                            id="annual-summary"
+                            title="Summary"
+                            onClick={(id) => setSelectedId(id)}
+                        />
+                        <Sidenav.DrawerSubitem
+                            id="annual-detail"
+                            title="Detailed breakdown"
+                            onClick={(id) => setSelectedId(id)}
+                        />
+                    </Sidenav.DrawerItem>
+                </Sidenav.Item>
+                <Sidenav.Item
+                    id="bookings"
+                    title="Bookings"
+                    icon={<CalendarIcon />}
+                    selected={selectedId === "bookings"}
+                    onClick={(id) => setSelectedId(id)}
+                />
+            </Sidenav.Group>
+        </Sidenav>
+    );
+};
+```
+
+Key wiring notes:
+
+-   `onClick` on `Sidenav.Item` is only attached when the item has **no** `children` — if children are present, clicking opens the drawer instead and `onClick` is ignored.
+-   The same rule applies to `Sidenav.DrawerItem`: omit `onClick` when it wraps `DrawerSubitem` children.
+-   Track `selectedId` in parent state; pass `selected={selectedId === id}` down to whichever level is active.
+-   `separator` on `Sidenav.Group` draws a dividing line below that group.
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Rules
+
+-   Always provide `icon` on `Sidenav.Item` — it is required for the collapsed state.
+-   Maximum depth is 3 levels: `Item` → `DrawerItem` → `DrawerSubitem`.
+-   Use `Sidenav.Group` with `separator` to visually separate unrelated sections.
+-   `onClick` on `Sidenav.Item` and `Sidenav.DrawerItem` only fires when the item has no children — do not attach click handlers to items that have sub-items.
+
+## Anti-patterns
+
+-   Do not omit `icon` on `Sidenav.Item` — the component is designed around icon + label.
+-   Do not nest deeper than 3 levels.
+-   Do not use `Sidenav` on consumer-facing pages — it is suited to admin portals.
diff --git a/skills/fds-build/resources/v3/components/singpass-button.md b/skills/fds-build/resources/v3/components/singpass-button.md
new file mode 100644
index 0000000000..595ee34ca6
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/singpass-button.md
@@ -0,0 +1,49 @@
+# SingpassButton
+
+Import: `import { SingpassButton } from "@lifesg/react-design-system/singpass-button"`
+
+## Props
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Props
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Props — `SingpassButtonProps`
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Props — `SingpassButtonProps`
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Props — `SingpassButtonProps`
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Props — `SingpassButtonProps`
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Rules
+
+-   Do not custom style — Singpass branding guidelines require using the component as-is.
diff --git a/skills/fds-build/resources/v3/components/smart-app-banner.md b/skills/fds-build/resources/v3/components/smart-app-banner.md
new file mode 100644
index 0000000000..b8e82add92
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/smart-app-banner.md
@@ -0,0 +1,163 @@
+# SmartAppBanner
+
+Import: `import { SmartAppBanner } from "@lifesg/react-design-system/smart-app-banner"`
+
+## SmartAppBannerContentProps
+
+| Prop                 | Type     | Default | Description                                                                    |
+| -------------------- | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*           | `string` | —       | Display title                                                                  |
+| `buttonLabel` \*     | `string` | —       | Button text                                                                    |
+| `buttonAriaLabel` \* | `string` | —       | Aria label for the button                                                      |
+| `numberOfStars` \*   | `number` | —       | Stars to display; decimals accepted; `NaN` or negative hides the stars display |
+| `message`            | `string` | —       | Description below the title                                                    |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
diff --git a/skills/fds-build/resources/v3/components/tab.md b/skills/fds-build/resources/v3/components/tab.md
new file mode 100644
index 0000000000..aa46519696
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/tab.md
@@ -0,0 +1,228 @@
+# Tab
+
+Import: `import { Tab } from "@lifesg/react-design-system/tab"`
+
+## When to use
+
+Use to switch between related views within the same context — not for navigating between pages.
+
+## Sub-components
+
+```
+Tab                          ← tab strip container, manages active state
+├── Tab.Item                 ← individual tab (title + panel content)
+├── Tab.Item
+└── Tab.Item
+```
+
+All direct children of `Tab` must be `Tab.Item`. `Tab.Item` renders both the tab label and its associated panel content.
+
+## Variants
+
+| Mode                         | When to use                                |
+| ---------------------------- | ------------------------------------------ |
+| Uncontrolled (default)       | Tab manages its own active state           |
+| Controlled (`currentActive`) | Parent needs to control which tab is shown |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Rules
+
+-   When `currentActive` is set, the component is in controlled mode — you must update it via `onTabClick`.
+-   Tab order is determined by the order of `Tab.Item` children.
+-   Keep tab labels short — labels truncate beyond 20 characters on tablet and mobile.
+-   Use controlled mode (`currentActive` + `onTabClick`) only when the parent needs to sync tab state with external logic (e.g. URL params, deep links).
+-   Use `titleAddon` with a `Badge` to show counts or status indicators on tab labels.
+-   Set `headingLevel` to match the component's position in the page heading hierarchy.
+-   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
+
+## Anti-patterns
+
+-   Do not use tabs for page-level navigation — use Navbar or LocalNav instead.
+-   Do not use more than 5–6 tabs — consider a different navigation pattern for many sections.
+-   Do not use long labels — they truncate on mobile and tablet.
+-   Do not set `currentActive` without also providing `onTabClick` — the tab state will be stuck.
diff --git a/skills/fds-build/resources/v3/components/table.md b/skills/fds-build/resources/v3/components/table.md
new file mode 100644
index 0000000000..9c6726931f
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/table.md
@@ -0,0 +1,65 @@
+# Table
+
+Import: `import { Table } from "@lifesg/react-design-system/table"`
+
+## When to use
+
+-   Displaying read-only structured data with no sorting, selection, or pagination needed.
+-   Use `DataTable` instead when you need sortable columns, row selection, or pagination controls.
+
+## Composition
+
+`Table` is a thin styled wrapper over semantic HTML table elements:
+
+| Sub-component      | Renders as             |
+| ------------------ | ---------------------- |
+| `Table.Container`  | `<div>` scroll wrapper |
+| `Table`            | `<table>`              |
+| `Table.Head`       | `<thead>`              |
+| `Table.Body`       | `<tbody>`              |
+| `Table.Row`        | `<tr>`                 |
+| `Table.HeaderCell` | `<th>`                 |
+| `Table.Cell`       | `<td>`                 |
+
+Always wrap with `Table.Container` so the table scrolls horizontally on narrow viewports.
+
+## Usage
+
+```tsx
+import { Table } from "@lifesg/react-design-system/table";
+import { Typography } from "@lifesg/react-design-system/typography";
+
+const ServiceTable = () => (
+    <Table.Container>
+        <Table>
+            <Table.Head>
+                <Table.Row>
+                    <Table.HeaderCell>Service</Table.HeaderCell>
+                    <Table.HeaderCell>Status</Table.HeaderCell>
+                    <Table.HeaderCell>Last updated</Table.HeaderCell>
+                </Table.Row>
+            </Table.Head>
+            <Table.Body>
+                <Table.Row>
+                    <Table.Cell>MyService</Table.Cell>
+                    <Table.Cell>Active</Table.Cell>
+                    <Table.Cell>1 Jan 2024</Table.Cell>
+                </Table.Row>
+            </Table.Body>
+        </Table>
+    </Table.Container>
+);
+```
+
+## Rules
+
+-   Always wrap in `Table.Container` — it provides horizontal scroll on small viewports.
+-   Use `Table.HeaderCell` (`<th>`) for column headers, not `Table.Cell`.
+-   Use `DataTable` for sortable, selectable, or paginated tables — `Table` is read-only only.
+-   All props pass through to the underlying HTML element — use `style` or `className` for custom layout only when DS tokens don't cover the need.
+
+## Anti-patterns
+
+-   Do not use `Table` when rows need to be selected or sorted — use `DataTable`.
+-   Do not nest tables.
+-   Do not omit `Table.Container` — the table will overflow on mobile without it.
diff --git a/skills/fds-build/resources/v3/components/tag.md b/skills/fds-build/resources/v3/components/tag.md
new file mode 100644
index 0000000000..875fb409c5
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/tag.md
@@ -0,0 +1,118 @@
+# Tag
+
+Import: `import { Tag } from "@lifesg/react-design-system/tag"`
+
+## When to use
+
+Use to label categories, apply filters, or tag items. Can be static or interactive — set `interactive` to render as a button for toggleable filters or selectable categories. For status labels, use Pill instead.
+
+## Variants
+
+| `type`      | Usage                                                 |
+| ----------- | ----------------------------------------------------- |
+| `"outline"` | Subtle, secondary label — default for most uses       |
+| `"solid"`   | Higher emphasis — use when the tag needs to stand out |
+
+| `colorType` | Semantic use                  |
+| ----------- | ----------------------------- |
+| `"green"`   | Success, active, approved     |
+| `"red"`     | Error, rejected, danger       |
+| `"yellow"`  | Warning, pending, in progress |
+| `"blue"`    | Informational                 |
+| `"grey"`    | Neutral, inactive, draft      |
+| `"primary"` | Theme primary color           |
+| `"black"`   | Default, no semantic meaning  |
+
+## Usage
+
+```tsx
+import { Tag } from "@lifesg/react-design-system/tag";
+
+{
+    /* Static category tag */
+}
+<Tag type="outline" colorType="blue">
+    Health
+</Tag>;
+
+{
+    /* Interactive filter tag */
+}
+<Tag type="solid" colorType="primary" interactive onClick={() => {}}>
+    Finance
+</Tag>;
+```
+
+## Props
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Props
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Props — `TagProps`
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Props — `TagProps`
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Props — `TagProps`
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Props — `TagProps`
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Rules
+
+-   When `interactive` is `true`, the component renders as a `<button>` with an extended touch target on mobile.
+-   Always pair `interactive` with `onClick` — interactive tags are larger on mobile to extend the touch target.
+-   Use color semantically — do not use `"red"` for non-error states.
+-   Keep label text short — text does not wrap inside a tag.
+-   Use Tag for categories, filters, and tagging — use Pill for statuses.
+
+## Anti-patterns
+
+-   Using Tag for status labels — use Pill instead.
+-   Setting `interactive` without providing an `onClick` handler.
+-   Using `"red"` for non-error states.
diff --git a/skills/fds-build/resources/v3/components/text-list.md b/skills/fds-build/resources/v3/components/text-list.md
new file mode 100644
index 0000000000..6b13b0f169
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/text-list.md
@@ -0,0 +1,169 @@
+# TextList
+
+Import: `import { TextList } from "@lifesg/react-design-system/text-list"`
+
+## When to use
+
+Use for semantic list content. For navigation links, use `LinkList` instead.
+
+## Sub-components
+
+| Sub-component | Renders | When to use                                  |
+| ------------- | ------- | -------------------------------------------- |
+| `TextList.Ul` | `<ul>`  | Unordered list — items without a sequence    |
+| `TextList.Ol` | `<ol>`  | Ordered list — numbered or lettered sequence |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Rules
+
+-   Children must be `<li>` elements.
+-   Use `bulletType` as a `ReactNode` to render a custom icon bullet — the icon is automatically marked `aria-hidden`.
diff --git a/skills/fds-build/resources/v3/components/time-slot-bar-week.md b/skills/fds-build/resources/v3/components/time-slot-bar-week.md
new file mode 100644
index 0000000000..92ebaf1c1d
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/time-slot-bar-week.md
@@ -0,0 +1,191 @@
+# TimeSlotBarWeek
+
+Import: `import { TimeSlotBarWeek } from "@lifesg/react-design-system/time-slot-bar-week"`
+
+## Sub-components
+
+-   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
+-   `TimeSlot` — shape of each slot in the `slots` map
+-   `TimeSlotBarStyleAttributes` — visual styling for a slot
+
+## YearMonthWeekDisplay
+
+| Prop    | Type                                                | Description                                            |
+| ------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
+| `year`  | `number`                                            | Visible year                                           |
+| `month` | `number`                                            | Visible month (1–12)                                   |
+
+## TimeSlot
+
+| Prop              | Type                         | Description                        |
+| ----------------- | ---------------------------- | ---------------------------------- |
+| `id` \*           | `string`                     | Unique identifier of the slot      |
+| `startTime` \*    | `string`                     | Start time (`HH:mm`)               |
+| `endTime` \*      | `string`                     | End time (`HH:mm`)                 |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                     |
+| `label`           | `string`                     | Text content within the slot cell  |
+| `clickable`       | `boolean`                    | Whether the slot cell is clickable |
+
+## TimeSlotBarStyleAttributes
+
+| Prop                 | Type                     | Default     | Description                                       |
+| -------------------- | ------------------------ | ----------- | ------------------------------------------------- |
+| `backgroundColor` \* | `string`                 | —           | The color of the slot                             |
+| `styleType`          | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
+| `backgroundColor2`   | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
+
+## Props
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `TimeSlotBarWeekProps`
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `TimeSlotBarWeekProps`
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `TimeSlotBarWeekProps`
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `TimeSlotBarWeekProps`
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Rules
+
+-   `slots` is mandatory.
+-   `startTime`/`endTime` on the component must be full hours (e.g. `"08:00"`, `"13:00"`).
diff --git a/skills/fds-build/resources/v3/components/time-slot-bar.md b/skills/fds-build/resources/v3/components/time-slot-bar.md
new file mode 100644
index 0000000000..75b26b7924
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/time-slot-bar.md
@@ -0,0 +1,222 @@
+# TimeSlotBar
+
+Import: `import { TimeSlotBar } from "@lifesg/react-design-system/time-slot-bar"`
+
+## TimeSlot
+
+| Prop              | Type                         | Default | Description                                |
+| ----------------- | ---------------------------- | ------- | ------------------------------------------ |
+| `id` \*           | `string`                     | —       | Unique identifier of the slot              |
+| `startTime` \*    | `string`                     | —       | Slot start time in `HH:mm` (15-min blocks) |
+| `endTime` \*      | `string`                     | —       | Slot end time in `HH:mm` (15-min blocks)   |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | —       | Styling for this slot                      |
+| `label`           | `string`                     | —       | Text content within the slot cell          |
+| `clickable`       | `boolean`                    | —       | Whether the slot cell is clickable         |
+
+## TimeSlotBarStyleAttributes
+
+| Prop                    | Type                     | Default     | Description                                                            |
+| ----------------------- | ------------------------ | ----------- | ---------------------------------------------------------------------- |
+| `backgroundColor` \*    | `string`                 | —           | Slot color                                                             |
+| `styleType`             | `"default" \| "stripes"` | `"default"` | Style type of the slot                                                 |
+| `backgroundColor2`      | `string`                 | —           | Secondary color; used with `styleType="stripes"`                       |
+| `hoverBackgroundColor`  | `string`                 | —           | Background on hover; only when `clickable`                             |
+| `hoverBackgroundColor2` | `string`                 | —           | Secondary hover color for `styleType="stripes"`; only when `clickable` |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
diff --git a/skills/fds-build/resources/v3/components/time-slot-week-view.md b/skills/fds-build/resources/v3/components/time-slot-week-view.md
new file mode 100644
index 0000000000..69f44f97fe
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/time-slot-week-view.md
@@ -0,0 +1,210 @@
+# TimeSlotWeekView
+
+Import: `import { TimeSlotWeekView } from "@lifesg/react-design-system/time-slot-week-view"`
+
+## Sub-components
+
+-   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
+-   `TimeSlot` — shape of each slot in the `slots` map
+-   `TimeSlotBarStyleAttributes` — visual styling for a slot
+
+## YearMonthWeekDisplay
+
+| Prop    | Type                                                | Description                                            |
+| ------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
+| `year`  | `number`                                            | Visible year                                           |
+| `month` | `number`                                            | Visible month (1–12)                                   |
+
+## TimeSlot
+
+| Prop              | Type                         | Description                                                       |
+| ----------------- | ---------------------------- | ----------------------------------------------------------------- |
+| `id` \*           | `string`                     | Unique identifier of the slot                                     |
+| `startTime` \*    | `string`                     | Start time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45) |
+| `endTime` \*      | `string`                     | End time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45)   |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                                                    |
+| `label`           | `string`                     | Text content within the slot cell                                 |
+| `clickable`       | `boolean`                    | Whether the slot cell is clickable                                |
+
+## TimeSlotBarStyleAttributes
+
+| Prop             | Type                     | Default     | Description                                       |
+| ---------------- | ------------------------ | ----------- | ------------------------------------------------- |
+| `color` \*       | `string`                 | —           | The color of the slot                             |
+| `styleType`      | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
+| `secondaryColor` | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Rules
+
+-   `slots` is mandatory.
+-   `TimeSlot` minutes must be in 15-minute blocks (00, 15, 30, 45).
+-   `TimeSlotBarStyleAttributes` uses `color`/`secondaryColor` — not `backgroundColor`/`backgroundColor2` as in `TimeSlotBarWeek`.
diff --git a/skills/fds-build/resources/v3/components/timeline.md b/skills/fds-build/resources/v3/components/timeline.md
new file mode 100644
index 0000000000..824f16599f
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/timeline.md
@@ -0,0 +1,184 @@
+# Timeline
+
+Import: `import { Timeline } from "@lifesg/react-design-system/timeline"`
+
+## When to use
+
+Use to communicate a process, application history, or sequence of steps. Use the `numeric` variant for numbered step-by-step instructions.
+
+## Sub-components
+
+### TimelineItemProps
+
+| Prop       | Type                                                                                                         | Default | Description                                            |
+| ---------- | ------------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------ |
+| `title`    | `string`                                                                                                     | —       | Item title — required                                  |
+| `content`  | `JSX.Element`                                                                                                | —       | Item content — required                                |
+| `variant`  | `"completed" \| "current" \| "upcoming-active" \| "upcoming-inactive" \| "numeric" \| "error" \| "disabled"` | —       | Visual state of the item indicator                     |
+| `statuses` | `PillProps[]`                                                                                                | —       | Status pills shown alongside the item (max 2 rendered) |
+
+## Variants
+
+| `variant`             | Usage                                |
+| --------------------- | ------------------------------------ |
+| `"completed"`         | Step or event is done                |
+| `"current"`           | Step currently in progress           |
+| `"upcoming-active"`   | Next actionable step                 |
+| `"upcoming-inactive"` | Future step, not yet actionable      |
+| `"error"`             | Step has an error                    |
+| `"disabled"`          | Step is not available                |
+| `"numeric"`           | Numbered step — use for instructions |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Rules
+
+-   The first item defaults to `variant="current"` and subsequent items default to `variant="upcoming-active"` when `variant` is not specified.
+-   Only a maximum of 2 `statuses` pills will render per item regardless of how many are provided.
+-   `counterOffset` shifts the numeric counter: if `offset=2`, the first item shows `3`.
+-   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
+-   Use `counterOffset` when showing a partial sequence (e.g. steps 3–5 of a larger flow).
+-   Use `statuses` with `PillProps` — follow Pill color semantics (see `pill.md`).
+-   Use `"numeric"` variant consistently across all items in an instruction list — do not mix with status variants.
+
+## Anti-patterns
+
+-   Mixing `"numeric"` and status variants in the same timeline — choose one paradigm per use case.
+-   Providing more than 2 status pills per item — only 2 will render.
+-   Using Timeline for non-sequential content — use a list or table instead.
diff --git a/skills/fds-build/resources/v3/components/timetable.md b/skills/fds-build/resources/v3/components/timetable.md
new file mode 100644
index 0000000000..8537344ad9
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/timetable.md
@@ -0,0 +1,522 @@
+# Timetable
+
+Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
+
+## TimeTableRowData
+
+| Prop                    | Type                                                       | Default   | Description                                               |
+| ----------------------- | ---------------------------------------------------------- | --------- | --------------------------------------------------------- |
+| `name` \*               | `string`                                                   | —         | Row header name                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                   | —         | Array of row cells; sorted by start time automatically    |
+| `id`                    | `string`                                                   | —         | Row identifier; passed to `onRowNameClick`                |
+| `subtitle`              | `string \| JSX.Element`                                    | —         | Row header subtitle                                       |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                    | —         | Custom popover for the row header                         |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                    | —         | Custom popover for auto-filled blocked cells              |
+| `rowMinTime`            | `string`                                                   | `minTime` | Row start time; blocked cells are auto-filled before this |
+| `rowMaxTime`            | `string`                                                   | `maxTime` | Row end time; blocked cells are auto-filled after this    |
+| `onRowNameClick`        | `(rowData: TimeTableRowData, e: React.MouseEvent) => void` | —         | Called when the row header name is clicked                |
+
+## TimeTableRowCellData
+
+| Prop                  | Type                                                            | Default | Description                                                        |
+| --------------------- | --------------------------------------------------------------- | ------- | ------------------------------------------------------------------ |
+| `startTime` \*        | `string`                                                        | —       | Cell start time in `HH:mm` (duration must be a multiple of 15 min) |
+| `endTime` \*          | `string`                                                        | —       | Cell end time in `HH:mm` (duration must be a multiple of 15 min)   |
+| `id`                  | `string`                                                        | —       | Cell identifier; passed to `onClick`                               |
+| `status`              | `"filled" \| "blocked" \| "default" \| "pending" \| "disabled"` | —       | Cell status, determines rendering style                            |
+| `title`               | `string`                                                        | —       | Title shown for this cell                                          |
+| `subtitle`            | `string`                                                        | —       | Subtitle shown for this cell                                       |
+| `customPopover`       | `TimeTablePopoverProps`                                         | —       | Custom popover for the cell                                        |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                  | —       | Custom style attributes; falls back to default row bar colors      |
+| `onClick`             | `(data: TimeTableRowCellData, e: React.MouseEvent) => void`     | —       | Called when the cell is clicked                                    |
+
+## TimeTablePopoverProps
+
+| Prop         | Type                                               | Default | Description                            |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------- |
+| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover  |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Popover content                        |
+| `delay`      | `{ open: number, close: number }`                  | —       | Hover delay in ms (hover trigger only) |
+| `offset`     | `number`                                           | —       | Offset in px for the popover           |
+
+## TimeTableCellStyleAttributes
+
+| Prop                      | Type                                           | Description                                                                      |
+| ------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------- |
+| `backgroundColor`         | `string \| (props: ThemeStyleProps) => string` | Main background color                                                            |
+| `altBackgroundColor`      | `string \| (props: ThemeStyleProps) => string` | Alternate background color for striped displays                                  |
+| `hoverBackgroundColor`    | `string \| (props: ThemeStyleProps) => string` | Background on hover                                                              |
+| `altHoverBackgroundColor` | `string \| (props: ThemeStyleProps) => string` | Alternate background on hover                                                    |
+| `styleType`               | `"default" \| "solid" \| "stripes"`            | Display style; defaults to cell type (blocked/pending = striped, others = solid) |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Rules
+
+-   Do not combine `onClick` on a cell with a `trigger="click"` popover on the same cell — they conflict.
diff --git a/skills/fds-build/resources/v3/components/toast.md b/skills/fds-build/resources/v3/components/toast.md
new file mode 100644
index 0000000000..6f264dd4b5
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/toast.md
@@ -0,0 +1,172 @@
+# Toast
+
+Import: `import { Toast } from "@lifesg/react-design-system/toast"`
+
+## When to use
+
+Use for brief, non-blocking feedback on system or user actions — "Changes saved", "Upload complete", "Request failed". Does not replace persistent callouts — use Alert for section-specific notices.
+
+## Sub-components
+
+### ActionButtonProps
+
+| Prop      | Type         | Default | Description                                         |
+| --------- | ------------ | ------- | --------------------------------------------------- |
+| `label`   | `string`     | —       | Label of the action button — required               |
+| `onClick` | `() => void` | —       | Called when the action button is clicked — required |
+
+## Variants
+
+| `type`      | When to use                   |
+| ----------- | ----------------------------- |
+| `"success"` | Action completed successfully |
+| `"error"`   | Action failed or system error |
+| `"warning"` | Completed with caution        |
+| `"info"`    | Neutral status update         |
+
+## Usage
+
+```tsx
+import { Toast } from "@lifesg/react-design-system/toast";
+
+<Toast
+    type="success"
+    label="Changes saved successfully."
+    autoDismiss
+    onDismiss={() => {}}
+/>;
+```
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Rules
+
+-   `autoDismissTime` only takes effect when `autoDismiss` is `true`.
+-   Use `autoDismiss` for non-critical updates — keep visible for errors that require user action.
+-   Use `actionButton` for recoverable errors (retry, undo).
+-   Use `title` + `label` together when the toast message has a heading and a description.
+-   Do not use Toast for persistent notices — use Alert or NotificationBanner instead.
+
+## Anti-patterns
+
+-   Using Toast for errors that require user action without providing an `actionButton`.
+-   Setting `autoDismiss` on error toasts — errors should remain visible until the user dismisses them.
+-   Replacing Alert with Toast for section-specific inline messages.
diff --git a/skills/fds-build/resources/v3/components/toggle.md b/skills/fds-build/resources/v3/components/toggle.md
new file mode 100644
index 0000000000..cd26b36c98
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/toggle.md
@@ -0,0 +1,288 @@
+# Toggle
+
+Import: `import { Toggle } from "@lifesg/react-design-system/toggle"`
+
+## When to use
+
+-   Form inputs for boolean choices, single/multi-option selection, and yes/no questions.
+-   Preferred over bare `Checkbox` and `RadioButton` when building form inputs that need a card-style visible label container.
+
+## Variants
+
+| `type`       | When to use                                                  |
+| ------------ | ------------------------------------------------------------ |
+| `"checkbox"` | Multiple options can be selected or deselected independently |
+| `"radio"`    | Exactly one option must be selected — cannot be deselected   |
+| `"yes"`      | Binary yes answer — use with a paired `type="no"` Toggle     |
+| `"no"`       | Binary no answer — use with a paired `type="yes"` Toggle     |
+
+| `styleType`   | When to use                                                  |
+| ------------- | ------------------------------------------------------------ |
+| `"default"`   | Standard bordered card                                       |
+| `"no-border"` | Borderless — for contexts where the border is visually noisy |
+
+| `type`       | Behaviour                            |
+| ------------ | ------------------------------------ |
+| `"checkbox"` | Allows deselection — standard toggle |
+| `"radio"`    | No deselection — radio-style         |
+| `"yes"`      | No deselection — tick indicator      |
+| `"no"`       | No deselection — cross indicator     |
+
+## Usage
+
+```tsx
+import { Toggle } from "@lifesg/react-design-system/toggle";
+import { Form } from "@lifesg/react-design-system/form";
+
+{/* Checkbox group */}
+<Form.Label>Select your preferences</Form.Label>
+<Toggle type="checkbox" indicator checked={emailChecked} onChange={(e) => {}}>
+  Email notifications
+</Toggle>
+<Toggle type="checkbox" indicator checked={smsChecked} onChange={(e) => {}}>
+  SMS notifications
+</Toggle>
+```
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## CompositeSectionProps
+
+| Prop              | Type                      | Default | Description                                                      |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------- |
+| `children`        | `string \| JSX.Element`   | —       | Contents of the subsection — **required**                        |
+| `collapsible`     | `boolean`                 | `true`  | Whether the subsection is collapsible                            |
+| `initialExpanded` | `boolean`                 | —       | Initial expanded state — only applies when `collapsible` is true |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown when the subsection is collapsed                    |
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Rules
+
+-   `children` (main label) is mandatory.
+-   `indicator` is recommended when using `type="yes"` or `type="no"` to show the tick/cross icon.
+-   Always pass `indicator` for `type="checkbox"`, `type="radio"`, `type="yes"`, and `type="no"` — it shows the relevant icon (tick, dot, tick, cross) inside the toggle.
+-   Use `type="radio"` when the option cannot be deselected (e.g. single-select from a list).
+-   Use `compositeSection` to reveal dependent fields when a Toggle is selected — do not conditionally render fields outside the Toggle.
+-   Use `subLabel` for secondary supporting text — do not embed long descriptions in `children`.
+-   Use `childrenMaxLines` to constrain label height in dense list layouts.
+-   Place a `Form.Label` above each toggle group to provide the question or field label.
+
+### Spacing
+
+| Layout                    | Gap                                  |
+| ------------------------- | ------------------------------------ |
+| Stacked (checkbox, radio) | `spacing-8` between each Toggle      |
+| Side by side (yes / no)   | `spacing-16` between the two Toggles |
+
+```tsx
+{/* Stacked — checkbox or radio */}
+<Form.Label>Declaration</Form.Label>
+<ToggleWrapper> {/* margin-bottom: spacing-32 — matches Form field built-in */}
+  <Toggle indicator checked={a} onChange={...}>Option A</Toggle>
+  <div style={{ marginBottom: Spacing["spacing-8"] }} />
+  <Toggle indicator checked={b} onChange={...}>Option B</Toggle>
+</ToggleWrapper>
+
+{/* Side by side — yes / no */}
+<Form.Label>Do you have a disability?</Form.Label>
+<YesNoGroup> {/* display: flex; gap: spacing-16 */}
+  <Toggle type="yes" indicator checked={val === "yes"} onChange={...}>Yes</Toggle>
+  <Toggle type="no"  indicator checked={val === "no"}  onChange={...}>No</Toggle>
+</YesNoGroup>
+```
+
+## Anti-patterns
+
+-   Do not use bare `Checkbox` or `RadioButton` in forms when a labelled card container is needed — use `Toggle` instead.
+-   Do not conditionally render dependent fields outside the Toggle — use `compositeSection`.
+-   Do not use `type="yes"` or `type="no"` without pairing both options together in the UI.
+-   Do not omit `indicator` for any Toggle type — it is required for all variants.
diff --git a/skills/fds-build/resources/v3/components/tooltip.md b/skills/fds-build/resources/v3/components/tooltip.md
new file mode 100644
index 0000000000..0bef9b2930
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/tooltip.md
@@ -0,0 +1,37 @@
+# Tooltip
+
+> **Not available in v4.** If you are building for v4, use `Popover` with `trigger="hover"` instead.
+
+Import: `import { Tooltip, withTooltip } from "@lifesg/react-design-system/tooltip"`
+
+## When to use
+
+Use to show brief supplementary information when a user hovers over or focuses an element. For interactive contextual information, use Popover instead.
+
+## Variants
+
+Two usage patterns are available:
+
+-   **`withTooltip` HOC** — wraps an existing element to add tooltip behaviour automatically.
+-   **`Tooltip` component** — a standalone tooltip that you control manually.
+
+## Usage
+
+```tsx
+import { withTooltip } from "@lifesg/react-design-system/tooltip";
+import { Button } from "@lifesg/react-design-system/button";
+
+{
+    /* Preferred: HOC wraps an existing element */
+}
+{
+    withTooltip(<Button.Default styleType="default">Save</Button.Default>, {
+        content: "Save your changes",
+    });
+}
+```
+
+## Rules
+
+-   Use `withTooltip` for most cases — it handles hover trigger logic automatically.
+-   Use the `Tooltip` component directly when you need full manual control over visibility.
diff --git a/skills/fds-build/resources/v3/components/typography.md b/skills/fds-build/resources/v3/components/typography.md
new file mode 100644
index 0000000000..e15951cda3
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/typography.md
@@ -0,0 +1,156 @@
+# Typography
+
+Import: `import { Typography } from "@lifesg/react-design-system/typography"`
+
+## When to use
+
+Use Typography components to render text content — headings, paragraphs, and links. Do not use for parent containers that have text children; use Font tokens instead (see `foundations/typography.md`).
+
+## Sub-components
+
+**Headings:** `Typography.HeadingXXL`, `Typography.HeadingXL`, `Typography.HeadingLG`, `Typography.HeadingMD`, `Typography.HeadingSM`, `Typography.HeadingXS`
+
+**Body:** `Typography.BodyBL`, `Typography.BodyMD`, `Typography.BodySM`, `Typography.BodyXS`
+
+**Links:** `Typography.LinkBL`, `Typography.LinkMD`, `Typography.LinkSM`, `Typography.LinkXS`
+
+## Variants
+
+| Component         | Default element | Usage                                  |
+| ----------------- | --------------- | -------------------------------------- |
+| `HeadingXXL`      | `h1`            | Hero/page-level title                  |
+| `HeadingXL`       | `h2`            | Page title or primary section heading  |
+| `HeadingLG`       | `h3`            | Section heading                        |
+| `HeadingMD`       | `h4`            | Subsection heading                     |
+| `HeadingSM`       | —               | Card heading, secondary heading        |
+| `HeadingXS`       | —               | Small heading                          |
+| `BodyBL`          | —               | Default paragraph text                 |
+| `BodyMD`          | —               | Medium body text                       |
+| `BodySM`          | —               | Helper text                            |
+| `BodyXS`          | —               | Metadata, timestamps                   |
+| `LinkBL/MD/SM/XS` | `<a>`           | Inline links, sized to match body text |
+
+## Usage
+
+```tsx
+import { Typography } from "@lifesg/react-design-system/typography";
+
+<>
+    <Typography.HeadingXL>Page title</Typography.HeadingXL>
+    <Typography.BodyBL paragraph>
+        Supporting body text for the section. Use{" "}
+        <Typography.LinkMD href="/learn-more">
+            link components
+        </Typography.LinkMD>{" "}
+        for inline anchors.
+    </Typography.BodyBL>
+</>;
+```
+
+## Props
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyProps`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `TypographyLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyProps`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `TypographyLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyProps`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `TypographyLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyProps`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Rules
+
+-   Default HTML elements: `HeadingXXL` → `h1`, `HeadingXL` → `h2`, `HeadingLG` → `h3`, `HeadingMD` → `h4`.
+-   Text color is not set by the component — apply via `styled()` using Colour tokens.
+-   Do not pass `color` as a prop — `TypographyProps` extends `HTMLAttributes` and forwards the value to the DOM, triggering a React warning.
+-   Do not use Typography for parent containers — use Font tokens instead.
+-   Heading components render default HTML elements — use the `as` prop when visual size and reading order don't match.
+-   Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
+-   Apply text color via `styled()` using Colour tokens — never pass `color` as a prop.
+-   Use the `weight` prop to adjust emphasis, not opacity.
+-   Links are underlined by default — use `underlineStyle="none"` only when context makes the link obvious.
+-   Always use the `external` prop for links that navigate outside the domain.
+
+## Anti-patterns
+
+-   Passing `color` directly as a prop — it forwards a Colour object to the DOM and triggers a React warning.
+-   Skipping heading levels for visual sizing — use the `as` prop instead.
+-   Using `<h1>` raw HTML inside a Typography component instead of `as="h1"`.
+-   Using Typography on a container element to inherit font styles — use Font tokens.
diff --git a/skills/fds-build/resources/v3/components/uneditable-section.md b/skills/fds-build/resources/v3/components/uneditable-section.md
new file mode 100644
index 0000000000..e6f316e63d
--- /dev/null
+++ b/skills/fds-build/resources/v3/components/uneditable-section.md
@@ -0,0 +1,299 @@
+# UneditableSection
+
+Import: `import { UneditableSection } from "@lifesg/react-design-system/uneditable-section"`
+
+## When to use
+
+-   Displaying read-only label/value pairs on summary or review screens.
+-   Showing retrieved or pre-filled data the user cannot edit.
+
+## Sub-components
+
+-   `UneditableSection.ItemSection` — wraps a group of items (extends `HTMLUListElement`)
+-   `UneditableSection.Item` — individual label/value item
+
+## Usage
+
+```tsx
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+
+<UneditableSection
+    title="Personal details"
+    items={[
+        { label: "Full name", value: "Jane Tan", displayWidth: "half" },
+        { label: "Date of birth", value: "1 Jan 1990", displayWidth: "half" },
+        { label: "Address", value: "123 Example Road, Singapore 123456" },
+    ]}
+/>;
+```
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Rules
+
+-   Always supply `items` with a `label` and `value` for each field.
+-   Use `displayWidth: "half"` for short values (names, dates, codes) to show two per row; omit for long values.
+-   Show `"—"` for any unanswered or empty field rather than leaving `value` blank.
+-   Set `background={false}` when rendering inside a `BoxContainer` — the container already provides the visual boundary; the default background creates an unwanted nested box appearance.
+-   Set `fullWidth` when rendering inside a container such as `BoxContainer` to remove the default `Layout.Content` spacing and allow content to fill the full width.
+
+## Anti-patterns
+
+-   Do not use `UneditableSection` for editable fields — use `Form.*` components with `readOnly` instead.
+-   Do not nest `UneditableSection` inside another `UneditableSection`.
diff --git a/docs/skills/fds-build/resources/v3/foundations/layout-composition-patterns.md b/skills/fds-build/resources/v3/foundations/layout-composition-patterns.md
similarity index 100%
rename from docs/skills/fds-build/resources/v3/foundations/layout-composition-patterns.md
rename to skills/fds-build/resources/v3/foundations/layout-composition-patterns.md
diff --git a/docs/skills/fds-build/resources/v3/foundations/tokens.md b/skills/fds-build/resources/v3/foundations/tokens.md
similarity index 100%
rename from docs/skills/fds-build/resources/v3/foundations/tokens.md
rename to skills/fds-build/resources/v3/foundations/tokens.md
diff --git a/docs/skills/fds-build/resources/v3/patterns/states.md b/skills/fds-build/resources/v3/patterns/states.md
similarity index 100%
rename from docs/skills/fds-build/resources/v3/patterns/states.md
rename to skills/fds-build/resources/v3/patterns/states.md
diff --git a/docs/skills/fds-build/resources/v3/setup/setup.md b/skills/fds-build/resources/v3/setup/setup.md
similarity index 100%
rename from docs/skills/fds-build/resources/v3/setup/setup.md
rename to skills/fds-build/resources/v3/setup/setup.md
diff --git a/docs/skills/fds-build/resources/v3/templates/form.md b/skills/fds-build/resources/v3/templates/form.md
similarity index 100%
rename from docs/skills/fds-build/resources/v3/templates/form.md
rename to skills/fds-build/resources/v3/templates/form.md
diff --git a/docs/skills/fds-build/resources/v3/templates/listing.md b/skills/fds-build/resources/v3/templates/listing.md
similarity index 100%
rename from docs/skills/fds-build/resources/v3/templates/listing.md
rename to skills/fds-build/resources/v3/templates/listing.md
diff --git a/skills/fds-build/resources/v4/components/accordion.md b/skills/fds-build/resources/v4/components/accordion.md
new file mode 100644
index 0000000000..b758a4edf2
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/accordion.md
@@ -0,0 +1,321 @@
+# Accordion
+
+Import: `import { Accordion } from "@lifesg/react-design-system/accordion"`
+
+## When to use
+
+Use to reduce visual complexity when users don't need all content at once — FAQs, supplementary details, or grouped settings. Do not use when all content needs to be visible at the same time.
+
+## Composition
+
+```
+Accordion                    ← container, manages expand/collapse state
+├── Accordion.Item           ← expandable panel
+├── Accordion.Item
+└── Accordion.Item
+```
+
+All children must be `Accordion.Item`. Do not place other elements directly inside `Accordion`.
+
+## Variants
+
+| `type` on `Accordion.Item` | Usage                                |
+| -------------------------- | ------------------------------------ |
+| `"default"`                | Standard title size — default        |
+| `"small"`                  | Compact title size for dense layouts |
+
+## Usage
+
+```tsx
+import { Accordion } from "@lifesg/react-design-system/accordion";
+
+// Multiple items — all collapsed by default
+const FaqSection = () => (
+    <Accordion
+        title="Frequently asked questions"
+        headingLevel={2}
+        initialDisplay="collapse-all"
+        enableExpandAll
+    >
+        <Accordion.Item title="What is this service?">
+            <p>This service lets you manage your account settings.</p>
+        </Accordion.Item>
+        <Accordion.Item title="How do I reset my password?">
+            <p>Click "Forgot password" on the login page.</p>
+        </Accordion.Item>
+        {/* JSX in title must be wrapped in <span> — title renders inside <button> */}
+        <Accordion.Item
+            title={
+                <span>
+                    Can I use <strong>bold text</strong> in a title?
+                </span>
+            }
+        >
+            <p>Yes — wrap JSX title content in a span.</p>
+        </Accordion.Item>
+    </Accordion>
+);
+
+// Controlled item — force one item open regardless of Expand All state
+const ControlledExample = () => (
+    <Accordion initialDisplay="collapse-all">
+        <Accordion.Item title="Always expanded" expanded={true}>
+            <p>This item ignores the parent initialDisplay.</p>
+        </Accordion.Item>
+        <Accordion.Item title="Follows parent state">
+            <p>This item collapses with the rest.</p>
+        </Accordion.Item>
+    </Accordion>
+);
+```
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionItemHandle`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionItemHandle`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionItemHandle`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionProps`
+
+| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
+| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
+| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
+| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
+| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
+| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
+| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
+| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
+
+## Props — `AccordionItemProps`
+
+| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
+| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
+| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
+| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
+| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
+| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
+| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+
+## Props — `AccordionItemApi`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Props — `AccordionItemHandle`
+
+| Prop            | Type            | Default | Description |
+| --------------- | --------------- | ------- | ----------- |
+| `expand` \*     | `() => void`    | —       | —           |
+| `collapse` \*   | `() => void`    | —       | —           |
+| `isExpanded` \* | `() => boolean` | —       | —           |
+
+## Rules
+
+-   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
+-   Use `Accordion.Item` for all panels — do not place content directly in `Accordion`.
+-   Wrap custom JSX titles in `<span>` — item title renders inside a `<button>` and block elements are invalid inside it.
+-   Individual `expanded` on `Accordion.Item` overrides Expand All / Collapse All for that item.
+-   Use `initialDisplay="collapse-all"` when content is supplementary and users are unlikely to need it immediately.
+
+## Anti-patterns
+
+-   Placing content directly inside `Accordion` without `Accordion.Item` wrappers.
+-   Using Accordion when all content should be visible at once — use a plain layout instead.
+-   Using block elements (e.g. `<div>`) directly as `title` in `Accordion.Item` — wrap in `<span>`.
+-   Skipping `headingLevel` when `title` is set — this breaks heading hierarchy for screen readers.
diff --git a/skills/fds-build/resources/v4/components/alert.md b/skills/fds-build/resources/v4/components/alert.md
new file mode 100644
index 0000000000..df2769f74e
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/alert.md
@@ -0,0 +1,114 @@
+# Alert
+
+Import: `import { Alert } from "@lifesg/react-design-system/alert"`
+
+## When to use
+
+Use to call out important information within page sections — warnings before a user starts a task, informational notes relevant to a specific section, or non-transient status messages. Not for form validation errors (use form error patterns instead).
+
+## Variants
+
+| `type`          | When to use                                |
+| --------------- | ------------------------------------------ |
+| `"success"`     | Action completed successfully              |
+| `"error"`       | Action failed or system error              |
+| `"warning"`     | User should proceed with caution           |
+| `"info"`        | Neutral informational message              |
+| `"description"` | Descriptive content with no status meaning |
+
+## Usage
+
+```tsx
+import { Alert } from "@lifesg/react-design-system/alert";
+
+<Alert type="warning" showIcon role="alert">
+    Your session will expire in 5 minutes. Save your work to avoid losing
+    progress.
+</Alert>;
+```
+
+## Props
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Props
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Props — `AlertProps`
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Props — `AlertProps`
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Props — `AlertProps`
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Props — `AlertProps`
+
+| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
+| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
+| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
+| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
+| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
+| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
+| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
+
+## Rules
+
+-   Always use `showIcon` — icons provide immediate visual recognition of alert severity.
+-   Use `actionLink` for recoverable errors (retry, undo, view details).
+-   Set `role` based on how the alert appears: `"alert"` for dynamic alerts triggered by user action, `"status"` for background status updates, omit for static content visible on page load.
+-   Use `maxCollapsedHeight` to avoid long content overwhelming the layout.
+-   `role` is not set automatically — set `role="alert"` for dynamic alerts, `role="status"` for background updates, and omit for static content.
+
+## Anti-patterns
+
+-   Using Alert for form field validation errors — use inline form error patterns instead.
+-   Omitting `role` on dynamically injected alerts — screen readers will not announce them.
+-   Using `type="description"` with `showIcon` — description has no semantic status meaning.
diff --git a/skills/fds-build/resources/v4/components/animation.md b/skills/fds-build/resources/v4/components/animation.md
new file mode 100644
index 0000000000..07feac889d
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/animation.md
@@ -0,0 +1,63 @@
+# Animation
+
+Import: `import { Animation } from "@lifesg/react-design-system/animation"`
+
+## Props — `AnimationProps`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `id`        | `string` | —       | —           |
+| `className` | `string` | —       | —           |
+
+## Props — `CustomisableAnimationProps`
+
+| Prop        | Type                                                                      | Default | Description                                              |
+| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `id`        | `string`                                                                  | —       | —                                                        |
+| `className` | `string`                                                                  | —       | —                                                        |
+| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
+
+## Props — `AnimationProps`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `id`        | `string` | —       | —           |
+| `className` | `string` | —       | —           |
+
+## Props — `CustomisableAnimationProps`
+
+| Prop        | Type                                                                      | Default | Description                                              |
+| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `id`        | `string`                                                                  | —       | —                                                        |
+| `className` | `string`                                                                  | —       | —                                                        |
+| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
+
+## Props — `AnimationProps`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `id`        | `string` | —       | —           |
+| `className` | `string` | —       | —           |
+
+## Props — `CustomisableAnimationProps`
+
+| Prop        | Type                                                                      | Default | Description                                              |
+| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `id`        | `string`                                                                  | —       | —                                                        |
+| `className` | `string`                                                                  | —       | —                                                        |
+| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
+
+## Props — `AnimationProps`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `id`        | `string` | —       | —           |
+| `className` | `string` | —       | —           |
+
+## Props — `CustomisableAnimationProps`
+
+| Prop        | Type                                                                      | Default | Description                                              |
+| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
+| `id`        | `string`                                                                  | —       | —                                                        |
+| `className` | `string`                                                                  | —       | —                                                        |
+| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
diff --git a/skills/fds-build/resources/v4/components/avatar.md b/skills/fds-build/resources/v4/components/avatar.md
new file mode 100644
index 0000000000..bb553c1561
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/avatar.md
@@ -0,0 +1,45 @@
+# Avatar
+
+Import: `import { Avatar } from "@lifesg/react-design-system/avatar"`
+
+## Props
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
+
+## Props
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
+
+## Props — `AvatarProps`
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
+
+## Props — `AvatarProps`
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
+
+## Props — `AvatarProps`
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
+
+## Props — `AvatarProps`
+
+| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
+| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
diff --git a/skills/fds-build/resources/v4/components/badge.md b/skills/fds-build/resources/v4/components/badge.md
new file mode 100644
index 0000000000..14a93a1fd0
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/badge.md
@@ -0,0 +1,68 @@
+# Badge
+
+Import: `import { Badge } from "@lifesg/react-design-system/badge"`
+
+## Props
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Props
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Props — `BadgeProps`
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Props — `BadgeProps`
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Props — `BadgeProps`
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Props — `BadgeProps`
+
+| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
+| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
+| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
+| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
+| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
+| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
+
+## Rules
+
+-   `count` only applies to `"number"`, `"number-with-border"`, and `"square-number"` variants.
+-   When `children` is provided, the badge overlays the top-right corner of the child element.
diff --git a/skills/fds-build/resources/v4/components/box-container.md b/skills/fds-build/resources/v4/components/box-container.md
new file mode 100644
index 0000000000..a8f27fbcd0
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/box-container.md
@@ -0,0 +1,176 @@
+# BoxContainer
+
+Import: `import { BoxContainer } from "@lifesg/react-design-system/box-container"`
+
+## When to use
+
+Use for a single collapsible panel displaying form data or structured content — typically a named section within a form or detail view. Supports an optional header action and a status indicator to flag section-level errors or warnings.
+
+## Sub-components
+
+### BoxContainerSubComponentTestIds
+
+| Prop               | Type     | Description                            |
+| ------------------ | -------- | -------------------------------------- |
+| `title`            | `string` | Test id for the header title           |
+| `displayStateIcon` | `string` | Test id for the display state icon     |
+| `handle`           | `string` | Test id for the expand/collapse handle |
+
+## Variants
+
+| `displayState` | When to use                                |
+| -------------- | ------------------------------------------ |
+| `"default"`    | Normal state — no icon                     |
+| `"error"`      | Section has validation errors              |
+| `"warning"`    | Section has a warning that needs attention |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Props — `BoxContainerSubComponentTestIds`
+
+| Prop               | Type     | Default | Description |
+| ------------------ | -------- | ------- | ----------- |
+| `title`            | `string` | —       | —           |
+| `handle`           | `string` | —       | —           |
+| `displayStateIcon` | `string` | —       | —           |
+
+## Props — `BoxContainerProps`
+
+| Prop                    | Type                              | Default   | Description                                                                                                                                             |
+| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
+| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
+| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
+| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
+| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
+| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
+| `className`             | `string`                          | —         | —                                                                                                                                                       |
+| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
+| `id`                    | `string`                          | —         | —                                                                                                                                                       |
+| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
+
+## Rules
+
+-   Use `displayState` to indicate section-level status — not as a substitute for inline field errors.
+-   Use `callToActionComponent` for section-level actions only — not for form submission buttons.
+-   Use `collapsible={false}` when the content must always be visible.
+-   Use `clickableHeader` to make the full header row the expand/collapse trigger — improves usability for dense layouts.
+
+## Anti-patterns
+
+-   Using `displayState="error"` instead of inline form field errors — `displayState` signals section-level status only.
+-   Using `callToActionComponent` for form submission — use a dedicated submit button outside the container.
+-   Nesting BoxContainer inside another BoxContainer.
diff --git a/skills/fds-build/resources/v4/components/breadcrumb.md b/skills/fds-build/resources/v4/components/breadcrumb.md
new file mode 100644
index 0000000000..a3f549cb30
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/breadcrumb.md
@@ -0,0 +1,157 @@
+# Breadcrumb
+
+Import: `import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb"`
+
+## When to use
+
+Use on pages within a multi-level hierarchy to help users navigate to parent pages.
+
+Do not use on:
+
+-   The home page
+-   Pages with no parent
+-   Focused flows such as forms or wizards
+
+## Variants
+
+| `separatorStyle`      | When to use              |
+| --------------------- | ------------------------ |
+| `"chevron"` (default) | Standard pages           |
+| `"slash"`             | Alternative visual style |
+
+## Usage
+
+```tsx
+import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
+
+<Breadcrumb
+    links={[
+        { children: "Home", href: "/" },
+        { children: "Services", href: "/services" },
+        { children: "Apply" },
+    ]}
+/>;
+```
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Props — `FadeColorSet`
+
+| Prop    | Type       | Default | Description                                      |
+| ------- | ---------- | ------- | ------------------------------------------------ |
+| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
+| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
+
+## Props — `BreadcrumbProps`
+
+| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
+| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
+| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
+| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
+| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
+| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
+| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
+
+## Rules
+
+-   Always place the current page last in `links` — omit `href` on the last item.
+-   Keep breadcrumb trails to 4 items or fewer; 5 or more items automatically collapse the middle into an overflow menu.
+-   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
+-   The last item in `links` is rendered as the current page (non-clickable, `aria-current="page"`). Omit `href` on the last item.
+-   When 5 or more items are present, middle items automatically collapse into an overflow menu.
+-   On mobile, breadcrumbs scroll horizontally with a fade effect at the edges controlled by `fadeColor` and `fadePosition`.
+
+## Anti-patterns
+
+-   Do not add `href` to the last breadcrumb item — it represents the current page and must not be clickable.
+-   Do not use breadcrumbs on single-level or flat navigation structures.
+-   Do not use breadcrumbs inside forms or wizard flows.
diff --git a/skills/fds-build/resources/v4/components/button.md b/skills/fds-build/resources/v4/components/button.md
new file mode 100644
index 0000000000..b6832c8337
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/button.md
@@ -0,0 +1,139 @@
+# Button
+
+Import: `import { Button } from "@lifesg/react-design-system/button"`
+
+## When to use
+
+```
+┌─ "Which button component?"
+│
+├─ Icon only (no text)?
+│  └─ IconButton — aria-label required
+│
+├─ Text + icon together?
+│  └─ ButtonWithIcon — icon left (default) or right for directional actions
+│
+└─ Text only?
+   └─ Button
+```
+
+## Size variants
+
+| Usage                                       | When to use                                             |
+| ------------------------------------------- | ------------------------------------------------------- |
+| `<Button>` or `<Button sizeType="default">` | Standard size — use for all buttons including hero CTAs |
+| `<Button sizeType="small">`                 | Dense layouts, toolbars                                 |
+| `<Button sizeType="large">`                 | Only when explicitly specified — do not use by default  |
+
+> **Deprecated:** `Button.Default`, `Button.Small`, `Button.Large` sub-components are deprecated in v4. Use `<Button sizeType="...">` instead.
+
+## Variants
+
+| `styleType`   | When to use                           |
+| ------------- | ------------------------------------- |
+| `"default"`   | Main action on the page               |
+| `"secondary"` | Cancel, go back, alternative option   |
+| `"light"`     | On colored or dark backgrounds        |
+| `"link"`      | Tertiary, de-emphasized inline action |
+
+Add `danger` for destructive actions (delete, remove) — applies to any `styleType`.
+
+## Usage
+
+```tsx
+import { Button } from "@lifesg/react-design-system/button";
+
+<Button styleType="default" onClick={() => {}}>
+    Save changes
+</Button>;
+```
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Props
+
+| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
+| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
+| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
+| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
+| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
+| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
+| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
+
+## Rules
+
+-   `styleType` is mandatory.
+-   Use sentence case for all labels — "Save changes" not "Save Changes".
+-   Use concise verb + noun labels — avoid "OK", "Yes", "Click here".
+-   Do not use `sizeType="large"` unless explicitly required — default size is correct for hero CTAs.
+-   Combine `loading` and `disabled` during async operations to prevent double-submission.
+-   Never use raw `<button>` elements — always use design system button components.
+-   Do not nest buttons inside buttons or links.
+-   `danger` applies to any `styleType`.
+
+## Anti-patterns
+
+-   Do not use `sizeType="large"` as a default choice — it is a special case only.
+-   Do not use `Button.Default`, `Button.Small`, or `Button.Large` — these sub-components are deprecated in v4.
+-   Do not use vague labels like "OK" or "Yes" — labels must describe the action.
+-   Do not use `loading` alone without also setting `disabled`.
diff --git a/skills/fds-build/resources/v4/components/calendar.md b/skills/fds-build/resources/v4/components/calendar.md
new file mode 100644
index 0000000000..9c32e3bcd0
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/calendar.md
@@ -0,0 +1,259 @@
+# Calendar
+
+Import: `import { Calendar } from "@lifesg/react-design-system/calendar"`
+
+## When to use
+
+-   Displaying an inline date picker when a full-page or panel calendar is preferable over a dropdown.
+-   Use `variant="single"` for standard single-date selection.
+-   Use `variant="multi"` when the user must pick multiple non-contiguous dates (e.g. recurring appointments).
+
+## Usage
+
+### variant="single" — single date selection
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "@lifesg/react-design-system/calendar";
+
+const AppointmentCalendar = () => {
+    const [date, setDate] = useState("2024-06-15");
+
+    return (
+        <Calendar
+            variant="single"
+            value={date}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            onChange={(selected) => setDate(selected)}
+        />
+    );
+};
+```
+
+### variant="multi" — multiple date selection
+
+Note `values` (plural) and `onChange` receives the full updated array.
+
+```tsx
+import { useState } from "react";
+import { Calendar } from "@lifesg/react-design-system/calendar";
+
+const MultiDateCalendar = () => {
+    const [dates, setDates] = useState<string[]>([]);
+
+    return (
+        <Calendar
+            variant="multi"
+            values={dates}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            maxSelectable={5}
+            onChange={(selected) => setDates(selected)}
+        />
+    );
+};
+```
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                           |
+| ------- | -------- | ------------------------------------- |
+| `year`  | `number` | Current visible year in `YYYY` format |
+| `month` | `number` | Current visible month, 1–12           |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarProps`
+
+| Prop                       | Type                                  | Default    | Description                                                                                           |
+| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —          | —                                                                                                     |
+| `id`                       | `string`                              | —          | —                                                                                                     |
+| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
+| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
+| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
+| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
+| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarProps`
+
+| Prop                       | Type                                  | Default    | Description                                                                                           |
+| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —          | —                                                                                                     |
+| `id`                       | `string`                              | —          | —                                                                                                     |
+| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
+| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
+| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
+| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
+| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarProps`
+
+| Prop                       | Type                                  | Default    | Description                                                                                           |
+| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —          | —                                                                                                     |
+| `id`                       | `string`                              | —          | —                                                                                                     |
+| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
+| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
+| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
+| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
+| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
+
+## Props — `CalendarSingleProps`
+
+| Prop       | Type                        | Default  | Description                            |
+| ---------- | --------------------------- | -------- | -------------------------------------- |
+| `variant`  | `"single"`                  | "single" | —                                      |
+| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
+| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
+| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
+
+## Props — `CalendarMultiProps`
+
+| Prop            | Type                           | Default | Description                                   |
+| --------------- | ------------------------------ | ------- | --------------------------------------------- |
+| `variant` \*    | `"multi"`                      | —       | —                                             |
+| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
+| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
+| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
+| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
+
+## Props — `CalendarProps`
+
+| Prop                       | Type                                  | Default    | Description                                                                                           |
+| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —          | —                                                                                                     |
+| `id`                       | `string`                              | —          | —                                                                                                     |
+| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
+| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
+| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
+| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
+| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
+
+## Rules
+
+-   `variant="single"` uses `value: string` and `onChange: (date: string) => void`.
+-   `variant="multi"` uses `values: string[]` and `onChange: (dates: string[]) => void` — note the plural prop names.
+-   All dates must be in `YYYY-MM-DD` format.
+-   Use `minDate`/`maxDate` to constrain selectable range.
+-   Use `disabledDates` for specific non-selectable dates within the allowed range.
+
+## Anti-patterns
+
+-   Do not pass `value` to `variant="multi"` — the prop is `values` (plural).
+-   Do not pass `values` to `variant="single"` — the prop is `value` (singular).
+-   Do not use Calendar inside a form for simple date entry — prefer `Form.DateInput` for that pattern.
diff --git a/docs/skills/fds-build/resources/v4/components/card.md b/skills/fds-build/resources/v4/components/card.md
similarity index 82%
rename from docs/skills/fds-build/resources/v4/components/card.md
rename to skills/fds-build/resources/v4/components/card.md
index c2f93560c8..7984944542 100644
--- a/docs/skills/fds-build/resources/v4/components/card.md
+++ b/skills/fds-build/resources/v4/components/card.md
@@ -28,14 +28,6 @@ import { Typography } from "@lifesg/react-design-system/typography";
 }
 ```
 
-## Props
-
-Inherits all standard `HTMLDivElement` attributes.
-
-| Prop          | Type     | Default | Description                       |
-| ------------- | -------- | ------- | --------------------------------- |
-| `data-testid` | `string` | —       | Test identifier for the component |
-
 ## Rules
 
 -   Card has no default padding — use `spacing-24` internal padding and `spacing-16` gap between content items as the standard.
diff --git a/skills/fds-build/resources/v4/components/checkbox.md b/skills/fds-build/resources/v4/components/checkbox.md
new file mode 100644
index 0000000000..9fbbc7826b
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/checkbox.md
@@ -0,0 +1,98 @@
+# Checkbox
+
+Import: `import { Checkbox } from "@lifesg/react-design-system/checkbox"`
+
+## When to use
+
+-   Simple boolean selections where a compact tick-box is sufficient.
+-   Table row selection (single or "select all").
+-   Filter lists with multiple independent options.
+-   "Select all" patterns using the `indeterminate` state.
+
+Prefer `Toggle` over `Checkbox` when building form inputs that need a visible card-style label container.
+
+## Variants
+
+| `displaySize` | When to use                    |
+| ------------- | ------------------------------ |
+| `"default"`   | Standard use                   |
+| `"small"`     | Dense layouts, inline controls |
+
+## Usage
+
+```tsx
+import { Checkbox } from "@lifesg/react-design-system/checkbox";
+
+<label>
+    <Checkbox checked={agreed} onChange={(e) => {}} />I agree to the terms and
+    conditions
+</label>;
+```
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
+| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
+| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
+| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
+| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Rules
+
+-   Always pair with a visible label — wrap in `<label>` or use `aria-label`.
+-   Use `indeterminate` for "select all" controls when only some items in a list are selected — not as a permanent state.
+-   Use the same `name` attribute when grouping checkboxes in a form.
+-   No dedicated `disabled` prop — use the inherited `disabled` from `InputHTMLAttributes`, or `focusableWhenDisabled` to retain focus while blocking interaction.
+-   `indeterminate` is a visual state; manage controlled `checked` separately.
+
+## Anti-patterns
+
+-   Do not use `indeterminate` as a permanent or final state — it is a transitional indicator only.
+-   Do not use `Checkbox` alone without a label — always provide accessible text.
+-   Do not use `Checkbox` when only one option from a set can be selected — use `RadioButton` instead.
diff --git a/skills/fds-build/resources/v4/components/countdown-timer.md b/skills/fds-build/resources/v4/components/countdown-timer.md
new file mode 100644
index 0000000000..dd6f2c040c
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/countdown-timer.md
@@ -0,0 +1,71 @@
+# CountdownTimer
+
+Import: `import { CountdownTimer } from "@lifesg/react-design-system/countdown-timer"`
+
+## Props
+
+| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
+| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
+| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
+| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
+| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
+| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
+| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
+| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
+| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
+| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
+| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
+| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
+| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
+
+## Props
+
+| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
+| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
+| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
+| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
+| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
+| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
+| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
+| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
+| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
+| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
+| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
+| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
+| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
+
+## Props
+
+| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
+| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
+| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
+| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
+| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
+| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
+| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
+| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
+| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
+| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
+| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
+| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
+| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
+
+## Props
+
+| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
+| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
+| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
+| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
+| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
+| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
+| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
+| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
+| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
+| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
+| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
+| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
+| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
diff --git a/skills/fds-build/resources/v4/components/data-table.md b/skills/fds-build/resources/v4/components/data-table.md
new file mode 100644
index 0000000000..33586184db
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/data-table.md
@@ -0,0 +1,309 @@
+# DataTable
+
+Import: `import { DataTable } from "@lifesg/react-design-system/data-table"`
+
+## When to use
+
+-   Displaying tabular data with optional sorting, row selection, and custom cell rendering.
+-   Use `enableMultiSelect` + `enableSelectAll` when users need to act on multiple rows at once.
+
+## Usage
+
+### Column definitions, sorting, selection, and custom cell rendering
+
+```tsx
+import { useState, useMemo } from "react";
+import {
+    DataTable,
+    SortIndicatorsProps,
+} from "@lifesg/react-design-system/data-table";
+import { Pill } from "@lifesg/react-design-system/pill";
+
+const rows = [
+    { id: "1", name: "Alice", status: "active", score: 90 },
+    { id: "2", name: "Bob", status: "inactive", score: 72 },
+    { id: "3", name: "Carol", status: "active", score: 85 },
+];
+
+const Example = () => {
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [sortState, setSortState] = useState<SortIndicatorsProps>({
+        score: "desc",
+    });
+
+    // onSelect: toggle a single row id
+    const handleSelect = (rowId: string, isSelected: boolean) => {
+        setSelectedIds((prev) =>
+            isSelected ? [...prev, rowId] : prev.filter((id) => id !== rowId)
+        );
+    };
+
+    // onSelectAll: isAllSelected=true means "clear all"; false means "select all"
+    const handleSelectAll = (isAllSelected: boolean) => {
+        setSelectedIds(isAllSelected ? [] : rows.map((r) => r.id));
+    };
+
+    const handleHeaderClick = (fieldKey: string) => {
+        if (fieldKey === "score") {
+            setSortState({ score: sortState.score === "asc" ? "desc" : "asc" });
+        }
+    };
+
+    const sorted = useMemo(
+        () =>
+            [...rows].sort((a, b) =>
+                sortState.score === "asc"
+                    ? a.score - b.score
+                    : b.score - a.score
+            ),
+        [sortState]
+    );
+
+    return (
+        <DataTable
+            headers={[
+                { fieldKey: "name", label: "Name", keyColumn: true },
+                { fieldKey: "status", label: "Status" },
+                { fieldKey: "score", label: "Score", clickable: true },
+            ]}
+            rows={sorted.map((row) => ({
+                ...row,
+                // custom cell: render status as a Pill
+                status: <Pill type="outline">{row.status}</Pill>,
+            }))}
+            selectedIds={selectedIds}
+            disabledIds={["2"]}
+            sortIndicators={sortState}
+            enableMultiSelect
+            enableSelectAll
+            onSelect={handleSelect}
+            onSelectAll={handleSelectAll}
+            onHeaderClick={handleHeaderClick}
+        />
+    );
+};
+```
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## HeaderItemProps
+
+| Prop          | Type                        | Default | Description                                                            |
+| ------------- | --------------------------- | ------- | ---------------------------------------------------------------------- |
+| `fieldKey` \* | `string`                    | —       | Key name in the row item object                                        |
+| `label` \*    | `string \| React.ReactNode` | —       | Display label for the column header                                    |
+| `clickable`   | `boolean`                   | —       | If true, `onHeaderClick` is called when the cell is clicked            |
+| `style`       | `CSSProperties`             | —       | Custom styles for the column header cell                               |
+| `keyColumn`   | `boolean`                   | —       | Marks this column as descriptive for screen reader row checkbox labels |
+
+## RowProps
+
+| Prop         | Type                                                                           | Default | Description                             |
+| ------------ | ------------------------------------------------------------------------------ | ------- | --------------------------------------- |
+| `id` \*      | `string`                                                                       | —       | Row id                                  |
+| `[fieldKey]` | `string \| number \| React.ReactNode \| (row, renderProps) => React.ReactNode` | —       | Other properties on the row item object |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Props — `DataTableProps`
+
+| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
+| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
+| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
+| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
+| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
+| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
+| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
+| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
+| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
+| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
+| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
+| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
+| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
+| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
+| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
+| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
+| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
+| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
+| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
+| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
+| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
+| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
+
+## Props — `RowProps`
+
+| Prop    | Type               | Default | Description                                                                                   |
+| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
+
+## Rules
+
+-   Each row object must have a unique `id: string` field.
+-   `selectedIds` and `disabledIds` are arrays of row `id` strings — manage them in external state.
+-   `onSelect(rowId, isSelected)` fires per row; toggle the id into/out of your `selectedIds` array.
+-   `onSelectAll(isAllSelected)` fires when the header checkbox is clicked; `isAllSelected` is `true` when the action should clear all selections (the parameter name is inverted — see example).
+-   For sortable columns, set `clickable: true` on the header and handle `onHeaderClick(fieldKey)`.
+-   Custom cell rendering: set a row field to a `ReactNode` or a render function `(row, renderProps) => ReactNode`.
+
+## Anti-patterns
+
+-   Do not derive `selectedIds` from row data alone without external state — the table is uncontrolled for selection without it.
+-   Do not omit `id` on row objects — selection and disabled logic will break silently.
+-   Do not add `clickable: true` to a header without wiring `onHeaderClick` — clicks will silently do nothing.
diff --git a/skills/fds-build/resources/v4/components/date-navigator.md b/skills/fds-build/resources/v4/components/date-navigator.md
new file mode 100644
index 0000000000..ddba7852ef
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/date-navigator.md
@@ -0,0 +1,115 @@
+# DateNavigator
+
+Import: `import { DateNavigator } from "@lifesg/react-design-system/date-navigator"`
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Props
+
+| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
+| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
+| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
+| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
+| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
+| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
+| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
+| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
+| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
+| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
+| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
+
+## Rules
+
+-   Only override `dropdownRootNode` if you need the dropdown to share a stacking context with a scroll container — may cause z-index issues.
diff --git a/skills/fds-build/resources/v4/components/divider.md b/skills/fds-build/resources/v4/components/divider.md
new file mode 100644
index 0000000000..5db1ba48ed
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/divider.md
@@ -0,0 +1,103 @@
+# Divider
+
+Import: `import { Divider } from "@lifesg/react-design-system/divider"`
+
+## Props
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Props
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Props — `DividerProps`
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Props — `DividerProps`
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Props — `DividerProps`
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Props — `DividerProps`
+
+| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
+| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
+| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
+| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
+| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
+| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
+| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
+| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
+| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
+| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
+| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
+| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
+
+## Rules
+
+-   `mobileCols`, `tabletCols`, `desktopCols` follow the same semantics as `Layout.ColDiv` — see ColDiv docs for details.
diff --git a/skills/fds-build/resources/v4/components/drawer.md b/skills/fds-build/resources/v4/components/drawer.md
new file mode 100644
index 0000000000..4875195819
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/drawer.md
@@ -0,0 +1,139 @@
+# Drawer
+
+Import: `import { Drawer } from "@lifesg/react-design-system/drawer"`
+
+## When to use
+
+Use to show supplementary content or actions without navigating away from the current page — for example, filter panels or detail views.
+
+Do not use for:
+
+-   Primary forms that require focused attention
+-   Flows that need the full viewport
+
+## Usage
+
+```tsx
+import { useState } from "react";
+import { Drawer } from "@lifesg/react-design-system/drawer";
+import { Button } from "@lifesg/react-design-system/button";
+import { Text } from "@lifesg/react-design-system/text";
+
+const FilterDrawer = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+
+    return (
+        <>
+            <Button.Default onClick={() => setShow(true)}>
+                Open filters
+            </Button.Default>
+
+            <Drawer
+                show={show}
+                heading="Filter options"
+                onClose={handleClose}
+                onOverlayClick={handleClose}
+            >
+                <div style={{ padding: "1.5rem" }}>
+                    <Text.H4 style={{ marginBottom: "0.75rem" }}>
+                        Category
+                    </Text.H4>
+                    <Text.Body style={{ marginBottom: "2rem" }}>
+                        Filter content goes here.
+                    </Text.Body>
+                    <Button.Default styleType="secondary" onClick={handleClose}>
+                        Close
+                    </Button.Default>
+                </div>
+            </Drawer>
+        </>
+    );
+};
+```
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Props
+
+| Prop             | Type              | Default | Description                                                                               |
+| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `children`       | `React.ReactNode` | —       | —                                                                                         |
+| `className`      | `string`          | —       | —                                                                                         |
+| `id`             | `string`          | —       | —                                                                                         |
+| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
+| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
+| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
+| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+
+## Rules
+
+-   Always provide `onClose` so users can dismiss the panel via the close button.
+-   Provide `onOverlayClick` to allow dismissal by clicking outside the panel; set it to the same handler as `onClose` unless the overlay should not close the panel.
+-   Use `heading` to give the drawer a descriptive title for the user and for screen readers.
+-   The drawer slides in from the right edge of the viewport.
+-   Content scrolls independently within the panel when it exceeds the panel height.
+
+## Anti-patterns
+
+-   Do not use the Drawer for full forms — use a dedicated page or Modal instead.
+-   Do not omit `onClose` — users must have a way to dismiss the panel.
diff --git a/skills/fds-build/resources/v4/components/error-display.md b/skills/fds-build/resources/v4/components/error-display.md
new file mode 100644
index 0000000000..52dace764a
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/error-display.md
@@ -0,0 +1,327 @@
+# ErrorDisplay
+
+Import: `import { ErrorDisplay } from "@lifesg/react-design-system/error-display"`
+
+## When to use
+
+Use for full-page or full-section states where the primary content cannot be shown — HTTP errors, empty results, session states, and system messages. It handles illustration, title, description, and action button as a unit.
+
+Do not build custom error pages with raw Typography + Button — always use `ErrorDisplay` so illustrations and copy stay consistent across products.
+
+## Variants
+
+| `type`                          | When to use                                                      |
+| ------------------------------- | ---------------------------------------------------------------- |
+| `"no-item-found"`               | Search or filter returned no results                             |
+| `"404"`                         | Page not found                                                   |
+| `"403"`                         | Access denied / permission error                                 |
+| `"500"`                         | Internal server error                                            |
+| `"400"`                         | Bad request                                                      |
+| `"408"`                         | Request timeout                                                  |
+| `"502"`                         | Bad gateway                                                      |
+| `"503"`                         | Service unavailable                                              |
+| `"504"`                         | Gateway timeout                                                  |
+| `"maintenance"`                 | Planned downtime — requires `additionalProps.dateString`         |
+| `"inactivity"`                  | Session timeout warning — requires `additionalProps.secondsLeft` |
+| `"logout"`                      | User has been logged out                                         |
+| `"warning"`                     | General warning state                                            |
+| `"confirmation"`                | Action confirmed (e.g. submission complete)                      |
+| `"link-error"`                  | Broken or expired link                                           |
+| `"insufficient-credits"`        | User lacks credits to proceed                                    |
+| `"payment-unsuccessful"`        | Payment failed                                                   |
+| `"transfer-unsuccessful"`       | Transfer failed                                                  |
+| `"unsupported-browser"`         | Browser not supported                                            |
+| `"partially-supported-browser"` | Browser partially supported                                      |
+
+## Usage
+
+```tsx
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+
+{
+    /* No search results */
+}
+<ErrorDisplay
+    type="no-item-found"
+    title="No results found"
+    description="Try adjusting your search or filters."
+    actionButton={{ children: "Clear filters", onClick: handleClear }}
+/>;
+
+{
+    /* Page not found */
+}
+<ErrorDisplay type="404" />;
+
+{
+    /* Maintenance with scheduled date */
+}
+<ErrorDisplay
+    type="maintenance"
+    additionalProps={{ dateString: "1 Jan 2025, 8:00am to 10:00am" }}
+/>;
+
+{
+    /* Session inactivity warning */
+}
+<ErrorDisplay
+    type="inactivity"
+    additionalProps={{ secondsLeft: 60, reminderInterval: 30 }}
+/>;
+```
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## MaintenanceAdditionalAttributes
+
+| Prop            | Type     | Default | Description                            |
+| --------------- | -------- | ------- | -------------------------------------- |
+| `dateString` \* | `string` | —       | Date display for the maintenance error |
+
+## InactivityAdditionalAttributes
+
+| Prop             | Type     | Default | Description                                          |
+| ---------------- | -------- | ------- | ---------------------------------------------------- |
+| `secondsLeft` \* | `number` | —       | Time remaining in seconds for the inactivity display |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `MaintenanceAdditionalAttributes`
+
+| Prop            | Type     | Default | Description                                                      |
+| --------------- | -------- | ------- | ---------------------------------------------------------------- |
+| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
+
+## Props — `InactivityAdditionalAttributes`
+
+| Prop               | Type     | Default | Description                                                                       |
+| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
+| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
+| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
+
+## Props — `ErrorDisplayAttributes`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Props — `ErrorDisplayProps`
+
+| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
+| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
+| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
+| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
+| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
+| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
+| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
+| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
+| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
+
+## Rules
+
+-   Always use `ErrorDisplay` for error/empty states — never build custom error pages with raw components.
+-   `type` is required — it determines the default illustration, title, and description.
+-   Override `title` and `description` only when the defaults don't fit your context.
+-   `actionButton` accepts standard `ButtonProps` — label and `onClick` are the common fields.
+-   `"maintenance"` requires `additionalProps.dateString` to render the scheduled date in the description.
+-   `"inactivity"` requires `additionalProps.secondsLeft` for the countdown display.
+-   For listing pages use `type="no-item-found"` — it has the correct "empty results" illustration.
+
+## Anti-patterns
+
+-   Do not use `imageOnly` unless rendering inside a constrained space where text would overflow.
+-   Do not hardcode error page titles/descriptions that duplicate what `ErrorDisplay` already provides by default.
+-   Do not use `type="warning"` as a generic placeholder — it implies a system-level warning, not a validation message (use `Alert` for that).
diff --git a/skills/fds-build/resources/v4/components/feedback-rating.md b/skills/fds-build/resources/v4/components/feedback-rating.md
new file mode 100644
index 0000000000..769b51d7b4
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/feedback-rating.md
@@ -0,0 +1,126 @@
+# FeedbackRating
+
+Import: `import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating"`
+
+## When to use
+
+Use at the end of a flow or session to collect a star rating and an optional submission action from the user.
+
+## Usage
+
+### Complete controlled pattern
+
+```tsx
+import { useState } from "react";
+import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating";
+
+const RatingWidget = () => {
+    // Track rating separately — onSubmit does NOT receive it
+    const [rating, setRating] = useState(0);
+
+    const handleSubmit = () => {
+        // Read from state, not from onSubmit arguments (there are none)
+        submitFeedback({ stars: rating });
+    };
+
+    return (
+        <FeedbackRating
+            rating={rating}
+            onRatingChange={(value) => setRating(value)}
+            onSubmit={handleSubmit}
+            description="How was your experience?"
+            buttonLabel="Send feedback"
+        />
+    );
+};
+```
+
+**Key gotcha:** `onSubmit` has the signature `() => void` — it carries no payload. The rating value is only available through the `rating` state you control via `onRatingChange`.
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Props
+
+| Prop                | Type                      | Default                | Description                                                                                                                                                               |
+| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
+| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
+| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
+| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
+| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
+| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
+| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
+| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
+
+## Rules
+
+-   All three props — `rating`, `onRatingChange`, `onSubmit` — are required.
+-   `onSubmit` does **not** receive the rating value. Track the rating separately via `onRatingChange` state and read it inside `onSubmit`.
+-   `rating` must be controlled state; the component does not manage selection internally.
+
+## Anti-patterns
+
+-   Do not try to read the rating from inside `onSubmit`'s arguments — it receives none. Always use the state value set by `onRatingChange`.
diff --git a/skills/fds-build/resources/v4/components/file-download.md b/skills/fds-build/resources/v4/components/file-download.md
new file mode 100644
index 0000000000..95073261ce
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/file-download.md
@@ -0,0 +1,182 @@
+# FileDownload
+
+Import: `import { FileDownload } from "@lifesg/react-design-system/file-download"`
+
+## Sub-components
+
+-   `FileItemProps` — shape of each item in `fileItems`
+
+## FileItemProps
+
+| Prop                    | Type                        | Default | Description                                   |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------- |
+| `id` \*                 | `string`                    | —       | The unique identifier of the file             |
+| `name` \*               | `string`                    | —       | The name of the file                          |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file                     |
+| `filePath` \*           | `string`                    | —       | The remote path of the file                   |
+| `size`                  | `number`                    | —       | The size of the file in bytes                 |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Custom error message when file download fails |
+| `thumbnailImageDataUrl` | `string`                    | —       | The thumbnail of the file                     |
+| `truncateText`          | `boolean`                   | `true`  | Indicates if text should be truncated         |
+| `ready`                 | `boolean`                   | `true`  | Indicates if the file is ready for download   |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Props — `FileItemDownloadProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
+| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+
+## Props — `FileDownloadProps`
+
+| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
+| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
+| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
+| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
+| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
+| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
+| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+
+## Rules
+
+-   `fileItems` and `onDownload` are required.
+-   On `FileItemProps`: `id`, `name`, `mimeType`, and `filePath` are required.
diff --git a/skills/fds-build/resources/v4/components/file-upload.md b/skills/fds-build/resources/v4/components/file-upload.md
new file mode 100644
index 0000000000..cfdb8c14da
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/file-upload.md
@@ -0,0 +1,399 @@
+# FileUpload
+
+Import: `import { FileUpload } from "@lifesg/react-design-system/file-upload"`
+
+## When to use
+
+-   Forms that require users to attach one or more files (e.g. supporting documents, ID scans, images).
+-   Use `sortable` when file order matters for downstream processing.
+-   Use `editableFileItems` when image files need alt-text or descriptions.
+-   Use `readOnly` on review or summary screens to display uploaded files without allowing changes.
+
+## Usage
+
+```tsx
+import { FileUpload } from "@lifesg/react-design-system/file-upload";
+
+<FileUpload
+    title="Upload supporting documents"
+    description="PDF, JPG, or PNG. Max 5 MB each."
+    accept=".pdf,.jpg,.png"
+    fileItems={fileItems}
+    onChange={(files) => {}}
+    onDelete={(item) => {}}
+/>;
+```
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Custom labels
+
+| Prop                             | Type     | Default          | Description                                       |
+| -------------------------------- | -------- | ---------------- | ------------------------------------------------- |
+| `customLabels.uploadButtonLabel` | `string` | `"Upload files"` | Label of the button that triggers the file dialog |
+
+## FileItemProps
+
+| Prop                    | Type                        | Required | Description                              |
+| ----------------------- | --------------------------- | -------- | ---------------------------------------- |
+| `id`                    | `string`                    | Yes      | Unique identifier for the file           |
+| `name`                  | `string`                    | Yes      | File name displayed in the list          |
+| `type`                  | `string`                    | Yes      | MIME type of the file                    |
+| `size`                  | `number`                    | Yes      | File size in bytes                       |
+| `description`           | `string`                    | —        | Alt text or description for the file     |
+| `progress`              | `number`                    | —        | Upload progress from 0 to 1              |
+| `errorMessage`          | `string \| React.ReactNode` | —        | Per-file error message                   |
+| `thumbnailImageDataUrl` | `string`                    | —        | Thumbnail data URL rendered for the file |
+| `truncateText`          | `boolean`                   | `true`   | Truncates long file names                |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Props — `FileItemProps`
+
+| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
+| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
+| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
+| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
+| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
+| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
+| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
+| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
+| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
+| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
+
+## Props — `FileInputProps`
+
+| Prop        | Type                                 | Default | Description                                                      |
+| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
+| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
+| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
+| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
+| `disabled`  | `boolean`                            | —       | —                                                                |
+| `id`        | `string`                             | —       | —                                                                |
+| `className` | `string`                             | —       | —                                                                |
+| `name`      | `string`                             | —       | —                                                                |
+
+## Props — `FileUploadProps`
+
+| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
+| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
+| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
+| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
+| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
+| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
+| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
+| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
+| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
+| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
+| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
+| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
+| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
+| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
+| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
+| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
+| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
+| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
+| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
+| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
+| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
+| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
+| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
+| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
+| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
+
+## Rules
+
+-   Always manage `fileItems` state in the parent — the component does not store files internally.
+-   Always handle `onChange` to convert incoming `File[]` into `FileItemProps[]` and add them to state.
+-   Always handle `onDelete` to remove the corresponding item from state.
+-   Use `maxFiles` to enforce the maximum number of attachments allowed by the backend.
+-   Use `progress` on individual `FileItemProps` to show per-file upload progress.
+-   Use `errorMessage` on individual `FileItemProps` to surface per-file upload errors.
+-   Use the component-level `errorMessage` for overall validation errors (e.g. "At least one file is required").
+-   Use `accept` (inherited from `<input type="file">`) to restrict file types to what the backend accepts.
+
+## Anti-patterns
+
+-   Do not use without wiring `onChange` and `onDelete` — the list will not update.
+-   Do not store files in component state inside the same component that renders `FileUpload` — hoist state to the form level.
+-   Do not skip `id`, `name`, `type`, and `size` in `FileItemProps` — they are required fields.
+-   Do not use `editableFileItems` for non-image files — description editing only applies to images.
diff --git a/skills/fds-build/resources/v4/components/filter.md b/skills/fds-build/resources/v4/components/filter.md
new file mode 100644
index 0000000000..05d091a816
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/filter.md
@@ -0,0 +1,728 @@
+# Filter
+
+Import: `import { Filter } from "@lifesg/react-design-system/filter"`
+
+## When to use
+
+Use on listing pages to narrow a result set. `Filter` automatically switches between a desktop sidebar and a mobile modal at the `lg-max` breakpoint.
+
+## Composition
+
+```
+Filter                                  ← recommended: auto-switches sidebar ↔ modal at lg breakpoint
+├── Filter.Item title="Sort by"         ← section header + collapsible wrapper
+│   └── {RadioButton group}             ← sort options use RadioButton, not Filter.Checkbox
+├── Filter.Item title="Category"
+│   └── Filter.Checkbox                 ← multi-select filter options
+└── Filter.Item title="..."
+    └── Filter.Checkbox
+```
+
+Manual variants (bypass auto-responsive):
+
+```
+Filter.Sidebar                          ← desktop sidebar only
+Filter.Modal                            ← mobile modal only
+Filter.Page                             ← full-page filter (mobile-only flows)
+```
+
+`Filter.Item` is the only valid direct child of `Filter`, `Filter.Sidebar`, or `Filter.Modal`. Use `RadioButton` for sort (single-select); use `Filter.Checkbox` for multi-select filters.
+
+## Variants
+
+| Variant                  | When to use                                                     |
+| ------------------------ | --------------------------------------------------------------- |
+| `<Filter>` (recommended) | Auto-responsive — desktop sidebar + mobile modal                |
+| `<Filter.Sidebar>`       | Desktop sidebar only — when bypassing auto-responsive behaviour |
+| `<Filter.Modal>`         | Mobile modal only — when bypassing auto-responsive behaviour    |
+
+## Usage
+
+### Auto-responsive Filter (recommended)
+
+`Filter` renders a sidebar on desktop and a modal on mobile automatically. Pass children as a function to receive `mode` (`"desktop" | "mobile"`) when you need to render differently per viewport.
+
+```tsx
+import { useState } from "react";
+import { Filter } from "@lifesg/react-design-system/filter";
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+const ListingFilter = () => {
+    const [category, setCategory] = useState("all");
+    const [activeCount, setActiveCount] = useState(0);
+
+    const handleClear = () => {
+        setCategory("all");
+        setActiveCount(0);
+    };
+
+    return (
+        <Filter
+            count={activeCount}
+            onClear={handleClear}
+            onDone={() => {
+                /* commit draft state */
+            }}
+            onDismiss={() => {
+                /* discard draft state */
+            }}
+        >
+            {(mode) => (
+                <>
+                    <Filter.Item title="Category">
+                        <RadioButton
+                            name="category"
+                            value="all"
+                            checked={category === "all"}
+                            onChange={() => setCategory("all")}
+                        >
+                            All
+                        </RadioButton>
+                        <RadioButton
+                            name="category"
+                            value="news"
+                            checked={category === "news"}
+                            onChange={() => setCategory("news")}
+                        >
+                            News
+                        </RadioButton>
+                    </Filter.Item>
+                    <Filter.Item title="Sort by" collapsible={false}>
+                        <RadioButton name="sort" value="newest" defaultChecked>
+                            Newest first
+                        </RadioButton>
+                        <RadioButton name="sort" value="oldest">
+                            Oldest first
+                        </RadioButton>
+                    </Filter.Item>
+                </>
+            )}
+        </Filter>
+    );
+};
+```
+
+Key points:
+
+-   `onDone` and `onDismiss` are mobile-only callbacks; they are ignored on desktop.
+-   `collapsible={false}` on sort sections keeps them always expanded.
+-   `count` drives the active-filter badge in the header.
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Props — `FilterBaseProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterSidebarProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterModalProps`
+
+| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
+| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
+| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
+
+## Props — `FilterProps`
+
+| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
+| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
+| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
+| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
+| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
+| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
+| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
+| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
+
+## Props — `FilterItemProps`
+
+| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
+| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
+| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
+| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
+| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
+| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
+| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
+| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
+| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
+| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
+| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
+| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
+| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
+
+## Props — `FilterPageProps`
+
+| Prop          | Type              | Default | Description                                       |
+| ------------- | ----------------- | ------- | ------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                 |
+| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
+| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
+
+## Rules
+
+-   `Filter` is the recommended entry point — it automatically renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile.
+-   Always provide `onClear` to reset all filter state in a single handler.
+-   Set `collapsible={false}` on sort sections — sort options should always be visible.
+-   Pass children as a function `(mode) => ReactNode` to render different content on desktop vs mobile.
+-   `Filter.Modal` has a built-in Done button — do not add an external Apply button; use `onDone` to react to it.
+-   Add a keyword search input (`Form.Input`) above the `Filter` component — search is not built into `Filter`.
+-   Use `count` to show the number of active filters in the header.
+-   Use `Filter.Sidebar` or `Filter.Modal` directly only when overriding the responsive behaviour.
+-   `Filter.Page` is used inside `Filter.Modal` only, for drill-down sub-pages.
+
+## Anti-patterns
+
+-   Do not pass `viewport`, `showSearch`, or `searchText` — these props do not exist.
+-   Do not use `headerTitle`, `toggleFilterButtonLabel`, or `doneButtonLabel` directly on `Filter` — these are deprecated. Use `customLabels` instead.
+-   Do not add an external Apply button when using `Filter.Modal` — the built-in Done button handles it.
+-   Do not use `Filter.Sidebar` and `Filter.Modal` separately unless you need to override responsive behaviour — use `Filter` instead.
diff --git a/skills/fds-build/resources/v4/components/footer.md b/skills/fds-build/resources/v4/components/footer.md
new file mode 100644
index 0000000000..07e0f7c2e9
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/footer.md
@@ -0,0 +1,291 @@
+# Footer
+
+Import: `import { Footer } from "@lifesg/react-design-system/footer"`
+
+## When to use
+
+Place at the bottom of every page. Required on all pages.
+
+## Variants
+
+| Variant                 | When to use                                                      |
+| ----------------------- | ---------------------------------------------------------------- |
+| `<Footer />` (no props) | Standard pages — disclaimer links and copyright are theme-driven |
+| `links`                 | Pages with navigational footer links (max 2 columns)             |
+| `copyrightInfo`         | Custom copyright text required                                   |
+| `layout="stretch"`      | Full-width layout — pair with `Navbar layout="stretch"`          |
+
+## Usage
+
+```tsx
+import { Footer } from "@lifesg/react-design-system/footer";
+
+{
+    /* Standard footer — no props required */
+}
+<Footer />;
+
+{
+    /* Footer with navigation links */
+}
+<Footer
+    links={[
+        [
+            { children: "About us", href: "/about" },
+            { children: "Contact", href: "/contact" },
+        ],
+    ]}
+    lastUpdated={new Date("2025-01-01")}
+/>;
+```
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## FooterLinkProps\<T\>
+
+Inherits `TypographyLinkProps`, plus:
+
+| Prop           | Type     | Description                                 |
+| -------------- | -------- | ------------------------------------------- |
+| `data-options` | `T`      | Custom attributes passed to the link object |
+| `data-testid`  | `string` | Test identifier                             |
+
+## DisclaimerLinks
+
+| Prop                  | Type                  | Default    | Description                                                         |
+| --------------------- | --------------------- | ---------- | ------------------------------------------------------------------- |
+| `privacy`             | `TypographyLinkProps` | predefined | Privacy Statement link — text is fixed to "Privacy Statement"       |
+| `termsOfUse`          | `TypographyLinkProps` | predefined | Terms of Use link — text is fixed to "Terms of Use"                 |
+| `reportVulnerability` | `TypographyLinkProps` | predefined | Report Vulnerability link — text is fixed to "Report Vulnerability" |
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Props — `DisclaimerLinks`
+
+| Prop                  | Type                      | Default | Description |
+| --------------------- | ------------------------- | ------- | ----------- |
+| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
+| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
+| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
+
+## Props — `FooterLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `FooterProps`
+
+| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
+| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
+| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
+| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
+| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
+| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
+| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
+| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
+| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
+| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
+| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
+| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
+| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
+| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
+
+## Rules
+
+-   Use `<Footer />` with no props for standard pages — do not add unnecessary props.
+-   `layout` must match the Navbar `layout` prop; do not mix `"default"` and `"stretch"`.
+-   Wrap the app in a flex column layout so the footer stays pinned to the bottom on short pages:
+    -   Outer wrapper: `display: flex; flex-direction: column; min-height: 100vh`
+    -   Page content area: `flex: 1`
+-   Disclaimer link text cannot be customised — only `href` and event handlers can be overridden via `disclaimerLinks`.
+-   `copyrightInfo` overrides `lastUpdated` — do not set both.
+-   When `showDownloadAddon` and `showResourceAddon` are both `true`, download takes precedence.
+-   `links` is a 2D array: each inner array is one column of links.
+
+## Anti-patterns
+
+-   Do not omit the flex layout wrapper — the footer will not stick to the bottom on short pages.
+-   Do not pass `children` and `links` together — `children` replaces the top section entirely.
+-   Do not customise disclaimer link labels — they are legally fixed strings.
diff --git a/skills/fds-build/resources/v4/components/form-date-input.md b/skills/fds-build/resources/v4/components/form-date-input.md
new file mode 100644
index 0000000000..0c77fa3b8a
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-date-input.md
@@ -0,0 +1,257 @@
+# Form.DateInput
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a single date from the user (e.g. date of birth, appointment date, submission deadline).
+-   Any form field that requires calendar-based date selection.
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.DateInput className={styles.dateInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .dateInput {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class — `max-width` constrains the component without conflicting with its internal `width: 100%`.
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                       |
+| ------- | -------- | --------------------------------- |
+| `year`  | `number` | Currently displayed year (`YYYY`) |
+| `month` | `number` | Currently displayed month (1–12)  |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Props
+
+| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
+| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                              | —             | —                                                                                                                                                       |
+| `id`                       | `string`                              | —             | —                                                                                                                                                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
+| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
+| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
+| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
+| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
+| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
+| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
+| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
+| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
+| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
+| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
+| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
+| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
+| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
+| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
+| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
+| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
+| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
+| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
+| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
+| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `YYYY-MM-DD` string.
+-   Use `minDate`/`maxDate` to constrain selectable dates to valid business ranges.
+-   Use `disabledDates` for known blackout dates (e.g. public holidays).
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
+-   Use `readOnly` on review or summary screens where the value should be visible but not editable.
+-   Specify `dropdownRootNode` if the component is inside a scrollable container to prevent the calendar from clipping.
+-   Date strings use `YYYY-MM-DD` format throughout (value, minDate, maxDate, disabledDates, onChange return).
+
+## Anti-patterns
+
+-   Do not use a plain text input for date collection — the picker enforces valid date formats automatically.
+-   Do not set `allowDisabledSelection` unless there is a specific UX reason to allow out-of-range dates.
+-   Do not rely on `error` prop alone without an `errorMessage`; users need descriptive feedback.
+-   Do not use for date-range selection — use `Form.DateRangeInput` instead.
diff --git a/skills/fds-build/resources/v4/components/form-date-range-input.md b/skills/fds-build/resources/v4/components/form-date-range-input.md
new file mode 100644
index 0000000000..2ea5681e03
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-date-range-input.md
@@ -0,0 +1,333 @@
+# Form.DateRangeInput
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a start and end date from the user (e.g. leave period, booking period, date range filter).
+-   Use `variant="week"` when the selection must always be a full calendar week.
+-   Use `variant="fixed-range"` when the duration is predetermined (e.g. always 7 days).
+
+## Usage
+
+`onChange` always receives both start and end as `YYYY-MM-DD` strings, even for week and fixed-range variants.
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const LeavePeriodField = () => {
+    const [start, setStart] = useState("");
+    const [end, setEnd] = useState("");
+
+    return (
+        <Form.DateRangeInput
+            label="Leave period"
+            value={start}
+            valueEnd={end}
+            minDate="2024-01-01"
+            maxDate="2024-12-31"
+            onChange={(s, e) => {
+                setStart(s);
+                setEnd(e);
+            }}
+        />
+    );
+};
+```
+
+```tsx
+{
+    /* variant="week" — whole-week selection */
+}
+<Form.DateRangeInput
+    label="Select week"
+    variant="week"
+    value={start}
+    valueEnd={end}
+    onChange={(s, e) => {
+        setStart(s);
+        setEnd(e);
+    }}
+/>;
+
+{
+    /* variant="fixed-range" — valueEnd derived automatically; only store start */
+}
+<Form.DateRangeInput
+    label="14-day quarantine period"
+    variant="fixed-range"
+    numberOfDays={14}
+    value={start}
+    valueEnd={end}
+    onChange={(s, e) => {
+        setStart(s);
+        setEnd(e);
+    }}
+/>;
+```
+
+Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class:
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.DateRangeInput className={styles.dateRangeInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .dateRangeInput {
+    max-width: 24rem;
+}
+```
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## YearMonthDisplay
+
+| Prop    | Type     | Description                       |
+| ------- | -------- | --------------------------------- |
+| `year`  | `number` | Currently displayed year (`YYYY`) |
+| `month` | `number` | Currently displayed month (1–12)  |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Props
+
+| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
+| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
+| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
+| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
+| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
+| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
+| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
+| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
+| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
+| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
+| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
+| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
+| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
+| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
+| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
+| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
+| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
+| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
+| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
+| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
+| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
+| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
+| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
+| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` (start) and `valueEnd` (end) for controlled usage; `onChange` receives both as `YYYY-MM-DD` strings.
+-   Use `minDate`/`maxDate` to restrict selection to valid business date ranges.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
+-   Use `readOnly` on review screens where the range should be visible but not editable.
+-   Specify `dropdownRootNode` if the component is inside a scrollable container.
+-   `valueEnd` is only relevant for `variant="range"` and `variant="fixed-range"`.
+-   `numberOfDays` only applies when `variant="fixed-range"`.
+
+## Anti-patterns
+
+-   Do not use for single-date selection — use `Form.DateInput` instead.
+-   Do not set `numberOfDays` unless `variant="fixed-range"` is also set.
+-   Do not rely on `error` alone without an `errorMessage`.
+-   Do not allow end date before start date — validate in `onChange` before updating state.
diff --git a/skills/fds-build/resources/v4/components/form-e-signature.md b/skills/fds-build/resources/v4/components/form-e-signature.md
new file mode 100644
index 0000000000..4808458372
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-e-signature.md
@@ -0,0 +1,170 @@
+# Form.ESignature
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Forms that legally require a handwritten signature from the user (e.g. consent forms, declarations, agreements).
+-   Use `description` to guide the user on how to sign (e.g. "Sign within the box using your mouse or touchscreen").
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop              | Type                                | Default        | Description                                                                                                                                      |
+| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`       | `string`                            | —              | —                                                                                                                                                |
+| `id`              | `string`                            | —              | —                                                                                                                                                |
+| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
+| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
+| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
+| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
+| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
+| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
+| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; the value is a base64-encoded PNG string.
+-   Use `loadingProgress` and `loadingLabel` to indicate server upload progress after the signature is submitted.
+-   Set `errorMessage` when signature validation fails (e.g. canvas is empty on submit).
+-   Use `disabled` when the signature field should be locked (e.g. after submission or in a locked step).
+-   `value` and the `onChange` return value are both base64-encoded PNG strings.
+-   `loadingProgress` and `loadingLabel` are used to show upload progress after the signature is captured.
+
+## Anti-patterns
+
+-   Do not use for typed signatures or checkbox confirmations — this component is for handwritten drawing input only.
+-   Do not store the raw base64 string in a URL parameter or cookie — it is large; use server-side storage.
+-   Do not omit `description` — users need guidance on where and how to draw their signature.
diff --git a/skills/fds-build/resources/v4/components/form-input.md b/skills/fds-build/resources/v4/components/form-input.md
new file mode 100644
index 0000000000..ef36c844c3
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-input.md
@@ -0,0 +1,160 @@
+# Form.Input
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use for any single-line text entry inside a form. Always prefer `Form.Input` over the bare `Input` component when a label or error message is required.
+
+## Variants
+
+| `styleType`            | When to use                                                                                 |
+| ---------------------- | ------------------------------------------------------------------------------------------- |
+| `"bordered"` (default) | Standard form fields — provides clear affordance                                            |
+| `"no-border"`          | Inline editing or contexts where a surrounding container already provides visual separation |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+<Form.Input
+    label="Full name"
+    placeholder="Enter your name"
+    value={value}
+    onChange={(e) => {}}
+/>;
+```
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                        | Default    | Description                                                                                                                                      |
+| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
+| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
+| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
+| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Set `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
+-   Use `readOnly` on review or summary screens — not `disabled`. Disabled implies interaction is unavailable; read-only implies the field is intentionally non-editable in context.
+-   Use `allowClear` for optional fields and search-like inputs; pair with `onClear` to reset controlled value.
+-   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
+-   Provide `errorMessage` rather than `error` alone — the string drives both the visual state and the accessible error text.
+-   Use `label` as a plain string for simple labels; use `FormLabelProps` (with `subtitle` or `addon`) only when additional context is needed.
+-   `error` is redundant when `errorMessage` is provided — `errorMessage` implies the error state automatically.
+-   `spacing` only has effect when `type="tel"`.
+-   `styleType="no-border"` removes the visible border — use only in contexts with a background that provides visual separation.
+
+## Anti-patterns
+
+-   Do not use `disabled` on review screens — use `readOnly`.
+-   Do not set both `error` and `errorMessage` — `errorMessage` is sufficient.
+-   Do not use `spacing` with input types other than `"tel"`.
+-   Do not use `styleType="no-border"` in a form context without a containing element that visually distinguishes the field.
diff --git a/skills/fds-build/resources/v4/components/form-masked-input.md b/skills/fds-build/resources/v4/components/form-masked-input.md
new file mode 100644
index 0000000000..c46732eb4a
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-masked-input.md
@@ -0,0 +1,244 @@
+# Form.MaskedInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Displaying sensitive data that should be partially hidden by default with a user-controlled reveal toggle (e.g. NRIC, FIN, passport number, bank account number).
+-   Read-only fields that are loaded asynchronously and should show a loading / error state.
+
+## Form-wrapper props
+
+| Prop                | Type                        | Description                             |
+| ------------------- | --------------------------- | --------------------------------------- |
+| `label`             | `string \| FormLabelProps`  | Field label                             |
+| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
+| `data-error-testid` | `string`                    | Test identifier for the error message   |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Props
+
+| Prop                | Type                          | Default          | Description                                                                                                                                         |
+| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`             | `string`                      | —                | —                                                                                                                                                   |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
+| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
+| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
+| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
+| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
+| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
+| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
+| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
+| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
+| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
+| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
+| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
+| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
+| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
+| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
+| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
+| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
+| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
+| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
+| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Choose one masking strategy per instance: `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer`.
+-   Use `maskRange` for fixed-position sensitive segments (e.g. `[1, 4]` for NRIC middle characters).
+-   Use `maskRegex` when the characters to mask follow a pattern rather than a fixed range.
+-   Use `transformInput="uppercase"` for identifiers that are conventionally uppercase (e.g. NRIC, passport).
+-   Use `loadState` only when `readOnly` is also `true` — for fields that are fetched asynchronously.
+-   Provide `onTryAgain` when `loadState="fail"` so users can retry the fetch.
+-   `loadState` only takes effect when `readOnly` is also `true`.
+-   Provide only one of `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer` per instance.
+
+## Anti-patterns
+
+-   Do not use for non-sensitive fields — masking adds friction and should be reserved for data that genuinely requires it.
+-   Do not set `loadState` without `readOnly` — it has no effect in editable mode.
+-   Do not combine multiple masking strategies (`maskRange` + `maskRegex`) on the same instance.
diff --git a/skills/fds-build/resources/v4/components/form-multi-select.md b/skills/fds-build/resources/v4/components/form-multi-select.md
new file mode 100644
index 0000000000..20ca52ceba
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-multi-select.md
@@ -0,0 +1,320 @@
+# Form.MultiSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users can select more than one option from a predefined list. For single selections use `Form.Select`. For hierarchical options use `Form.NestedMultiSelect`.
+
+## Variants
+
+| `variant`   | When to use                                              |
+| ----------- | -------------------------------------------------------- |
+| `"default"` | Standard form context                                    |
+| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+const options = [
+    { value: "doc", label: "Document" },
+    { value: "img", label: "Image" },
+    { value: "pdf", label: "PDF" },
+];
+
+<Form.MultiSelect
+    label="File types"
+    options={options}
+    selectedOptions={selected}
+    valueExtractor={(opt) => opt.value}
+    listExtractor={(opt) => opt.label}
+    displayValueExtractor={(opt) => opt.label}
+    onSelectOptions={(opts) => {}}
+/>;
+```
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
+| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
+| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
+| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
+| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always provide `options` — the component has no meaning without it.
+-   Provide `valueExtractor` and `listExtractor` for typed option arrays — treat as required.
+-   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing raw values instead of labels in the closed selector.
+-   Use `maxSelectable` when there is a business rule limiting how many options can be chosen; the component enforces it automatically.
+-   Use `enableSearch` when the list exceeds ~10 items.
+-   Provide `customLabels` to localise or contextualise "Select all", "Clear all", and count labels.
+-   Use `optionsLoadState` to communicate async loading states.
+-   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
+-   `onSelectOptions` receives the complete updated selection array — not a delta.
+-   Unlike `Form.Select`, there is no `readOnly` prop — use `disabled` for non-editable states.
+
+## Anti-patterns
+
+-   Do not use `Form.MultiSelect` when only one option can be selected — use `Form.Select`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
+-   Do not set both `error` and `errorMessage`.
+-   Do not manage selection capping manually in `onSelectOptions` — use `maxSelectable` instead.
diff --git a/skills/fds-build/resources/v4/components/form-nested-multi-select.md b/skills/fds-build/resources/v4/components/form-nested-multi-select.md
new file mode 100644
index 0000000000..8a96fcb24b
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-nested-multi-select.md
@@ -0,0 +1,364 @@
+# Form.NestedMultiSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users can select multiple options from a hierarchically organised list of up to 3 levels. For hierarchical single-select use `Form.NestedSelect`. For flat multi-select use `Form.MultiSelect`.
+
+## Variants
+
+| `variant`   | When to use           |
+| ----------- | --------------------- |
+| `"default"` | Standard form context |
+| `"small"`   | Compact layouts       |
+
+| `mode`       | When to use                                                                              |
+| ------------ | ---------------------------------------------------------------------------------------- |
+| `"default"`  | System decides initial expand state                                                      |
+| `"expand"`   | Expand all categories on open — for short, browsable lists                               |
+| `"collapse"` | Collapse all categories on open — for long lists where search is the primary interaction |
+
+## Usage
+
+### Multi-select with parallel keyPaths / values arrays
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
+
+interface SkillValue {
+    id: string;
+    name: string;
+}
+
+const options: L1OptionProps<SkillValue, SkillValue, SkillValue>[] = [
+    {
+        key: "design",
+        label: "Design",
+        subItems: [
+            {
+                key: "design-ux",
+                label: "UX Design",
+                value: { id: "ux", name: "UX Design" },
+            },
+            {
+                key: "design-ui",
+                label: "UI Design",
+                value: { id: "ui", name: "UI Design" },
+            },
+        ],
+    },
+    {
+        key: "engineering",
+        label: "Engineering",
+        subItems: [
+            {
+                key: "eng-fe",
+                label: "Frontend",
+                value: { id: "fe", name: "Frontend" },
+            },
+            {
+                key: "eng-be",
+                label: "Backend",
+                value: { id: "be", name: "Backend" },
+            },
+        ],
+    },
+];
+
+const NestedMultiSelectExample = () => {
+    // keyPaths[i] and values[i] always refer to the same selection — keep them in sync
+    const [keyPaths, setKeyPaths] = useState<string[][]>([
+        ["design", "design-ux"], // pre-selected: UX Design
+    ]);
+    const [values, setValues] = useState<SkillValue[]>([
+        { id: "ux", name: "UX Design" },
+    ]);
+
+    return (
+        <Form.NestedMultiSelect<SkillValue, SkillValue, SkillValue>
+            label="Skills"
+            options={options}
+            selectedKeyPaths={keyPaths}
+            // onSelectOptions provides the NEXT full selection state — replace, don't merge
+            onSelectOptions={(nextKeyPaths, nextValues) => {
+                setKeyPaths(nextKeyPaths);
+                setValues(nextValues as SkillValue[]);
+            }}
+            valueToStringFunction={(val) => val.name}
+            enableSearch
+        />
+    );
+};
+```
+
+**The parallel-array contract:** index `i` in `keyPaths` and index `i` in `values` always describe the same selected item. `onSelectOptions` delivers the complete next state — replace both arrays together, never splice one independently. Initialise both arrays with matching entries when pre-populating selections.
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Props
+
+| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
+| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
+| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
+| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
+| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
+| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
+| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
+| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
+| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
+| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
+| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
+| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
+| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
+| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
+| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
+| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
+| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
+| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
+| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
+| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
+
+## Rules
+
+-   Every option node must have a unique `key` string — key paths are used for controlled state.
+-   Provide `valueToStringFunction` when values are not plain strings. The same function is applied to values at all nesting levels — ensure values are homogeneous across levels, or that the function handles all types.
+-   Use `enableSearch` when the total option count across all levels is large.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Provide `customLabels` to localise "Select all", "Clear all", and count labels.
+-   `options` is the only mandatory component-specific prop.
+-   Options follow the same nested structure as `Form.NestedSelect`: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
+-   `selectedKeyPaths` is an array of key-path arrays — one per selected item.
+-   `onSelectOptions` receives the complete updated `keyPaths` and `values` arrays on every change.
+-   `valueToStringFunction` uses a single callback for all nesting levels — values across levels must be the same type or handled uniformly.
+
+## Anti-patterns
+
+-   Do not use `Form.NestedMultiSelect` for flat option lists — use `Form.MultiSelect`.
+-   Do not use when only one option can be selected — use `Form.NestedSelect`.
+-   Do not use duplicate `key` values across options — selection state will break.
+-   Do not set both `error` and `errorMessage`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
diff --git a/skills/fds-build/resources/v4/components/form-nested-select.md b/skills/fds-build/resources/v4/components/form-nested-select.md
new file mode 100644
index 0000000000..0138296c51
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-nested-select.md
@@ -0,0 +1,361 @@
+# Form.NestedSelect
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when options are organised in a hierarchy of up to 3 levels — e.g. industry → sector → role, or country → state → city. For flat single-select use `Form.Select`. For hierarchical multi-select use `Form.NestedMultiSelect`.
+
+## Variants
+
+| `variant`   | When to use           |
+| ----------- | --------------------- |
+| `"default"` | Standard form context |
+| `"small"`   | Compact layouts       |
+
+| `mode`       | When to use                                                                            |
+| ------------ | -------------------------------------------------------------------------------------- |
+| `"default"`  | System decides initial expand state based on selected path                             |
+| `"expand"`   | Expand all categories on open — useful when the list is short and browsing is expected |
+| `"collapse"` | Collapse all categories on open — useful for long lists where search is primary        |
+
+## Usage
+
+### Three-level hierarchy with controlled keyPath
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
+
+interface RoleValue {
+    id: string;
+    label: string;
+}
+
+const options: L1OptionProps<RoleValue, RoleValue, RoleValue>[] = [
+    {
+        key: "engineering",
+        label: "Engineering",
+        subItems: [
+            {
+                key: "engineering-frontend",
+                label: "Frontend",
+                subItems: [
+                    {
+                        key: "engineering-frontend-react",
+                        label: "React Developer",
+                        value: { id: "fe-react", label: "React Developer" },
+                    },
+                    {
+                        key: "engineering-frontend-vue",
+                        label: "Vue Developer",
+                        value: { id: "fe-vue", label: "Vue Developer" },
+                    },
+                ],
+            },
+            {
+                key: "engineering-backend",
+                label: "Backend",
+                value: { id: "be", label: "Backend Developer" },
+            },
+        ],
+    },
+];
+
+const NestedSelectExample = () => {
+    // keyPath is the path of keys from root to selected node
+    const [keyPath, setKeyPath] = useState<string[]>([]);
+    const [value, setValue] = useState<RoleValue | undefined>();
+
+    return (
+        <Form.NestedSelect<RoleValue, RoleValue, RoleValue>
+            label="Job role"
+            options={options}
+            selectedKeyPath={keyPath}
+            // onChange receives the full key path and the node's value
+            onChange={(path, val) => {
+                setKeyPath(path);
+                setValue(val);
+            }}
+            valueToStringFunction={(val) => val.label}
+            selectableCategory // intermediate nodes (e.g. "Backend") are also selectable
+            enableSearch
+        />
+    );
+};
+```
+
+**keyPath explains the selection:** `["engineering", "engineering-frontend", "engineering-frontend-react"]` means the user drilled through Engineering → Frontend → React Developer. An empty array means nothing is selected.
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Props
+
+| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
+| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
+| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
+| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
+| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
+| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
+| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
+| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
+| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
+| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
+| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
+| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
+| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
+| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
+| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
+| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
+| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
+| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
+| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
+
+## Rules
+
+-   Every option node must have a unique `key` string — the key path is used for controlled state.
+-   Provide `valueToStringFunction` when values are not plain strings and the selected display needs to be derived from the value.
+-   Enable `selectableCategory` only when selecting a parent category is a valid business outcome — otherwise category nodes serve as navigational groupings only.
+-   Use `enableSearch` when the total option count across all levels is large.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
+-   `options` is the only mandatory component-specific prop.
+-   Options follow a nested structure: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
+-   `selectedKeyPath` is an array of keys tracing the path to the selected leaf (e.g. `["parent-key", "child-key"]`).
+-   `selectableCategory` enables selection of non-leaf (parent category) nodes.
+
+## Anti-patterns
+
+-   Do not use `Form.NestedSelect` for flat option lists — use `Form.Select`.
+-   Do not use when multiple selections are needed — use `Form.NestedMultiSelect`.
+-   Do not use duplicate `key` values across options — selection state will break.
+-   Do not set both `error` and `errorMessage`.
diff --git a/skills/fds-build/resources/v4/components/form-otp-verification.md b/skills/fds-build/resources/v4/components/form-otp-verification.md
new file mode 100644
index 0000000000..2513ba3d79
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-otp-verification.md
@@ -0,0 +1,247 @@
+# Form.OtpVerification
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Flows that require identity verification via a one-time password sent to a phone number or email address.
+-   The component manages the full multi-step UI: input contact → send OTP → enter OTP → verify.
+
+## Usage
+
+### Email variant
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
+
+const EmailOtpExample = () => {
+    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
+    const [email, setEmail] = useState("");
+
+    return (
+        <Form.OtpVerification
+            label="Verify your email"
+            type="email"
+            emailValue={email}
+            onEmailChange={setEmail}
+            otpState={otpState}
+            onOtpStateChange={setOtpState}
+            onSendOtp={async () => {
+                // Throw to surface the error inline — do NOT return an error string
+                const res = await api.sendEmailOtp(email);
+                if (!res.ok) throw new Error("Invalid email address");
+            }}
+            onVerifyOtp={async (otpInput) => {
+                const res = await api.verifyOtp(otpInput);
+                if (!res.ok)
+                    throw new Error("Incorrect OTP. Please try again.");
+            }}
+            onResendOtp={async () => {
+                const res = await api.sendEmailOtp(email);
+                if (!res.ok) throw new Error("Could not resend OTP");
+            }}
+            verifyOtpCountdownTimer={300}
+        />
+    );
+};
+```
+
+### Phone variant (`fixedCountry` required)
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
+import { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input";
+
+const PhoneOtpExample = () => {
+    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
+    const [phone, setPhone] = useState<PhoneNumberInputValue>({ number: "" });
+
+    return (
+        <Form.OtpVerification
+            label="Verify your mobile number"
+            type="phone-number"
+            phoneNumberValue={phone}
+            onPhoneNumberChange={setPhone}
+            fixedCountry // required when type="phone-number"; hides country selector
+            otpState={otpState}
+            onOtpStateChange={setOtpState}
+            onSendOtp={async () => {
+                const res = await api.sendSmsOtp(phone.number);
+                if (!res.ok) throw new Error("Invalid phone number");
+            }}
+            onVerifyOtp={async (otpInput) => {
+                const res = await api.verifyOtp(otpInput);
+                if (!res.ok)
+                    throw new Error("Incorrect OTP. Please try again.");
+            }}
+            onResendOtp={async () => {
+                const res = await api.sendSmsOtp(phone.number);
+                if (!res.ok) throw new Error("Could not resend OTP");
+            }}
+            verifyOtpCountdownTimer={180}
+        />
+    );
+};
+```
+
+**Key gotcha — callbacks must throw, not return error strings.**
+The component catches the thrown error and displays `error.message` inline.
+Returning a value (or nothing) always signals success and advances the state machine.
+
+## Phone-number-specific props
+
+| Prop                  | Type                                     | Description                                            |
+| --------------------- | ---------------------------------------- | ------------------------------------------------------ |
+| `phoneNumberValue`    | `PhoneNumberInputValue`                  | Controlled phone number value                          |
+| `onPhoneNumberChange` | `(value: PhoneNumberInputValue) => void` | Called when phone input changes                        |
+| `fixedCountry`        | `true`                                   | Locks the country code; required for phone-number type |
+
+## Email-specific props
+
+| Prop            | Type                      | Description                     |
+| --------------- | ------------------------- | ------------------------------- |
+| `emailValue`    | `string`                  | Controlled email value          |
+| `onEmailChange` | `(value: string) => void` | Called when email input changes |
+
+## PhoneNumberInputValue
+
+| Prop          | Type     | Description                 |
+| ------------- | -------- | --------------------------- |
+| `number`      | `string` | Phone number                |
+| `countryCode` | `string` | Country code (e.g. `"+65"`) |
+
+## Form-specific props
+
+| Prop    | Type                       | Description |
+| ------- | -------------------------- | ----------- |
+| `label` | `string \| FormLabelProps` | Field label |
+
+## Props
+
+| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
+| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
+| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
+| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
+| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
+| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
+| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
+| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
+| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
+| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
+| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
+| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
+| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
+| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
+| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
+| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
+| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
+| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
+| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
+| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
+| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
+| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
+| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
+| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
+| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
+| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
+| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
+| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
+| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
+| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
+| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
+| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
+| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
+| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
+| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
+| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
+| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
+| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
+| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
+| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
+| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
+| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
+| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
+| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
+| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
+| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
+| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
+| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
+| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
+| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
+| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
+| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
+| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
+| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
+| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
+| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
+| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Control `otpState` externally and update it via `onOtpStateChange` — the component does not manage its own state.
+-   `onSendOtp`, `onVerifyOtp`, and `onResendOtp` must be async functions; throw an error inside them to trigger the corresponding error display (`sendOtpError`, `verifyOtpError`).
+-   Always pass `fixedCountry` when `type="phone-number"` — the prop is required to lock the country selector.
+-   Set `verifyOtpCountdownTimer` to match the actual OTP expiry window from your backend.
+-   Pass `sendOtpError` and `verifyOtpError` from server responses so users receive actionable feedback.
+-   `otpState` is externally controlled — the component does not manage its own flow state.
+-   `fixedCountry` is required when `type="phone-number"`.
+
+## Anti-patterns
+
+-   Do not try to manage the step sequence manually — use `otpState` and let `onOtpStateChange` drive transitions.
+-   Do not use for non-identity-verification scenarios — for simple code inputs, use a plain `Form.Input`.
+-   Do not omit `fixedCountry` for `type="phone-number"` — the country selector will be shown unexpectedly.
+-   Do not use synchronous functions for `onSendOtp`, `onVerifyOtp`, or `onResendOtp` — they must return Promises.
diff --git a/skills/fds-build/resources/v4/components/form-phone-number-input.md b/skills/fds-build/resources/v4/components/form-phone-number-input.md
new file mode 100644
index 0000000000..db5f96025f
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-phone-number-input.md
@@ -0,0 +1,274 @@
+# Form.PhoneNumberInput
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+Type import: `import type { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input"`
+
+## When to use
+
+-   Collecting a phone number that requires a country code prefix.
+-   International forms where users may have numbers from different countries.
+-   Use `fixedCountry` when the service only accepts numbers from one country (e.g. Singapore-only services).
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.PhoneNumberInput className={styles.phoneNumberInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .phoneNumberInput {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## PhoneNumberInputValue
+
+| Prop          | Type     | Description                                                                                                             |
+| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `number`      | `string` | The phone number                                                                                                        |
+| `countryCode` | `string` | The country code (e.g. `"+65"`). The `+` prefix is optional on input but always included in the `onChange` return value |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
+| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
+| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
+| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
+| `className`               | `string`                                   | —        | —                                                                                                                                                |
+| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
+| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
+| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
+| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
+| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
+| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
+| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
+| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
+| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
+| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
+| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `name`                    | `string`                                   | —        | —                                                                                                                                                |
+| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
+| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
+| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
+| `id`                      | `string`                                   | —        | —                                                                                                                                                |
+| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
+| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
+| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` returns `{ countryCode, number }`.
+-   Use `enableSearch` when the country list is long and users need to find their country quickly.
+-   Use `fixedCountry` together with a pre-set `value.countryCode` so the locked code is visible.
+-   Use `allowClear` when the field can be optionally cleared by the user.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+
+## Anti-patterns
+
+-   Do not use a plain text input for international phone numbers — formatting and country code handling must be consistent.
+-   Do not use without `fixedCountry` when only one country is supported — it creates unnecessary friction.
+-   Do not omit `value.countryCode` when `fixedCountry` is true — the locked code won't render without it.
diff --git a/skills/fds-build/resources/v4/components/form-predictive-text-input.md b/skills/fds-build/resources/v4/components/form-predictive-text-input.md
new file mode 100644
index 0000000000..a8babd0d9e
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-predictive-text-input.md
@@ -0,0 +1,268 @@
+# Form.PredictiveTextInput
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   The option set is too large for a static dropdown and must be fetched dynamically (e.g. address lookup, postal code search, product search, large dataset autocomplete).
+-   Users need to type to narrow down results before selecting.
+
+## Usage
+
+### Location search — three extractors working together
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+interface Location {
+    id: string;
+    name: string;
+    address: string;
+}
+
+const LocationSearchExample = () => {
+    const [selected, setSelected] = useState<Location | undefined>();
+
+    const fetchOptions = async (input: string): Promise<Location[]> => {
+        const res = await api.searchLocations(input);
+        return res.results;
+    };
+
+    return (
+        <Form.PredictiveTextInput<Location, string>
+            label="Search location"
+            minimumCharacters={3} // fetch only after 3 chars typed
+            fetchOptions={fetchOptions}
+            // Populates the text field when an option is selected
+            valueExtractor={(item) => item.name}
+            // Populates each row in the dropdown list
+            listExtractor={(item) => `${item.name} — ${item.address}`}
+            // Displays the chosen value as a chip / confirmation label
+            displayValueExtractor={(item) => item.name}
+            selectedOption={selected}
+            onSelectOption={(item) => setSelected(item ?? undefined)}
+        />
+    );
+};
+```
+
+**How the three extractors divide responsibility:**
+
+| Extractor               | When it runs               | What it renders                  |
+| ----------------------- | -------------------------- | -------------------------------- |
+| `listExtractor`         | While the dropdown is open | Each option row in the list      |
+| `valueExtractor`        | After selection            | The text field value             |
+| `displayValueExtractor` | After selection            | The chip / confirmed-value label |
+
+Debounce `fetchOptions` internally (e.g. with `setTimeout` or a library) — the component calls it on every character change.
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Props
+
+| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
+| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
+| `className`             | `string`                                        | —               | —                                                                                                                                                           |
+| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
+| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
+| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
+| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
+| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
+| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
+| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
+| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
+| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
+| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
+| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
+| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
+| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
+| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
+| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
+| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
+| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
+| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
+| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
+| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
+| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
+| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
+| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
+| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   `fetchOptions` is required — it must be async and return an array of option objects.
+-   Debounce inside `fetchOptions` to avoid flooding the API on every keystroke.
+-   Set `minimumCharacters` to a value that produces useful results — `3` is the default, but adjust for your data source.
+-   Always provide `valueExtractor`, `listExtractor`, and `displayValueExtractor` — omitting any of these produces inconsistent display behaviour.
+-   Use `selectedOption` and `onSelectOption` for controlled selection.
+-   Set `errorMessage` when the selected option fails validation.
+-   `fetchOptions` is called on every keystroke after `minimumCharacters` is reached — debounce inside the function if needed.
+-   Generic type `T` is the option object shape; `V` is the extracted value type.
+
+## Anti-patterns
+
+-   Do not use when the full option list is small and known upfront — use `Form.Select` or `Form.MultiSelect` instead.
+-   Do not use `fetchOptions` without debouncing — each keystroke fires a new call.
+-   Do not omit extractor functions — the component cannot determine what to display without them.
diff --git a/skills/fds-build/resources/v4/components/form-select.md b/skills/fds-build/resources/v4/components/form-select.md
new file mode 100644
index 0000000000..d2dc7aa8f0
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-select.md
@@ -0,0 +1,332 @@
+# Form.Select
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use when users must select exactly one option from a predefined list. For multiple selections use `Form.MultiSelect`. For hierarchical options use `Form.NestedSelect`.
+
+## Variants
+
+| `variant`   | When to use                                              |
+| ----------- | -------------------------------------------------------- |
+| `"default"` | Standard form context                                    |
+| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
+
+## Usage
+
+```tsx
+import { Form } from "@lifesg/react-design-system/form";
+
+const options = [
+    { value: "sg", label: "Singapore" },
+    { value: "my", label: "Malaysia" },
+];
+
+<Form.Select
+    label="Country"
+    options={options}
+    selectedOption={selected}
+    valueExtractor={(opt) => opt.value}
+    listExtractor={(opt) => opt.label}
+    displayValueExtractor={(opt) => opt.label}
+    onSelectOption={(opt) => {}}
+/>;
+```
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
+| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
+| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
+| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
+| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
+| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
+| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
+| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
+| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
+| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always provide `options` — the component has no meaning without it.
+-   Provide `valueExtractor` and `listExtractor` when the option objects are not plain strings — these are effectively required for typed option arrays.
+-   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing the raw value (e.g. "sg") in the closed selector instead of the label (e.g. "Singapore").
+-   Use `optionsLoadState` to communicate async loading states — set to `"loading"` while fetching, `"failed"` on error (triggers retry UI).
+-   Use `enableSearch` when the list exceeds ~10 items.
+-   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
+-   Use `readOnly` on review screens — not `disabled`.
+-   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
+-   Use `dropdownWidth` when the dropdown must be wider than the trigger (e.g. long option text).
+-   `options` is the only mandatory component-specific prop.
+-   Only specify `dropdownRootNode` when the default `body` rendering causes scroll or z-index conflicts.
+
+## Anti-patterns
+
+-   Do not use `Form.Select` when users can choose more than one option — use `Form.MultiSelect`.
+-   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
+-   Do not set both `error` and `errorMessage`.
+-   Do not use `disabled` on review screens — use `readOnly`.
diff --git a/skills/fds-build/resources/v4/components/form-slider.md b/skills/fds-build/resources/v4/components/form-slider.md
new file mode 100644
index 0000000000..156a622ea5
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-slider.md
@@ -0,0 +1,286 @@
+# Form.Slider
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Selecting a single numeric value within a bounded range (e.g. budget, age, percentage, rating).
+-   When the relative position of a value matters more than typing an exact number.
+
+## Usage
+
+### Basic slider with display-only `onChange` and API-safe `onChangeEnd`
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const BudgetSlider = () => {
+    const [displayValue, setDisplayValue] = useState(500);
+
+    const handleChange = (value: number) => {
+        // Safe: fires continuously during drag — update display only
+        setDisplayValue(value);
+    };
+
+    const handleChangeEnd = (value: number) => {
+        // Safe: fires once on mouse/touch release — trigger API calls here
+        fetchResults({ maxBudget: value });
+    };
+
+    return (
+        <Form.Slider
+            label={`Budget: $${displayValue}`}
+            min={0}
+            max={2000}
+            step={100}
+            value={displayValue}
+            onChange={handleChange}
+            onChangeEnd={handleChangeEnd}
+            showSliderLabels
+            sliderLabelPrefix="$"
+            showIndicatorLabel
+            indicatorLabelPrefix="$"
+        />
+    );
+};
+```
+
+**Never put API calls or expensive state updates in `onChange`** — it fires on every pixel of drag movement. Use `onChangeEnd` instead.
+
+### Custom track colours
+
+`colors` takes a two-element array: `[leftTrackColor, rightTrackColor]`.
+
+```tsx
+<Form.Slider
+    label="Risk level"
+    min={0}
+    max={10}
+    colors={["#4caf50", "#e0e0e0"]}
+    showSliderLabels
+    sliderLabelSuffix=" / 10"
+/>
+```
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                   | Type                                   | Default | Description                                                                                                                                      |
+| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
+| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
+| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
+| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
+| `className`            | `string`                               | —       | —                                                                                                                                                |
+| `id`                   | `string`                               | —       | —                                                                                                                                                |
+| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
+| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
+| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
+| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
+| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
+| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
+| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
+| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
+| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
+| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
+| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
+| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
+| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
+| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Always set `min` and `max` to meaningful bounds for the use case.
+-   Use `step` to restrict values to meaningful increments (e.g. `step={500}` for a budget slider).
+-   Use `onChangeEnd` for expensive operations (API calls, heavy computations) — `onChange` fires on every pixel of movement.
+-   Enable `showSliderLabels` so users know the range bounds.
+-   Enable `showIndicatorLabel` so users can see the current value while dragging.
+-   Provide `ariaLabel` when the label alone does not fully describe the slider's purpose to screen readers.
+-   `onChange` fires continuously during drag; use `onChangeEnd` for expensive operations such as API calls.
+-   `colors` array format is `[leftTrack, rightTrack]`.
+
+## Anti-patterns
+
+-   Do not use `onChange` to trigger API calls — use `onChangeEnd` to avoid flooding the network.
+-   Do not use when the user needs to enter a precise value — prefer a number input in that case.
+-   Do not omit `min` and `max` — the defaults (0–100) may not be appropriate for the domain.
diff --git a/skills/fds-build/resources/v4/components/form-textarea.md b/skills/fds-build/resources/v4/components/form-textarea.md
new file mode 100644
index 0000000000..0560a1f633
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-textarea.md
@@ -0,0 +1,206 @@
+# Form.Textarea
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+Use for freeform long-text entry — descriptions, comments, reasons, or any field where users need more than one line. Use `Form.Input` for single-line text.
+
+## Usage
+
+### 1. Basic controlled textarea
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const [value, setValue] = useState("");
+
+<Form.Textarea
+    label="Description"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    placeholder="Enter a description..."
+    rows={4}
+/>;
+```
+
+### 2. With `maxLength` — auto-renders a character counter
+
+```tsx
+<Form.Textarea
+    label="Comments"
+    maxLength={200}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+/>;
+{
+    /* A counter "0 / 200" appears below automatically — no extra code needed */
+}
+```
+
+### 3. With `renderCustomCounter`
+
+The prop signature is `(maxLength: number, currentValueLength: number) => JSX.Element`. Note the argument order: `maxLength` first, then `currentValueLength`.
+
+```tsx
+<Form.Textarea
+    label="Comments"
+    maxLength={200}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    renderCustomCounter={(maxLength, currentValueLength) => (
+        <span
+            style={{
+                color: currentValueLength > maxLength * 0.9 ? "red" : "inherit",
+            }}
+        >
+            {currentValueLength} of {maxLength} characters used
+        </span>
+    )}
+/>
+```
+
+### 4. With `transformValue`
+
+`transformValue` runs on every input event and replaces the raw value before it is applied. Do not duplicate this logic in `onChange`.
+
+```tsx
+<Form.Textarea
+    label="Reference code"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    transformValue={(raw) => raw.toUpperCase()}
+    maxLength={50}
+/>;
+{
+    /* User types "abc" → stored value becomes "ABC" */
+}
+```
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
+| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
+| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
+| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
+| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Set `rows` to match the expected content length — a short reason field needs fewer rows than a free-text description.
+-   Set `resize="none"` when the textarea height is fixed by design to prevent layout disruption.
+-   Provide `maxLength` when a character limit must be enforced — the built-in counter appears automatically.
+-   Use `renderCustomCounter` only when the default counter format does not meet content requirements.
+-   Use `transformValue` for on-the-fly normalisation (e.g. forced capitalisation) — do not replicate this in `onChange`.
+-   Provide `errorMessage` rather than `error` alone.
+-   Setting native `maxLength` renders a character counter below the textarea automatically.
+-   `renderCustomCounter` overrides the default counter UI when `maxLength` is set.
+-   `error` is redundant when `errorMessage` is provided.
+-   `transformValue` runs on every input event — use for normalisation (e.g. uppercase conversion).
+
+## Anti-patterns
+
+-   Do not use `Form.Textarea` for single-line inputs — use `Form.Input`.
+-   Do not implement a manual character counter in consumer code when `maxLength` is set — the built-in counter handles it.
+-   Do not set both `error` and `errorMessage`.
diff --git a/skills/fds-build/resources/v4/components/form-time-range-picker.md b/skills/fds-build/resources/v4/components/form-time-range-picker.md
new file mode 100644
index 0000000000..2d02accc9a
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-time-range-picker.md
@@ -0,0 +1,290 @@
+# Form.TimeRangePicker
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a start and end time from the user (e.g. operating hours, meeting slot, booking window).
+-   Use `variant="combobox"` with `interval` when users should pick from fixed time slots (e.g. every 30 minutes).
+-   Use `variant="dial"` (default) for freeform time selection.
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.TimeRangePicker className={styles.timeRangePicker} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .timeRangePicker {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Combobox-variant-specific props
+
+| Prop                     | Type     | Default | Description                                                  |
+| ------------------------ | -------- | ------- | ------------------------------------------------------------ |
+| `interval`               | `number` | `15`    | Minutes between each dropdown option                         |
+| `startLimit`             | `string` | —       | Earliest time shown in the dropdown                          |
+| `endLimit`               | `string` | —       | Latest time shown in the dropdown                            |
+| `initialScrollStartTime` | `string` | —       | Time the start dropdown scrolls to when start field is empty |
+| `initialScrollEndTime`   | `string` | —       | Time the end dropdown scrolls to when end field is empty     |
+
+## TimeRangePickerValue
+
+| Prop    | Type     | Description                                                                                                 |
+| ------- | -------- | ----------------------------------------------------------------------------------------------------------- |
+| `start` | `string` | Start time. Dial 24hr: `"HH:mm"`, dial 12hr: `"hh:mmA"`. Combobox 24hr: `"HH:mm"`, combobox 12hr: `"h:mma"` |
+| `end`   | `string` | End time, same format as `start`                                                                            |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
+| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                                  | —             | —                                                                                                                                                |
+| `id`                     | `string`                                  | —             | —                                                                                                                                                |
+| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
+| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
+| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
+| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
+| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
+| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
+| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
+| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
+| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
+| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
+| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
+| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
+| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
+| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
+| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
+| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
+| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
+| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
+| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
+| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
+| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `TimeRangePickerValue`.
+-   Match `format` to the expected string format in `TimeRangePickerValue`.
+-   Use `startLimit`/`endLimit` with `combobox` variant to restrict available options to valid business hours.
+-   Set `errorMessage` rather than `error` alone.
+-   Use `dropdownRootNode` when inside a modal or scrollable container.
+-   Time string format differs between `dial` and `combobox` variants — see `TimeRangePickerValue` above.
+-   `interval`, `startLimit`, `endLimit`, and `initialScroll*` props only apply when `variant="combobox"`.
+
+## Anti-patterns
+
+-   Do not use for single time selection — use `Form.TimePicker` instead.
+-   Do not mix dial and combobox time string formats — the format differs between variants.
+-   Do not set combobox-specific props (`interval`, `startLimit`, `endLimit`, `initialScroll*`) when `variant="dial"`.
diff --git a/skills/fds-build/resources/v4/components/form-timepicker.md b/skills/fds-build/resources/v4/components/form-timepicker.md
new file mode 100644
index 0000000000..85088d2e03
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-timepicker.md
@@ -0,0 +1,239 @@
+# Form.Timepicker
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+> **Casing:** the export is `Form.Timepicker` (lowercase `p`), not `Form.TimePicker`.
+
+## When to use
+
+-   Collecting a single time value from the user (e.g. appointment time, start time, notification time).
+-   Use `format="12hr"` for consumer-facing forms where AM/PM is more intuitive.
+-   Use `format="24hr"` (default) for operational or technical contexts.
+
+## Usage
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.Timepicker className={styles.timepicker} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .timepicker {
+    max-width: 24rem;
+}
+```
+
+Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Props
+
+| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
+| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
+| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
+| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
+| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
+| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
+| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
+| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
+| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
+| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
+| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
+| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
+| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
+| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
+| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
+| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
+| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
+| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
+| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
+| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
+| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
+| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
+| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
+| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
+| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
+| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage.
+-   Match `format` to the expected string format: `"HH:mm"` for 24hr, `"hh:mmA"` for 12hr.
+-   Set `errorMessage` rather than `error` alone so users understand what is wrong.
+-   Use `dropdownRootNode` when the picker is inside a modal or fixed container to avoid z-index issues.
+-   Use `alignment="right"` when the picker is near the right edge of the viewport.
+-   `onChange` fires only after the user clicks the Confirm button, not on every dial interaction.
+-   `onBlur` does not apply any in-progress selection — use `onChange` for committed values.
+
+## Anti-patterns
+
+-   Do not use for time-range selection — use `Form.TimeRangePicker` instead.
+-   Do not mix 12hr format strings with `format="24hr"` or vice versa.
+-   Do not rely on `onBlur` to capture the selected value — it does not commit the selection.
diff --git a/skills/fds-build/resources/v4/components/form-unit-number-input.md b/skills/fds-build/resources/v4/components/form-unit-number-input.md
new file mode 100644
index 0000000000..057e501480
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/form-unit-number-input.md
@@ -0,0 +1,295 @@
+# Form.UnitNumberInput
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Form } from "@lifesg/react-design-system/form"`
+
+## When to use
+
+-   Collecting a Singapore unit number in `#floor-unit` format (e.g. `#01-234`).
+-   Any address form that includes a unit number field for Singapore addresses.
+
+## Usage
+
+### Basic controlled usage with validation guard
+
+`onChange` returns a `floor-unit` string (e.g. `"03-12"`) or the sentinel string `"Invalid unit number"` for malformed input. Always check before persisting.
+
+```tsx
+import { useState } from "react";
+import { Form } from "@lifesg/react-design-system/form";
+
+const UnitField = () => {
+    const [value, setValue] = useState("");
+    const [error, setError] = useState("");
+
+    const handleChange = (val: string) => {
+        if (val === "Invalid unit number") {
+            setError("Please enter a valid unit number.");
+            // Do not persist — keep previous valid value in state
+        } else {
+            setError("");
+            setValue(val); // e.g. "03-12"
+        }
+    };
+
+    return (
+        <Form.UnitNumberInput
+            label="Unit number"
+            value={value}
+            onChange={handleChange}
+            errorMessage={error}
+        />
+    );
+};
+```
+
+### `onBlur` zero-pads automatically
+
+After the user tabs away, `onBlur` fires with the formatted value. The displayed value may change without any user input — update state accordingly.
+
+```tsx
+<Form.UnitNumberInput
+    label="Unit number"
+    value={value}
+    onChange={handleChange}
+    onBlur={(formatted) => {
+        // e.g. user typed "3-2" → formatted is "03-02"
+        setValue(formatted);
+    }}
+/>
+```
+
+### `onChangeRaw` — separate floor and unit
+
+Use `onChangeRaw` when downstream code needs floor and unit as distinct values, regardless of validity.
+
+```tsx
+<Form.UnitNumberInput
+    label="Unit number"
+    onChangeRaw={(parts: string[]) => {
+        const [floor, unit] = parts; // e.g. ["03", "12"]
+        setFloor(floor);
+        setUnit(unit);
+    }}
+/>
+```
+
+Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class:
+
+```tsx
+import styles from "./MyForm.module.css";
+
+<Form.UnitNumberInput className={styles.unitNumberInput} ... />
+```
+
+```css
+/* MyForm.module.css */
+:where(body.fds-breakpoint-lg-min) .unitNumberInput {
+    max-width: 24rem;
+}
+```
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props
+
+| Prop           | Type                          | Default   | Description                                                                                                                                      |
+| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`    | `string`                      | —         | —                                                                                                                                                |
+| `id`           | `string`                      | —         | —                                                                                                                                                |
+| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
+| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
+| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
+| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
+| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
+| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
+| `name`         | `string`                      | —         | —                                                                                                                                                |
+| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
+| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
+| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
+| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
+| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
+| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
+| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
+| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
+| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
+| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
+| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Always supply a `label` so the field is accessible.
+-   Pass `value` and `onChange` together for controlled usage.
+-   Check the return value of `onChange` for `"Invalid unit number"` and handle it before persisting the value.
+-   Use `onChangeRaw` if you need floor and unit as separate values for downstream processing.
+-   Use `onBlur` to get the zero-padded, formatted value after the user finishes typing.
+-   Set `errorMessage` to explain validation failures.
+-   `onChange` returns `"Invalid unit number"` for malformed input — check for this string before saving.
+-   `onBlur` zero-pads the unit part (e.g. `"11-2"` → `"11-02"`).
+-   Use `onChangeRaw` / `onBlurRaw` when you need floor and unit as separate values.
+
+## Anti-patterns
+
+-   Do not use a plain text input for unit numbers — the component enforces the correct format automatically.
+-   Do not persist the value returned from `onChange` without first checking it is not `"Invalid unit number"`.
+-   Do not use for non-Singapore address formats — the component enforces the `floor-unit` structure.
diff --git a/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md b/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
new file mode 100644
index 0000000000..a15b2145d0
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
@@ -0,0 +1,486 @@
+# FullscreenImageCarousel
+
+Import: `import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel"`
+
+## When to use
+
+Use to display a fullscreen overlay carousel of images or custom content (e.g. PDFs, videos) with thumbnail navigation, zoom, and optional delete controls.
+
+## Sub-components
+
+-   `FullscreenImageCarouselItemProps` — union of `FullscreenImageCarouselImageItemProps` and `FullscreenImageCarouselCustomItemProps`
+
+## Usage
+
+### Mixed image and custom items
+
+Items use a discriminated union on `type`. Image items may omit `type` (defaults to image); custom items **must** set `type: "custom"` and provide `renderContent`.
+
+```tsx
+import { useState } from "react";
+import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel";
+
+const DocViewer = () => {
+    const [show, setShow] = useState(false);
+
+    const items = [
+        // Image item — type may be omitted
+        {
+            src: "https://example.com/photo.jpg",
+            alt: "Site photo",
+            fileName: "photo.jpg",
+            fileSize: "1.2 MB",
+        },
+        // Custom item — type is required
+        {
+            type: "custom" as const,
+            itemLabel: "PDF",
+            thumbnailSrc: "https://example.com/pdf-thumb.svg",
+            renderContent: () => (
+                <iframe
+                    src="https://example.com/document.pdf"
+                    title="PDF preview"
+                    style={{ width: "100%", height: "100%", border: "none" }}
+                />
+            ),
+        },
+    ];
+
+    const handleDelete = (item, index) => {
+        // Remove the item from your state; the delete button only appears
+        // because onDelete is provided.
+        removeItem(index);
+    };
+
+    return (
+        <>
+            <button onClick={() => setShow(true)}>View files</button>
+            <FullscreenImageCarousel
+                show={show}
+                items={items}
+                onClose={() => setShow(false)}
+                onDelete={handleDelete} // omit to hide delete button
+                showFirstAndLastNav
+            />
+        </>
+    );
+};
+```
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## FullscreenImageCarouselItemProps (shared)
+
+| Prop       | Type     | Default | Description                                      |
+| ---------- | -------- | ------- | ------------------------------------------------ |
+| `fileName` | `string` | —       | File name displayed in the info bar at the top   |
+| `fileSize` | `string` | —       | Pre-formatted file size string (e.g. `"2.4 MB"`) |
+
+## FullscreenImageCarouselImageItemProps
+
+| Prop           | Type      | Default | Description                                   |
+| -------------- | --------- | ------- | --------------------------------------------- |
+| `type`         | `"image"` | —       | Discriminant; may be omitted for image items  |
+| `src` \*       | `string`  | —       | The image src                                 |
+| `alt`          | `string`  | —       | Descriptive text for screen readers           |
+| `thumbnailSrc` | `string`  | —       | Thumbnail src; falls back to `src` if omitted |
+
+## FullscreenImageCarouselCustomItemProps
+
+| Prop               | Type                    | Default | Description                                  |
+| ------------------ | ----------------------- | ------- | -------------------------------------------- |
+| `type` \*          | `"custom"`              | —       | Discriminant; must be `"custom"`             |
+| `renderContent` \* | `() => React.ReactNode` | —       | Custom render prop for the full slide area   |
+| `thumbnailSrc`     | `string`                | —       | Thumbnail src; shows placeholder if omitted  |
+| `itemLabel`        | `string`                | —       | Label describing content type (e.g. `"PDF"`) |
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselRef`
+
+| Prop                  | Type                                 | Default | Description                                                               |
+| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
+| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
+| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
+| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
+| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
+
+## Props — `FullscreenImageCarouselProps`
+
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+
+## Props — `FullscreenImageCarouselImageItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
+| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Props — `FullscreenImageCarouselCustomItemProps`
+
+| Prop               | Type                    | Default | Description                                                                                                                          |
+| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
+| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
+| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
+| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
+| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
+| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+
+## Props — `ImageDimension`
+
+| Prop        | Type     | Default | Description |
+| ----------- | -------- | ------- | ----------- |
+| `width` \*  | `number` | —       | —           |
+| `height` \* | `number` | —       | —           |
+
+## Props — `FullscreenImageCarouselItemProps`
+
+| Prop            | Type      | Default | Description                                                                              |
+| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
+| `type`          | `"image"` | —       | —                                                                                        |
+| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
+| `renderContent` | `never`   | —       | —                                                                                        |
+| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
+| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+
+## Rules
+
+-   Always provide `show` and `items` — both are required.
+-   Always wire `onClose` to set `show` to `false`; the component does not close itself.
+-   Do not reorder the `items` array while a delete is in flight.
+-   The delete button only appears when `onDelete` is provided — omit the prop to hide the button entirely.
+
+## Anti-patterns
+
+-   Do not use for inline image galleries — this component renders as a fullscreen modal overlay.
diff --git a/skills/fds-build/resources/v4/components/histogram-slider.md b/skills/fds-build/resources/v4/components/histogram-slider.md
new file mode 100644
index 0000000000..8275933252
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/histogram-slider.md
@@ -0,0 +1,193 @@
+# HistogramSlider
+
+Import: `import { HistogramSlider } from "@lifesg/react-design-system/histogram-slider"`
+
+A range slider with a histogram distribution chart above it — used in filter panels where showing the value distribution helps users pick a range (e.g. price range, age range).
+
+## HistogramBinProps
+
+| Prop       | Type     | Description                                         |
+| ---------- | -------- | --------------------------------------------------- |
+| `count`    | `number` | Number of items in this bin — determines bar height |
+| `minValue` | `number` | Starting value of this bin                          |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Props — `HistogramBinProps`
+
+| Prop          | Type     | Default | Description                                              |
+| ------------- | -------- | ------- | -------------------------------------------------------- |
+| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
+| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
+
+## Props — `HistogramSliderProps`
+
+| Prop               | Type                                   | Default | Description                                                                                                                                             |
+| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`        | `string`                               | —       | —                                                                                                                                                       |
+| `id`               | `string`                               | —       | —                                                                                                                                                       |
+| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
+| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
+| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
+| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
+| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
+| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
+| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
+| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
+| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
+| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
+| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
+| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
+| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
+| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
+
+## Rules
+
+-   `onChange` fires continuously during drag — do not put API calls here; use `onChangeEnd`.
+-   `interval` must match the gap between `minValue` of consecutive bins.
+-   Always provide `ariaLabels` or `aria-labelledby` for accessibility.
+-   Pair with `Filter` in a filter sidebar — `HistogramSlider` is not a `Form.*` component and does not use `label`/`errorMessage`.
diff --git a/docs/skills/fds-build/resources/v3/components/icon.md b/skills/fds-build/resources/v4/components/icon.md
similarity index 92%
rename from docs/skills/fds-build/resources/v3/components/icon.md
rename to skills/fds-build/resources/v4/components/icon.md
index 7fa6d022fe..96b82ec3e1 100644
--- a/docs/skills/fds-build/resources/v3/components/icon.md
+++ b/skills/fds-build/resources/v4/components/icon.md
@@ -14,14 +14,6 @@ import { PersonIcon } from "@lifesg/react-icons/person";
 
 Pattern: `kebab-case` name → import path `@lifesg/react-icons/{name}` → component `{PascalCase}Icon`
 
-## Props
-
-| Prop        | Type     | Default  | Description                      |
-| ----------- | -------- | -------- | -------------------------------- |
-| `size`      | `number` | `24`     | Icon size in px                  |
-| `color`     | `string` | inherits | CSS colour value or token string |
-| `className` | `string` | —        | CSS class                        |
-
 ## Available icons
 
 Icons come in two variants: outline (default) and filled (`-fill` suffix).
diff --git a/skills/fds-build/resources/v4/components/image-button.md b/skills/fds-build/resources/v4/components/image-button.md
new file mode 100644
index 0000000000..8533c75e54
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/image-button.md
@@ -0,0 +1,57 @@
+# ImageButton
+
+Import: `import { ImageButton } from "@lifesg/react-design-system/image-button"`
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
+
+## Props
+
+| Prop                    | Type      | Default | Description                                                                  |
+| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
+| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
+| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
+| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
+| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
diff --git a/skills/fds-build/resources/v4/components/input.md b/skills/fds-build/resources/v4/components/input.md
new file mode 100644
index 0000000000..deac96b8df
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/input.md
@@ -0,0 +1,128 @@
+# Input
+
+Import: `import { Input } from "@lifesg/react-design-system/input"`
+
+## When to use
+
+Use `Input` for standalone inputs that do not need a label or error message — search bars, inline editing, filter fields, or composition contexts where the form layout is provided externally. For all labelled form fields with validation messages, use `Form.Input` instead.
+
+## Variants
+
+| `styleType`            | When to use                                                                                                      |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `"bordered"` (default) | Standard standalone input — provides clear affordance                                                            |
+| `"no-border"`          | Inline editing or search bars embedded in headers/toolbars where a border would conflict with the surrounding UI |
+
+## Props
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputPartialProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputPartialProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputPartialProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Props — `InputPartialProps`
+
+| Prop         | Type             | Default    | Description                                                                                                   |
+| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
+| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
+| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
+
+## Rules
+
+-   Use `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
+-   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
+-   Use `allowClear` for search inputs and optional fields; pair with `onClear` to reset the controlled value.
+-   Set `error={true}` to communicate an invalid state visually — provide a separate error message element in the surrounding layout.
+-   Use `styleType="no-border"` only when the surrounding container or background provides sufficient visual separation.
+-   `Input` is the bare input field with no label or error message wrapper. Use `Form.Input` when a label or validation message is needed.
+-   `spacing` only has effect when `type="tel"`.
+-   `styleType="no-border"` removes the visible border — use only when the surrounding context provides sufficient visual distinction.
+-   `error` drives error-state styling only; there is no built-in error message — pair with external error text if needed.
+
+## Anti-patterns
+
+-   Do not use `Input` inside a form that needs labels or validation messages — use `Form.Input`.
+-   Do not use `spacing` with input types other than `"tel"`.
+-   Do not rely on `Input` alone to surface error messages — it has no built-in error text slot.
diff --git a/skills/fds-build/resources/v4/components/language-switcher.md b/skills/fds-build/resources/v4/components/language-switcher.md
new file mode 100644
index 0000000000..cd0671507a
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/language-switcher.md
@@ -0,0 +1,55 @@
+# LanguageSwitcher
+
+Import: `import { LanguageSwitcher } from "@lifesg/react-design-system/language-switcher"`
+
+## Props
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Props
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Props — `LanguageSwitcherProps`
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Props — `LanguageSwitcherProps`
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Props — `LanguageSwitcherProps`
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Props — `LanguageSwitcherProps`
+
+| Prop               | Type                                         | Default    | Description                                                                |
+| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
+| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
+| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
+| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
+
+## Rules
+
+-   `LanguageSwitcherCode` is the union of supported language codes: `"en" | "zh" | "ms" | "ta"`.
diff --git a/skills/fds-build/resources/v4/components/layout.md b/skills/fds-build/resources/v4/components/layout.md
new file mode 100644
index 0000000000..cb72ba3568
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/layout.md
@@ -0,0 +1,393 @@
+# Layout
+
+> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
+
+Import: `import { Layout } from "@lifesg/react-design-system/layout"`
+
+## Composition
+
+```
+Layout.Container type="grid"        ← responsive 12-col grid (desktop) / 8-col (mobile)
+├── Layout.ColDiv xsCols lgCols     ← column span — always set xsCols
+├── Layout.ColDiv xsCols lgCols
+└── Layout.ColDiv xsCols lgCols
+
+Layout.Container type="flex"        ← horizontal flexbox row
+└── {children}
+
+Layout.Container type="flex-column" ← vertical flexbox column
+└── {children}
+```
+
+`Layout.Section` and `Layout.Content` share the same props as `Layout.Container` and can be used in place of it for semantic HTML structure. Never nest `Layout.Container` inside another `Layout.Container`. Always set `xsCols` on every `Layout.ColDiv` — never set only `lgCols`.
+
+-   `Layout.ColDiv` — responsive grid column div
+
+## Usage
+
+```tsx
+import { Layout } from "@lifesg/react-design-system/layout";
+
+<Layout.Container type="grid">
+    <Layout.ColDiv xsCols={8} lgCols={6}>
+        Content
+    </Layout.ColDiv>
+</Layout.Container>;
+```
+
+| `type`          | Use case                         |
+| --------------- | -------------------------------- |
+| `"grid"`        | Responsive column grid (default) |
+| `"flex"`        | Horizontal flexbox layout        |
+| `"flex-column"` | Vertical flexbox layout          |
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Breakpoints
+
+| Breakpoint | Min width | Columns | Gutter | Device                |
+| ---------- | --------- | ------- | ------ | --------------------- |
+| `xxs`      | 0px       | 8       | 16px   | Smallest mobile       |
+| `xs`       | 321px     | 8       | 16px   | Small mobile          |
+| `sm`       | 376px     | 8       | 16px   | Mobile                |
+| `md`       | 481px     | 8       | 16px   | Large mobile / tablet |
+| `lg`       | 769px     | 12      | 32px   | Desktop               |
+| `xl`       | 1201px    | 12      | 32px   | Large desktop         |
+| `xxl`      | 1441px    | 12      | 32px   | Extra-large           |
+
+### Common column widths
+
+| Use case                             | `xsCols` | `lgCols` | `xlCols` |
+| ------------------------------------ | -------- | -------- | -------- |
+| Full width                           | 8        | 12       | —        |
+| Full width (form progress indicator) | 12       | 12       | —        |
+| Narrow content (forms)               | 12       | 9        | 8        |
+| Half-width (2-up cards)              | 8        | 6        | —        |
+| Third-width (3-up cards)             | 8        | 4        | —        |
+| Quarter-width (4-up metrics)         | 8        | 6        | 3        |
+| Sidebar                              | 8        | 3        | —        |
+| Main + sidebar main                  | 8        | 9        | —        |
+
+## Responsive styles
+
+Use CSS Module classes for responsive styles in v4. The `MediaQuery` breakpoint body classes replace `@media` queries in CSS Modules.
+
+```tsx
+import styles from "./MyComponent.module.css";
+
+<div className={styles.responsiveDiv}>...</div>;
+```
+
+```css
+/* MyComponent.module.css */
+.responsiveDiv {
+    padding: var(--fds-spacing-16);
+}
+
+:global(body.fds-breakpoint-lg-min) .responsiveDiv {
+    padding: var(--fds-spacing-32);
+}
+```
+
+| CSS Module selector                        | Query type          | When it applies                  |
+| ------------------------------------------ | ------------------- | -------------------------------- |
+| `:global(body.fds-breakpoint-md-min) .cls` | `min-width: 481px`  | md and up (tablet+)              |
+| `:global(body.fds-breakpoint-lg-min) .cls` | `min-width: 769px`  | lg and up (desktop+)             |
+| `:global(body.fds-breakpoint-md-max) .cls` | `max-width: 768px`  | md and below (mobile only)       |
+| `:global(body.fds-breakpoint-lg-max) .cls` | `max-width: 1200px` | lg and below (non-large-desktop) |
+
+Design mobile-first — define base styles for mobile, then override with `MinWidth` for larger screens.
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ContainerProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `SectionProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ContentProps`
+
+| Prop          | Type              | Default | Description                                               |
+| ------------- | ----------------- | ------- | --------------------------------------------------------- |
+| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
+| `children` \* | `React.ReactNode` | —       | —                                                         |
+| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
+
+## Props — `ColProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Props — `ColDivProps`
+
+| Prop      | Type      | Default | Description                                                                                                                                      |
+| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
+| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
+| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
+| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
+| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
+| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
+| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
+
+## Rules
+
+-   Use CSS Modules for component-level styles — do not use plain inline styles for layout concerns.
+-   Use `:where(body.fds-breakpoint-{bp}-min)` selectors for responsive styles — never hardcoded pixel breakpoints.
+-   Use CSS custom properties for spacing (e.g. `var(--fds-spacing-16)`) — never hardcode pixel values.
+
+Grid rules:
+
+-   Always use `type="grid"` on Container for responsive column layouts.
+-   Always specify `xsCols` on ColDiv — mobile-first; never only `lgCols`.
+-   Max `xsCols` is 8 (mobile/tablet), max `lgCols` is 12 (desktop).
+-   Never nest `Layout.Container` inside another `Layout.Container`.
+-   A column span applies to all larger viewports until overridden.
diff --git a/skills/fds-build/resources/v4/components/link-list.md b/skills/fds-build/resources/v4/components/link-list.md
new file mode 100644
index 0000000000..430d63de1d
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/link-list.md
@@ -0,0 +1,278 @@
+# LinkList
+
+Import: `import { LinkList } from "@lifesg/react-design-system/link-list"`
+
+## When to use
+
+Use to present a set of related links — related articles, resources, or quick-access shortcuts. Use `style="small"` for compact contexts such as sidebars or footnotes.
+
+## Sub-components
+
+### LinkListItemProps
+
+| Prop                   | Type                                                   | Default | Description                                        |
+| ---------------------- | ------------------------------------------------------ | ------- | -------------------------------------------------- |
+| `title`                | `string`                                               | —       | Link label — required                              |
+| `description`          | `string`                                               | —       | First-level supporting text below the title        |
+| `secondaryDescription` | `string`                                               | —       | Second-level supporting text below the description |
+| `options`              | `T`                                                    | —       | Custom properties to pass to the item              |
+| `onClick`              | `(event: React.MouseEvent<HTMLAnchorElement>) => void` | —       | Per-item click handler — overrides `onItemClick`   |
+| `data-testid`          | `string`                                               | —       | Test identifier for the item                       |
+
+Inherits `HTMLAnchorElement` attributes (e.g. `href`, `target`).
+
+### Custom labels
+
+| Prop       | Type     | Default       | Description                    |
+| ---------- | -------- | ------------- | ------------------------------ |
+| `viewMore` | `string` | `"View more"` | Label for the show-more button |
+| `viewLess` | `string` | `"View less"` | Label for the show-less button |
+
+## Variants
+
+| `style`     | Usage                                                  |
+| ----------- | ------------------------------------------------------ |
+| `"default"` | Standard size — use in main content areas              |
+| `"small"`   | Compact — use in sidebars, footnotes, or dense layouts |
+
+| `loadMode` | Usage                                                         |
+| ---------- | ------------------------------------------------------------- |
+| `"eager"`  | All items loaded upfront; use `maxShown` to collapse the list |
+| `"lazy"`   | Items fetched on demand; requires `loadMore` and `onLoadMore` |
+
+## Usage
+
+```tsx
+import { LinkList } from "@lifesg/react-design-system/link-list";
+
+<LinkList
+    items={[
+        {
+            title: "Apply for a grant",
+            description: "Find out if you qualify.",
+            href: "/grants/apply",
+        },
+        { title: "Check application status", href: "/grants/status" },
+        { title: "Download forms", href: "/grants/forms" },
+    ]}
+    maxShown={2}
+/>;
+```
+
+## Props
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListItemProps`
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListBaseProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+
+## Props — `LinkListEagerProps`
+
+| Prop       | Type      | Default | Description                                                                                                                                                                               |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
+| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
+
+## Props — `LinkListLazyProps`
+
+| Prop            | Type                          | Default | Description                                                                               |
+| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
+| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
+| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
+
+## Props — `LinkListProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
+
+## Props — `LinkListItemProps`
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListBaseProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+
+## Props — `LinkListEagerProps`
+
+| Prop       | Type      | Default | Description                                                                                                                                                                               |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
+| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
+
+## Props — `LinkListLazyProps`
+
+| Prop            | Type                          | Default | Description                                                                               |
+| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
+| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
+| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
+
+## Props — `LinkListProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
+
+## Props — `LinkListItemProps`
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListBaseProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+
+## Props — `LinkListEagerProps`
+
+| Prop       | Type      | Default | Description                                                                                                                                                                               |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
+| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
+
+## Props — `LinkListLazyProps`
+
+| Prop            | Type                          | Default | Description                                                                               |
+| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
+| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
+| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
+
+## Props — `LinkListProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
+
+## Props — `LinkListItemProps`
+
+| Prop                   | Type                                                        | Default | Description                                                                                          |
+| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
+| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
+| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
+
+## Props — `LinkListBaseProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+
+## Props — `LinkListEagerProps`
+
+| Prop       | Type      | Default | Description                                                                                                                                                                               |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
+| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
+
+## Props — `LinkListLazyProps`
+
+| Prop            | Type                          | Default | Description                                                                               |
+| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
+| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
+| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
+
+## Props — `LinkListProps`
+
+| Prop           | Type                                                                                      | Default   | Description                                                                                           |
+| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
+| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
+| `className`    | `string`                                                                                  | —         | —                                                                                                     |
+| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
+| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
+| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
+
+## Rules
+
+-   Use `maxShown` when the list has many items to avoid overwhelming the user on first load (eager mode).
+-   In `"lazy"` mode, both `loadMore` and `onLoadMore` are required.
+-   `onItemClick` applies to all items; per-item `onClick` in `LinkListItemProps` overrides it for that item.
+-   Use per-item `onClick` when individual items need different handling; use `onItemClick` for a uniform handler across all items.
+-   Use `description` to give users enough context to choose the right link without clicking.
+
+## Anti-patterns
+
+-   Using lazy mode without providing `onLoadMore` — the "View more" button will be non-functional.
+-   Omitting `description` when link titles are ambiguous.
+-   Using LinkList for non-link content — use a list or table instead.
diff --git a/skills/fds-build/resources/v4/components/local-nav.md b/skills/fds-build/resources/v4/components/local-nav.md
new file mode 100644
index 0000000000..6bac8af5c2
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/local-nav.md
@@ -0,0 +1,331 @@
+# LocalNav
+
+Import: `import { LocalNavMenu, LocalNavDropdown } from "@lifesg/react-design-system/local-nav"`
+
+## When to use
+
+Use to let users navigate between sections on the same page (in-page navigation). Two components exist for different breakpoints — use both together for full responsive coverage.
+
+## Sub-components
+
+`LocalNavMenu`, `LocalNavDropdown`
+
+## Variants
+
+| Component          | Viewport          | Behaviour                                                              |
+| ------------------ | ----------------- | ---------------------------------------------------------------------- |
+| `LocalNavMenu`     | Desktop           | Vertical link list fixed to the left of page content, sticky on scroll |
+| `LocalNavDropdown` | Tablet and mobile | Renders inline, then sticks to top of viewport after scroll            |
+
+## Usage
+
+```tsx
+import {
+    LocalNavMenu,
+    LocalNavDropdown,
+} from "@lifesg/react-design-system/local-nav";
+
+const navItems = [
+    { title: "Overview", id: "overview" },
+    { title: "Eligibility", id: "eligibility" },
+    { title: "How to apply", id: "how-to-apply" },
+];
+
+{
+    /* Desktop */
+}
+<LocalNavMenu
+    items={navItems}
+    selectedItemIndex={activeIndex}
+    onNavItemSelect={(e, item, index) => {}}
+/>;
+
+{
+    /* Mobile / tablet */
+}
+<LocalNavDropdown
+    items={navItems}
+    selectedItemIndex={activeIndex}
+    defaultLabel="Jump to section"
+    onNavItemSelect={(e, item, index) => {}}
+/>;
+```
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Props — `LocalNavItemProps`
+
+| Prop       | Type                        | Default | Description |
+| ---------- | --------------------------- | ------- | ----------- |
+| `title` \* | `string \| React.ReactNode` | —       | —           |
+| `id`       | `string`                    | —       | —           |
+
+## Props — `LocalNavMenuItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                  |
+| ------------- | --------- | ------- | ------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
+
+## Props — `LocalNavMenuProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                      |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
+| `className`          | `string`                                                                                                                   | —       | —                                                |
+| `id`                 | `string`                                                                                                                   | —       | —                                                |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
+
+## Props — `LocalNavDropdownItemRenderProps`
+
+| Prop          | Type      | Default | Description                                                                                                                                |
+| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
+| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
+
+## Props — `LocalNavDropdownProps`
+
+| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
+| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
+| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
+| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
+| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
+| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
+| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
+
+## Rules
+
+-   Use `LocalNavMenu` on desktop and `LocalNavDropdown` on tablet/mobile — render both and show/hide with CSS breakpoints.
+-   Always implement scroll-spy: update `selectedItemIndex` as the user scrolls to keep the active item in sync with the visible section. This is not automatic.
+-   Place `LocalNavMenu` on the left side of the page content area — not above it.
+-   Set `stickyOffset` on `LocalNavDropdown` equal to the height of the fixed Navbar so the dropdown does not overlap it when sticky.
+-   Keep item labels short — long labels cause overflow.
+-   `defaultLabel` is required on `LocalNavDropdown` — it is the placeholder shown before any item is selected.
+
+## Anti-patterns
+
+-   Do not use `LocalNavMenu` on tablet or mobile — use `LocalNavDropdown` instead.
+-   Do not omit scroll-spy logic — without it, `selectedItemIndex` will not reflect the current section.
+-   Do not place `LocalNavMenu` above the content — it must be a left sidebar.
diff --git a/skills/fds-build/resources/v4/components/masthead.md b/skills/fds-build/resources/v4/components/masthead.md
new file mode 100644
index 0000000000..6d477b6be7
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/masthead.md
@@ -0,0 +1,44 @@
+# Masthead
+
+Import: `import { Masthead } from "@lifesg/react-design-system/masthead"`
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Props
+
+| Prop      | Type      | Default | Description                                                                                                       |
+| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
+
+## Rules
+
+-   No mandatory props.
+-   `Masthead` is typically included via the `Navbar` `masthead` prop — use this standalone component only when rendering the masthead outside a Navbar context.
diff --git a/skills/fds-build/resources/v4/components/menu.md b/skills/fds-build/resources/v4/components/menu.md
new file mode 100644
index 0000000000..61857edcec
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/menu.md
@@ -0,0 +1,338 @@
+# Menu
+
+Import: `import { Menu } from "@lifesg/react-design-system/menu"`
+
+## When to use
+
+Use when a trigger element (button, avatar, nav link) should open a floating dropdown with a list of actions or links.
+
+Common use cases:
+
+-   Avatar / user account menu in authenticated dashboards
+-   Navbar link dropdown for sub-navigation
+
+## Sub-components
+
+`Menu`, `Menu.Content`, `Menu.Section`, `Menu.Item`, `Menu.Link`
+
+## Variants
+
+| Use case          | Structure                                                                                                                   |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| User account menu | First section: name + email as `Menu.Item`. Subsequent sections: `Menu.Link` for profile/settings, `Menu.Item` for sign out |
+| Nav link dropdown | Single `Menu.Section` with `Menu.Link` items                                                                                |
+| Action menu       | `Menu.Section` with `Menu.Item` elements and optional `label`                                                               |
+
+## Usage
+
+```tsx
+import { Menu } from "@lifesg/react-design-system/menu";
+import { Button } from "@lifesg/react-design-system/button";
+
+<Menu
+    menuContent={
+        <Menu.Content>
+            <Menu.Section showDivider={false}>
+                <Menu.Link href="/profile">Profile</Menu.Link>
+                <Menu.Link href="/settings">Settings</Menu.Link>
+            </Menu.Section>
+            <Menu.Section>
+                <Menu.Item label="Sign out" onClick={() => {}} />
+            </Menu.Section>
+        </Menu.Content>
+    }
+>
+    <Button.Default styleType="secondary">Account</Button.Default>
+</Menu>;
+```
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Props — `MenuProps`
+
+| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
+| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
+| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `MenuContentProps`
+
+| Prop          | Type                                                                        | Default | Description                                                      |
+| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+
+## Props — `MenuSectionProps`
+
+| Prop          | Type                                   | Default | Description                                                                 |
+| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+
+## Props — `MenuItemProps`
+
+| Prop       | Type     | Default | Description                                        |
+| ---------- | -------- | ------- | -------------------------------------------------- |
+| `label`    | `string` | —       | Primary text label.                                |
+| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
+
+## Rules
+
+-   `Menu` wraps a trigger element as its child — the trigger can be any element (e.g. `Avatar`, `Button`, `NavbarLink`).
+-   Pass `Menu.Content` as the `menuContent` prop — not as a child of `Menu`.
+-   Use `Menu.Link` for navigation (href-based); use `Menu.Item` for in-page actions (onClick-based).
+-   Use `Menu.Section` with `showDivider` to visually separate unrelated groups of actions.
+-   For user account menus, always show the user's name and email as the first section.
+-   Use `position` to control which side of the trigger the menu appears on; default `"bottom-start"` suits most cases.
+
+## Anti-patterns
+
+-   Do not pass `Menu.Content` as a child of `Menu` — it must be passed as `menuContent`.
+-   Do not mix navigation links and action items in the same `Menu.Section` without a divider.
+-   Do not use `Menu.Item` for links that navigate to a new page — use `Menu.Link` instead.
diff --git a/skills/fds-build/resources/v4/components/modal.md b/skills/fds-build/resources/v4/components/modal.md
new file mode 100644
index 0000000000..f9b0d97024
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/modal.md
@@ -0,0 +1,224 @@
+# Modal
+
+Import: `import { Modal } from "@lifesg/react-design-system/modal"`
+
+## When to use
+
+Use for focused interactions that interrupt the user's flow — confirmations, detail views, or short multi-field forms that do not warrant a new page.
+
+## Sub-components
+
+`Modal`, `Modal.Box`
+
+## Variants
+
+| Use case            | Notes                                                         |
+| ------------------- | ------------------------------------------------------------- |
+| Confirmation dialog | Title, description, and primary/secondary action buttons      |
+| Detail view         | Informational content with a close button                     |
+| Short form          | Minimal fields only; complex forms belong on a dedicated page |
+
+## Usage
+
+### Confirmation dialog
+
+```tsx
+import { useState } from "react";
+import { Modal } from "@lifesg/react-design-system/modal";
+import { Button } from "@lifesg/react-design-system/button";
+import { Text } from "@lifesg/react-design-system/text";
+
+const ConfirmDeleteModal = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+
+    const handleConfirm = () => {
+        // perform action
+        setShow(false);
+    };
+
+    return (
+        <>
+            <Button.Default onClick={() => setShow(true)}>
+                Delete item
+            </Button.Default>
+
+            <Modal show={show} enableOverlayClick onOverlayClick={handleClose}>
+                <Modal.Box showCloseButton onClose={handleClose}>
+                    <div style={{ padding: "2rem" }}>
+                        <Text.H3 style={{ marginBottom: "0.5rem" }}>
+                            Delete this item?
+                        </Text.H3>
+                        <Text.Body style={{ marginBottom: "1.5rem" }}>
+                            This action cannot be undone.
+                        </Text.Body>
+                        <div style={{ display: "flex", gap: "1rem" }}>
+                            <Button.Default
+                                styleType="secondary"
+                                onClick={handleClose}
+                            >
+                                Cancel
+                            </Button.Default>
+                            <Button.Default onClick={handleConfirm}>
+                                Confirm
+                            </Button.Default>
+                        </div>
+                    </div>
+                </Modal.Box>
+            </Modal>
+        </>
+    );
+};
+```
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Props — `ModalProps`
+
+| Prop                    | Type                      | Default       | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+
+## Props — `ModalBoxProps`
+
+| Prop              | Type                        | Default | Description                                                                                                                      |
+| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
+| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
+| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
+| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+
+## Rules
+
+-   Always include `showCloseButton` on `Modal.Box` — the close button is the minimum required exit mechanism.
+-   `Modal` handles the overlay and animation. Always nest `Modal.Box` (or a custom content container) inside `Modal`.
+-   Fragments are not supported as direct children of `Modal`.
+-   Content inside `Modal.Box` scrolls automatically when it exceeds the screen height.
+-   Use `animationFrom="bottom"` for mobile-friendly sheet-style modals.
+-   Optionally also allow overlay dismissal via `enableOverlayClick` + `onOverlayClick`.
+-   Use Typography components for all text inside the modal — not raw HTML elements.
+-   Keep modal content focused — one task or decision per modal.
+-   Use illustrations (image above the title) for complex messages to reduce cognitive load; skip them for simple confirmations.
+
+## Anti-patterns
+
+-   Do not use a Fragment as a direct child of `Modal` — use a valid HTML element or a component that forwards a ref.
+-   Do not use modals for complex multi-step forms — navigate to a dedicated page instead.
+-   Do not stack modals unless using `zIndex` to manage layering explicitly.
+-   Do not omit `showCloseButton` — users must always have a way to exit the modal.
diff --git a/skills/fds-build/resources/v4/components/navbar.md b/skills/fds-build/resources/v4/components/navbar.md
new file mode 100644
index 0000000000..77d6872fe0
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/navbar.md
@@ -0,0 +1,995 @@
+# Navbar
+
+Import: `import { Navbar } from "@lifesg/react-design-system/navbar"`
+
+## When to use
+
+Place at the top of every page. Required on all pages. Automatically collapses navigation items into a hamburger drawer on mobile.
+
+## Variants
+
+| `layout`    | When to use                                     |
+| ----------- | ----------------------------------------------- |
+| `"default"` | Centered content container — standard pages     |
+| `"stretch"` | Full-width content — must match Footer `layout` |
+
+## Usage
+
+### Complete Navbar with link items, a submenu, and an action button
+
+`NavItemProps` is a discriminated union on `itemType`. The default (no `itemType`) is a link item. Use `itemType: "component"` for custom elements like an avatar with a dropdown.
+
+```tsx
+import { useState } from "react";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+
+const AppNavbar = () => {
+    const [selectedId, setSelectedId] = useState("home");
+
+    return (
+        <Navbar
+            masthead
+            selectedId={selectedId}
+            onItemClick={(item) => item.id && setSelectedId(item.id)}
+            items={{
+                desktop: [
+                    // itemType defaults to "link"
+                    {
+                        id: "home",
+                        children: "Home",
+                        href: "/",
+                    },
+                    {
+                        id: "guides",
+                        children: "Guides",
+                        href: "/guides",
+                        // subMenu items share the same shape as top-level link items
+                        subMenu: [
+                            {
+                                id: "guides-start",
+                                children: "Getting started",
+                                href: "/guides/start",
+                            },
+                            {
+                                id: "guides-api",
+                                children: "API reference",
+                                href: "/guides/api",
+                            },
+                        ],
+                    },
+                    {
+                        // itemType: "component" — renders arbitrary JSX; no href or id needed
+                        itemType: "component",
+                        children: <UserAvatar />,
+                    },
+                ],
+            }}
+            actionButtons={{
+                desktop: [
+                    {
+                        type: "button",
+                        args: { children: "Log in", styleType: "secondary" },
+                    },
+                ],
+            }}
+            resources={{
+                primary: { brandName: "MyService", logoSrc: "/logo.svg" },
+            }}
+        />
+    );
+};
+```
+
+Key points:
+
+-   Omit `itemType` (or set `itemType: "link"`) for standard anchor items.
+-   `subMenu` accepts the same `NavItemCommonProps` shape as top-level items.
+-   `itemType: "component"` items take `children: JSX.Element`; they do not accept `id`, `href`, or `subMenu`.
+-   `selectedId` matches against the `id` field of link items to highlight the active page.
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavbarButtonProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarDrawerApi`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavbarDrawerHandle`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavbarButtonProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarDrawerApi`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavbarDrawerHandle`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavbarButtonProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarDrawerApi`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavbarDrawerHandle`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavItemLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                             |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemComponentProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavItemCommonProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id` \*          | `string`                   | —           | —                                                                                                             |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `NavItemsProps`
+
+| Prop         | Type                | Default | Description                                                                |
+| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
+| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
+| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarActionButtonDownloadProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonCtaProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"button"`    | —       | —                                                                                                      |
+| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonComponentProps`
+
+| Prop            | Type                         | Default | Description                                                                                            |
+| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"component"`                | —       | —                                                                                                      |
+| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarActionButtonsProps`
+
+| Prop         | Type                  | Default | Description                                                                         |
+| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
+| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
+
+## Props — `NavbarBrandingProps`
+
+| Prop           | Type     | Default | Description                                                 |
+| -------------- | -------- | ------- | ----------------------------------------------------------- |
+| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
+| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
+
+## Props — `NavbarResourcesProps`
+
+| Prop        | Type                  | Default | Description                                                         |
+| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
+| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
+| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
+
+## Props — `NavbarSharedProps`
+
+| Prop                | Type                       | Default | Description                                                                |
+| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
+| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
+| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
+| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
+| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
+
+## Props — `NavbarDrawerProps`
+
+| Prop                | Type                                                                           | Default | Description                                                                         |
+| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
+| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
+| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
+| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
+| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
+| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
+| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
+| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
+| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
+| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
+
+## Props — `NavbarProps`
+
+| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
+| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
+| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
+| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
+| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
+| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
+| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
+| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
+| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
+| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
+| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
+| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
+| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
+| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
+| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
+| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
+| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
+| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
+| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
+| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
+
+## Props — `NavItemProps`
+
+| Prop          | Type          | Default | Description |
+| ------------- | ------------- | ------- | ----------- |
+| `itemType` \* | `"component"` | —       | —           |
+| `children` \* | `JSX.Element` | —       | —           |
+
+## Props — `NavbarButtonProps`
+
+| Prop            | Type          | Default | Description                                                                                            |
+| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `type` \*       | `"download"`  | —       | —                                                                                                      |
+| `args`          | `ButtonProps` | —       | —                                                                                                      |
+| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
+
+## Props — `NavbarDrawerApi`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Props — `NavbarDrawerHandle`
+
+| Prop               | Type         | Default | Description                                                                   |
+| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
+
+## Rules
+
+-   Always set `masthead` — all government services must display the masthead.
+-   Always provide a meaningful `id` on each `NavItemCommonProps` item — used by `selectedId` to highlight the active page.
+-   `items.desktop` is required; the component crashes without it.
+-   `items.mobile` is optional — falls back to `desktop` if omitted.
+-   `layout` must match the `Footer` `layout` prop; do not mix `"default"` and `"stretch"`.
+-   Limit action buttons to 2–3 maximum.
+-   Use SVG format for brand logos.
+-   When using `fixed`, add corresponding top padding to page content to prevent overlap.
+-   Set `uncollapsible: true` on action buttons that must remain visible on mobile (e.g. avatar).
+-   Use `itemType: "component"` for custom nav elements such as an avatar with a `Menu` dropdown.
+-   Pass `type: "component"` with `args: { render: <Element /> }` for custom action button elements.
+-   `BrandType` is `"primary" | "secondary"` — passed to `onBrandClick`.
+-   The `"download"` button type is pre-programmed for LifeSG purposes.
+-   `NavbarButtonComponentProps` accepts a `render: JSX.Element` field for custom components.
+
+## Anti-patterns
+
+-   Do not omit `masthead` — it is required for government compliance.
+-   Do not supply a custom `resources.primary.logoSrc` unless the service has its own brand logo — omit `resources` to let the theme render its built-in logo.
+-   Do not use `hideNavElements` as a default state — it is for special page states only (e.g. maintenance).
+-   Do not use `fixed: false` unless the layout explicitly requires a non-fixed header.
+-   Do not add more than 3 action buttons — the navbar becomes visually cluttered.
diff --git a/skills/fds-build/resources/v4/components/notification-banner.md b/skills/fds-build/resources/v4/components/notification-banner.md
new file mode 100644
index 0000000000..5c0088852e
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/notification-banner.md
@@ -0,0 +1,371 @@
+# NotificationBanner
+
+Import: `import { NotificationBanner } from "@lifesg/react-design-system/notification-banner"`
+
+## When to use
+
+Use for notices that must always be visible to the user — maintenance windows, policy changes, mandatory announcements. Unlike Toast, it does not auto-dismiss. Unlike Alert, it applies to the entire page, not a specific section.
+
+## Sub-components
+
+-   `NotificationBanner.Link` — Inherits `TypographyLinkProps`. Use for links within banner content.
+
+## HOC
+
+```ts
+withNotificationBanner(data: NotificationContentAttributes[])
+```
+
+### NotificationContentAttributes
+
+| Prop              | Type                                       | Default | Description                                      |
+| ----------------- | ------------------------------------------ | ------- | ------------------------------------------------ |
+| `type`            | `"text"` \| `"link"`                       | —       | Type of content — required                       |
+| `content`         | `string`                                   | —       | Text content — required                          |
+| `otherAttributes` | `TypographyLinkProps` \| `TypographyProps` | —       | Additional props passed to the content component |
+
+## Usage
+
+```tsx
+import { NotificationBanner } from "@lifesg/react-design-system/notification-banner";
+
+<NotificationBanner dismissible sticky onDismiss={() => {}}>
+    Scheduled maintenance on 1 Feb 2026, 2–4 AM.{" "}
+    <NotificationBanner.Link href="/status">
+        View status
+    </NotificationBanner.Link>
+</NotificationBanner>;
+```
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Props — `NotificationBannerProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `NotificationBannerWithForwardedRefProps`
+
+| Prop                 | Type                                            | Default | Description                                                                                                                                            |
+| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
+| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
+| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
+| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
+| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
+| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
+| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
+| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
+| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
+
+## Props — `ContentLinkAttributes`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `ContentTextAttributes`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `NotificationContentAttributes`
+
+| Prop              | Type                                     | Default | Description                                                      |
+| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
+| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
+| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
+
+## Rules
+
+-   Place directly below the Navbar — above all page content.
+-   Use for page-wide or system-wide notices only — not for section-specific messages.
+-   Use `dismissible={false}` for mandatory notices users must not be able to dismiss.
+-   Use `NotificationBanner.Link` for all links within the banner — renders with the external link indicator automatically.
+-   Use `maxCollapsedHeight` for long notices to avoid overwhelming the layout.
+-   Use the `withNotificationBanner` HOC for banner content driven from a backend or external data source.
+
+## Anti-patterns
+
+-   Using NotificationBanner for section-specific messages — use Alert instead.
+-   Using raw anchor tags inside banner content — use `NotificationBanner.Link`.
+-   Placing the banner below page content — it must sit directly below the Navbar.
diff --git a/skills/fds-build/resources/v4/components/pagination.md b/skills/fds-build/resources/v4/components/pagination.md
new file mode 100644
index 0000000000..b75b1b8bb1
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/pagination.md
@@ -0,0 +1,213 @@
+# Pagination
+
+Import: `import { Pagination } from "@lifesg/react-design-system/pagination"`
+
+## When to use
+
+Use below lists or tables when content is split across multiple pages.
+
+## Usage
+
+### Basic pagination (1-based indexing)
+
+```tsx
+import { useState } from "react";
+import { Pagination } from "@lifesg/react-design-system/pagination";
+
+const ResultsList = () => {
+    const totalItems = 243;
+    const pageSize = 10;
+    // activePage is 1-based: page 1 is the first page, not page 0
+    const [activePage, setActivePage] = useState(1);
+
+    return (
+        <>
+            <MyResultsTable
+                items={results.slice(
+                    (activePage - 1) * pageSize,
+                    activePage * pageSize
+                )}
+            />
+            <Pagination
+                totalItems={totalItems}
+                pageSize={pageSize}
+                activePage={activePage}
+                onPageChange={(page) => setActivePage(page)} // page is 1-based
+                showFirstAndLastNav
+            />
+        </>
+    );
+};
+```
+
+### With page size changer
+
+`onPageSizeChange` receives `(page, pageSize)` — reset to page 1 when size changes.
+
+```tsx
+const [activePage, setActivePage] = useState(1);
+const [pageSize, setPageSize] = useState(10);
+
+<Pagination
+    totalItems={500}
+    pageSize={pageSize}
+    activePage={activePage}
+    onPageChange={(page) => setActivePage(page)}
+    onPageSizeChange={(page, size) => {
+        setPageSize(size);
+        setActivePage(page); // component resets to page 1 on size change
+    }}
+    showFirstAndLastNav
+    showPageSizeChanger
+/>;
+```
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Props — `PaginationProps`
+
+| Prop                  | Type                                         | Default             | Description                                                                                                   |
+| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`                  | `string`                                     | —                   | —                                                                                                             |
+| `className`           | `string`                                     | —                   | —                                                                                                             |
+| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
+| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
+| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
+| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
+| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
+| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
+
+## Props — `PageSizeItemProps`
+
+| Prop       | Type     | Default | Description |
+| ---------- | -------- | ------- | ----------- |
+| `value` \* | `number` | —       | —           |
+| `label` \* | `string` | —       | —           |
+
+## Rules
+
+-   `activePage` is 1-based — the first page is `1`, not `0`.
+-   Always provide `onPageChange` to update `activePage` when the user changes page.
+-   Provide `onPageSizeChange` when `showPageSizeChanger` is enabled.
+-   Always center-align pagination below the results list.
+-   Place pagination below the results — never above.
+-   When total pages exceed 7, the component automatically shows an ellipsis — no additional props needed.
+-   The page size changer is only visible in the desktop viewport.
+-   The selected option in the page size changer takes precedence over `pageSize`.
+
+## Anti-patterns
+
+-   Do not use `showFirstAndLastNav` and `showPageSizeChanger` together unless the dataset is large enough to warrant both — avoid cluttering the interface with excessive controls.
+-   Do not left- or right-align pagination.
+-   Do not place pagination above the results.
+-   Do not use `pageSize` and a `pageSizeOptions` selection simultaneously without handling `onPageSizeChange` — the changer selection overrides `pageSize`.
diff --git a/skills/fds-build/resources/v4/components/pill.md b/skills/fds-build/resources/v4/components/pill.md
new file mode 100644
index 0000000000..54118a8ec4
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/pill.md
@@ -0,0 +1,95 @@
+# Pill
+
+Import: `import { Pill } from "@lifesg/react-design-system/pill"`
+
+## When to use
+
+Use to communicate a status — application state, approval outcome, or processing stage. For categories, filters, or tagging, use Tag instead.
+
+## Variants
+
+| `type`      | Usage                                                    |
+| ----------- | -------------------------------------------------------- |
+| `"outline"` | Subtle, secondary label — default for most uses          |
+| `"solid"`   | Higher emphasis — use when the status needs to stand out |
+
+| `colorType` | Semantic use                  |
+| ----------- | ----------------------------- |
+| `"green"`   | Success, active, approved     |
+| `"red"`     | Error, rejected, danger       |
+| `"yellow"`  | Warning, pending, in progress |
+| `"blue"`    | Informational                 |
+| `"grey"`    | Neutral, inactive, draft      |
+| `"primary"` | Theme primary color           |
+| `"black"`   | Default, no semantic meaning  |
+
+## Usage
+
+```tsx
+import { Pill } from "@lifesg/react-design-system/pill";
+
+<Pill type="outline" colorType="green">
+    Approved
+</Pill>;
+```
+
+## Props
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Props
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Props — `PillProps`
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Props — `PillProps`
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Props — `PillProps`
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Props — `PillProps`
+
+| Prop        | Type            | Default | Description                          |
+| ----------- | --------------- | ------- | ------------------------------------ |
+| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
+| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
+| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
+
+## Rules
+
+-   Use color semantically — do not use `"red"` for non-error states.
+-   Use `"solid"` sparingly — reserve for statuses that need emphasis.
+-   Keep label text to 1–2 words — text does not wrap inside a pill.
+-   Pill is a static, non-interactive label — it does not accept `onClick`. Use Tag with `interactive` for clickable labels.
+
+## Anti-patterns
+
+-   Using Pill for categories or filters — use Tag instead.
+-   Using `"red"` for non-error states.
+-   Labels longer than 2–3 words — text overflow is not handled.
diff --git a/skills/fds-build/resources/v4/components/popover.md b/skills/fds-build/resources/v4/components/popover.md
new file mode 100644
index 0000000000..cc1df61a0e
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/popover.md
@@ -0,0 +1,295 @@
+# Popover
+
+Import: `import { Popover, withPopover } from "@lifesg/react-design-system/popover"`
+
+## When to use
+
+Use to show supplementary information when a user interacts with (clicks or hovers over) an element. On mobile, the popover renders as a bottom modal sheet.
+
+## Variants
+
+Two usage patterns are available:
+
+-   **`withPopover` HOC** — wraps an existing element to add popover behaviour.
+-   **`Popover` component** — a standalone popover that you control manually.
+
+## Usage
+
+```tsx
+import { withPopover } from "@lifesg/react-design-system/popover";
+import { Button } from "@lifesg/react-design-system/button";
+
+{
+    /* Preferred: HOC wraps an existing element */
+}
+{
+    withPopover(
+        <Button.Default styleType="link">What is this?</Button.Default>,
+        { content: "This field requires your NRIC number.", trigger: "click" }
+    );
+}
+```
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Props — `PopoverProps`
+
+| Prop            | Type                    | Default            | Description                                                                                                         |
+| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
+| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
+| `id`            | `string`                | —                  | —                                                                                                                   |
+| `className`     | `string`                | —                  | —                                                                                                                   |
+| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
+| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
+| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
+| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
+
+## Props — `PopoverRenderProps`
+
+| Prop        | Type                  | Default | Description                                            |
+| ----------- | --------------------- | ------- | ------------------------------------------------------ |
+| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
+| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
+
+## Props — `PopoverTriggerProps`
+
+| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
+| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
+| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
+| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
+| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
+| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
+| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
+| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
+| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
+| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
+| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
+| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
+| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
+| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
+| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
+| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
+
+## Rules
+
+-   Use `withPopover` for most cases — it handles trigger logic automatically.
+-   Use the `Popover` component directly when you need full manual control over visibility.
+-   On mobile viewports the Popover renders as a bottom modal sheet — provide `onMobileClose` to handle dismissal.
diff --git a/skills/fds-build/resources/v4/components/progress-indicator.md b/skills/fds-build/resources/v4/components/progress-indicator.md
new file mode 100644
index 0000000000..96aa9ae66e
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/progress-indicator.md
@@ -0,0 +1,97 @@
+# ProgressIndicator
+
+Import: `import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator"`
+
+## When to use
+
+Use in multi-step forms or wizards to show the user's position within the flow.
+
+## Usage
+
+```tsx
+import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
+
+const steps = [
+    { label: "Personal details" },
+    { label: "Documents" },
+    { label: "Review" },
+];
+
+<ProgressIndicator
+    steps={steps}
+    currentIndex={1}
+    displayExtractor={(step) => step.label}
+/>;
+```
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Props
+
+| Prop               | Type                    | Default | Description                                                                                              |
+| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
+| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
+| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
+| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
+| `className`        | `string`                | —       | —                                                                                                        |
+| `id`               | `string`                | —       | —                                                                                                        |
+
+## Rules
+
+-   `currentIndex` is zero-based — the first step is `0`.
+-   Always provide `displayExtractor` when `steps` contains objects — without it, step labels will not render.
+-   Update `currentIndex` as the user moves between steps.
+-   Do not use `fadeColor` or `fadePosition` — these props are deprecated and have no effect in v3.
+
+## Anti-patterns
+
+-   Do not use ProgressIndicator on single-step pages.
+-   Do not use it as a general progress bar for loading states — use a loading spinner or skeleton instead.
diff --git a/skills/fds-build/resources/v4/components/radio-button.md b/skills/fds-build/resources/v4/components/radio-button.md
new file mode 100644
index 0000000000..2d99b432b5
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/radio-button.md
@@ -0,0 +1,111 @@
+# RadioButton
+
+Import: `import { RadioButton } from "@lifesg/react-design-system/radio-button"`
+
+## When to use
+
+-   User must choose exactly one option from a small set (typically 2–5 options).
+-   Options are mutually exclusive.
+
+Prefer `Toggle` with `type="radio"` over bare `RadioButton` when building form inputs that need a visible card-style label container.
+
+## Variants
+
+| `displaySize` | When to use                    |
+| ------------- | ------------------------------ |
+| `"default"`   | Standard use                   |
+| `"small"`     | Dense layouts, inline controls |
+
+## Usage
+
+```tsx
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+<div role="radiogroup" aria-labelledby="group-label">
+    <label>
+        <RadioButton
+            name="plan"
+            value="basic"
+            checked={selected === "basic"}
+            onChange={(e) => {}}
+        />
+        Basic
+    </label>
+    <label>
+        <RadioButton
+            name="plan"
+            value="pro"
+            checked={selected === "pro"}
+            onChange={(e) => {}}
+        />
+        Pro
+    </label>
+</div>;
+```
+
+## Props
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Props
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Props — `RadioButtonProps`
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Props — `RadioButtonProps`
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Props — `RadioButtonProps`
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Props — `RadioButtonProps`
+
+| Prop                    | Type              | Default   | Description                                                                                                             |
+| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
+| `disabled`              | `boolean`         | —         | —                                                                                                                       |
+| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
+| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
+
+## Rules
+
+-   Always wrap a group in `role="radiogroup"` with a visible group label (`aria-labelledby`).
+-   Always set the same `name` on all buttons in a group for native radio behaviour.
+-   Always pair each button with a visible label — wrap in `<label>` or use `aria-label`.
+-   Never render a single `RadioButton` in isolation — radio inputs only make sense in groups.
+
+## Anti-patterns
+
+-   Do not use `RadioButton` for binary yes/no questions in forms — use `Toggle` with `type="yes"` / `type="no"`.
+-   Do not use `RadioButton` when multiple selections are allowed — use `Checkbox` instead.
+-   Do not omit the `name` prop — without it, browsers cannot enforce mutual exclusivity natively.
diff --git a/skills/fds-build/resources/v4/components/schedule.md b/skills/fds-build/resources/v4/components/schedule.md
new file mode 100644
index 0000000000..a780729625
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/schedule.md
@@ -0,0 +1,429 @@
+# Schedule
+
+Import: `import { Schedule } from "@lifesg/react-design-system/schedule"`
+
+## Sub-components
+
+-   `ScheduleEntityProps` — a service/resource row with its time slots
+-   `ScheduleSlotProps` — a single bookable timeslot cell
+-   `SchedulePopoverProps` — popover config for a slot
+
+## ScheduleEntityProps
+
+| Prop       | Type                  | Description                          |
+| ---------- | --------------------- | ------------------------------------ |
+| `name` \*  | `string`              | The name of the service or resource  |
+| `slots` \* | `ScheduleSlotProps[]` | Array of time slots for this service |
+| `id`       | `string`              | Identifier for the service entity    |
+
+## ScheduleSlotProps
+
+| Prop            | Type                                                     | Description                                                 |
+| --------------- | -------------------------------------------------------- | ----------------------------------------------------------- |
+| `startTime` \*  | `string`                                                 | Start time (`HH:mm`)                                        |
+| `endTime` \*    | `string`                                                 | End time (`HH:mm`)                                          |
+| `status` \*     | `"booked" \| "available" \| "blocked" \| "pending"`      | Determines slot visual style                                |
+| `date` \*       | `string`                                                 | Date for this timeslot (`YYYY-MM-DD`)                       |
+| `id`            | `string`                                                 | Identifier; passed to `onClick` and `onSlotClick` callbacks |
+| `capacity`      | `number`                                                 | Maximum capacity for this timeslot                          |
+| `booked`        | `number`                                                 | Number of current bookings                                  |
+| `customPopover` | `SchedulePopoverProps`                                   | Popover config for the slot                                 |
+| `onClick`       | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | Per-slot click callback                                     |
+
+## SchedulePopoverProps
+
+| Prop         | Type                                               | Default | Description                                        |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------- |
+| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover              |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered in the popover                    |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Hover delay in milliseconds (`hover` trigger only) |
+| `offset`     | `number`                                           | —       | Offset in px applied to the popover                |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Props — `ScheduleEntityProps`
+
+| Prop       | Type                  | Default | Description                                                |
+| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*    | `string`              | —       | Unique identifier.                                         |
+| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
+| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
+
+## Props — `SchedulePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                  |
+| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
+| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
+| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
+
+## Props — `ScheduleProps`
+
+| Prop                      | Type                                                          | Default | Description                                                                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                      | —       | —                                                                                                                          |
+| `className`               | `string`                                                      | —       | —                                                                                                                          |
+| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
+| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
+| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
+| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
+| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
+| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
+| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
+| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
+| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
+| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
+| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
+| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
+| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
+| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
+| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
+| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
+| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
+| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
+
+## Props — `ScheduleSlotProps`
+
+| Prop            | Type                                                          | Default | Description                                                |
+| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
+| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
+| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
+| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
+| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
+| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
+| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
+| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
+| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
+| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
+
+## Props — `ScheduleEmptySlotProps`
+
+| Prop           | Type     | Default | Description                                     |
+| -------------- | -------- | ------- | ----------------------------------------------- |
+| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
+| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
+| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
+
+## Rules
+
+-   `date`, `serviceData`, `onPreviousDayClick`, and `onNextDayClick` are mandatory.
+-   Avoid combining a per-slot `onClick` with `customPopover` using `trigger: "click"` on the same slot — they conflict.
diff --git a/skills/fds-build/resources/v4/components/sidenav.md b/skills/fds-build/resources/v4/components/sidenav.md
new file mode 100644
index 0000000000..dac2924a3f
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/sidenav.md
@@ -0,0 +1,438 @@
+# Sidenav
+
+Import: `import { Sidenav } from "@lifesg/react-design-system/sidenav"`
+
+## When to use
+
+Use for section-level navigation in admin dashboards or portals. The Sidenav sits fixed to the left and fills the full viewport height below the Navbar, which is always present at the top.
+
+Do not use for:
+
+-   Consumer-facing pages (use Navbar nav items or LocalNav instead)
+-   Simple single-section apps
+
+## Sub-components
+
+```
+Sidenav                          ← fixed sidebar container
+├── Sidenav.Group                ← logical section (optional separator)
+│   ├── Sidenav.Item             ← top-level nav link (no children)
+│   ├── Sidenav.DrawerItem       ← expandable item with sub-links
+│   │   ├── Sidenav.DrawerSubitem
+│   │   └── Sidenav.DrawerSubitem
+│   └── Sidenav.Item
+└── Sidenav.Group
+    └── Sidenav.Item
+```
+
+`Sidenav.Group` is the only valid direct child of `Sidenav`. Use `Sidenav.Item` for leaf links, `Sidenav.DrawerItem` when a nav entry has sub-items. `Sidenav.DrawerSubitem` can only nest inside `Sidenav.DrawerItem`.
+
+## Variants
+
+| Depth    | Components used                              |
+| -------- | -------------------------------------------- |
+| 1 level  | `Sidenav` → `Sidenav.Group` → `Sidenav.Item` |
+| 2 levels | + `Sidenav.DrawerItem`                       |
+| 3 levels | + `Sidenav.DrawerSubitem`                    |
+
+## Usage
+
+### 2-group, 3-item nav with full nesting
+
+```tsx
+import { CalendarIcon } from "@lifesg/react-icons/calendar";
+import { DocIcon } from "@lifesg/react-icons/doc";
+import { Square2x2Icon } from "@lifesg/react-icons/square-2x2";
+import { useState } from "react";
+import { Sidenav } from "@lifesg/react-design-system/sidenav";
+
+const AdminSidenav = () => {
+    const [selectedId, setSelectedId] = useState("dashboard");
+
+    return (
+        <Sidenav>
+            {/* Group 1 — top-level items with no sub-items: onClick fires */}
+            <Sidenav.Group separator>
+                <Sidenav.Item
+                    id="dashboard"
+                    title="Dashboard"
+                    icon={<Square2x2Icon />}
+                    selected={selectedId === "dashboard"}
+                    onClick={(id) => setSelectedId(id)}
+                />
+            </Sidenav.Group>
+
+            {/* Group 2 — Reports has sub-items so onClick is omitted;
+                clicking it opens the drawer instead */}
+            <Sidenav.Group>
+                <Sidenav.Item
+                    id="reports"
+                    title="Reports"
+                    icon={<DocIcon />}
+                    selected={
+                        selectedId === "monthly-reports" ||
+                        selectedId === "annual-reports"
+                    }
+                >
+                    {/* DrawerItem with no children: onClick fires */}
+                    <Sidenav.DrawerItem
+                        id="monthly-reports"
+                        title="Monthly reports"
+                        onClick={(id) => setSelectedId(id)}
+                    />
+                    {/* DrawerItem with children: onClick is omitted */}
+                    <Sidenav.DrawerItem
+                        id="annual-reports"
+                        title="Annual reports"
+                        selected={selectedId === "annual-reports"}
+                    >
+                        <Sidenav.DrawerSubitem
+                            id="annual-summary"
+                            title="Summary"
+                            onClick={(id) => setSelectedId(id)}
+                        />
+                        <Sidenav.DrawerSubitem
+                            id="annual-detail"
+                            title="Detailed breakdown"
+                            onClick={(id) => setSelectedId(id)}
+                        />
+                    </Sidenav.DrawerItem>
+                </Sidenav.Item>
+                <Sidenav.Item
+                    id="bookings"
+                    title="Bookings"
+                    icon={<CalendarIcon />}
+                    selected={selectedId === "bookings"}
+                    onClick={(id) => setSelectedId(id)}
+                />
+            </Sidenav.Group>
+        </Sidenav>
+    );
+};
+```
+
+Key wiring notes:
+
+-   `onClick` on `Sidenav.Item` is only attached when the item has **no** `children` — if children are present, clicking opens the drawer instead and `onClick` is ignored.
+-   The same rule applies to `Sidenav.DrawerItem`: omit `onClick` when it wraps `DrawerSubitem` children.
+-   Track `selectedId` in parent state; pass `selected={selectedId === id}` down to whichever level is active.
+-   `separator` on `Sidenav.Group` draws a dividing line below that group.
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Props — `SidenavProps`
+
+| Prop          | Type              | Default   | Description                                                               |
+| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
+| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
+| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
+| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
+| `id`          | `string`          | —         | —                                                                         |
+| `className`   | `string`          | —         | —                                                                         |
+
+## Props — `SidenavGroupProps`
+
+| Prop          | Type              | Default | Description                                                         |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
+| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
+| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
+| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
+| `id`          | `string`          | —       | —                                                                   |
+| `className`   | `string`          | —       | —                                                                   |
+
+## Props — `SidenavItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                              |
+| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
+| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
+| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
+| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
+| `id`        | `string`                 | —       | —                                                                                                                                                        |
+| `className` | `string`                 | —       | —                                                                                                                                                        |
+
+## Props — `SidenavDrawerItemProps`
+
+| Prop        | Type                     | Default | Description                                                                                                                                                               |
+| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
+| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
+| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
+| `id`        | `string`                 | —       | —                                                                                                                                                                         |
+| `className` | `string`                 | —       | —                                                                                                                                                                         |
+
+## Props — `SidenavDrawerSubitemProps`
+
+| Prop        | Type                     | Default | Description                            |
+| ----------- | ------------------------ | ------- | -------------------------------------- |
+| `title` \*  | `string`                 | —       | The displayed label.                   |
+| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
+| `id`        | `string`                 | —       | —                                      |
+| `className` | `string`                 | —       | —                                      |
+
+## Rules
+
+-   Always provide `icon` on `Sidenav.Item` — it is required for the collapsed state.
+-   Maximum depth is 3 levels: `Item` → `DrawerItem` → `DrawerSubitem`.
+-   Use `Sidenav.Group` with `separator` to visually separate unrelated sections.
+-   `onClick` on `Sidenav.Item` and `Sidenav.DrawerItem` only fires when the item has no children — do not attach click handlers to items that have sub-items.
+
+## Anti-patterns
+
+-   Do not omit `icon` on `Sidenav.Item` — the component is designed around icon + label.
+-   Do not nest deeper than 3 levels.
+-   Do not use `Sidenav` on consumer-facing pages — it is suited to admin portals.
diff --git a/skills/fds-build/resources/v4/components/singpass-button.md b/skills/fds-build/resources/v4/components/singpass-button.md
new file mode 100644
index 0000000000..595ee34ca6
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/singpass-button.md
@@ -0,0 +1,49 @@
+# SingpassButton
+
+Import: `import { SingpassButton } from "@lifesg/react-design-system/singpass-button"`
+
+## Props
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Props
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Props — `SingpassButtonProps`
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Props — `SingpassButtonProps`
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Props — `SingpassButtonProps`
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Props — `SingpassButtonProps`
+
+| Prop        | Type                      | Default        | Description                                                             |
+| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
+| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
+| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
+
+## Rules
+
+-   Do not custom style — Singpass branding guidelines require using the component as-is.
diff --git a/skills/fds-build/resources/v4/components/smart-app-banner.md b/skills/fds-build/resources/v4/components/smart-app-banner.md
new file mode 100644
index 0000000000..b8e82add92
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/smart-app-banner.md
@@ -0,0 +1,163 @@
+# SmartAppBanner
+
+Import: `import { SmartAppBanner } from "@lifesg/react-design-system/smart-app-banner"`
+
+## SmartAppBannerContentProps
+
+| Prop                 | Type     | Default | Description                                                                    |
+| -------------------- | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*           | `string` | —       | Display title                                                                  |
+| `buttonLabel` \*     | `string` | —       | Button text                                                                    |
+| `buttonAriaLabel` \* | `string` | —       | Aria label for the button                                                      |
+| `numberOfStars` \*   | `number` | —       | Stars to display; decimals accepted; `NaN` or negative hides the stars display |
+| `message`            | `string` | —       | Description below the title                                                    |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
+
+## Props — `SmartAppBannerProps`
+
+| Prop           | Type                         | Default                                                                    | Description                                                                   |
+| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
+| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
+| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
+| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
+| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
+| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
+| `className`    | `string`                     | —                                                                          | —                                                                             |
+| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
+| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
+
+## Props — `SmartAppBannerContentProps`
+
+| Prop               | Type     | Default | Description                                                                    |
+| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
+| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
+| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
+| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
+| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
+| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
+| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
diff --git a/skills/fds-build/resources/v4/components/tab.md b/skills/fds-build/resources/v4/components/tab.md
new file mode 100644
index 0000000000..aa46519696
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/tab.md
@@ -0,0 +1,228 @@
+# Tab
+
+Import: `import { Tab } from "@lifesg/react-design-system/tab"`
+
+## When to use
+
+Use to switch between related views within the same context — not for navigating between pages.
+
+## Sub-components
+
+```
+Tab                          ← tab strip container, manages active state
+├── Tab.Item                 ← individual tab (title + panel content)
+├── Tab.Item
+└── Tab.Item
+```
+
+All direct children of `Tab` must be `Tab.Item`. `Tab.Item` renders both the tab label and its associated panel content.
+
+## Variants
+
+| Mode                         | When to use                                |
+| ---------------------------- | ------------------------------------------ |
+| Uncontrolled (default)       | Tab manages its own active state           |
+| Controlled (`currentActive`) | Parent needs to control which tab is shown |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Props — `TabProps`
+
+| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
+| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
+| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
+| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
+| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
+| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabItemProps`
+
+| Prop          | Type                           | Default | Description                                                                         |
+| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
+| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
+| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `className`   | `string`                       | —       | —                                                                                   |
+| `id`          | `string`                       | —       | —                                                                                   |
+| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TitleAddonProps`
+
+| Prop         | Type                | Default | Description                                       |
+| ------------ | ------------------- | ------- | ------------------------------------------------- |
+| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
+| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+
+## Rules
+
+-   When `currentActive` is set, the component is in controlled mode — you must update it via `onTabClick`.
+-   Tab order is determined by the order of `Tab.Item` children.
+-   Keep tab labels short — labels truncate beyond 20 characters on tablet and mobile.
+-   Use controlled mode (`currentActive` + `onTabClick`) only when the parent needs to sync tab state with external logic (e.g. URL params, deep links).
+-   Use `titleAddon` with a `Badge` to show counts or status indicators on tab labels.
+-   Set `headingLevel` to match the component's position in the page heading hierarchy.
+-   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
+
+## Anti-patterns
+
+-   Do not use tabs for page-level navigation — use Navbar or LocalNav instead.
+-   Do not use more than 5–6 tabs — consider a different navigation pattern for many sections.
+-   Do not use long labels — they truncate on mobile and tablet.
+-   Do not set `currentActive` without also providing `onTabClick` — the tab state will be stuck.
diff --git a/skills/fds-build/resources/v4/components/table.md b/skills/fds-build/resources/v4/components/table.md
new file mode 100644
index 0000000000..9c6726931f
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/table.md
@@ -0,0 +1,65 @@
+# Table
+
+Import: `import { Table } from "@lifesg/react-design-system/table"`
+
+## When to use
+
+-   Displaying read-only structured data with no sorting, selection, or pagination needed.
+-   Use `DataTable` instead when you need sortable columns, row selection, or pagination controls.
+
+## Composition
+
+`Table` is a thin styled wrapper over semantic HTML table elements:
+
+| Sub-component      | Renders as             |
+| ------------------ | ---------------------- |
+| `Table.Container`  | `<div>` scroll wrapper |
+| `Table`            | `<table>`              |
+| `Table.Head`       | `<thead>`              |
+| `Table.Body`       | `<tbody>`              |
+| `Table.Row`        | `<tr>`                 |
+| `Table.HeaderCell` | `<th>`                 |
+| `Table.Cell`       | `<td>`                 |
+
+Always wrap with `Table.Container` so the table scrolls horizontally on narrow viewports.
+
+## Usage
+
+```tsx
+import { Table } from "@lifesg/react-design-system/table";
+import { Typography } from "@lifesg/react-design-system/typography";
+
+const ServiceTable = () => (
+    <Table.Container>
+        <Table>
+            <Table.Head>
+                <Table.Row>
+                    <Table.HeaderCell>Service</Table.HeaderCell>
+                    <Table.HeaderCell>Status</Table.HeaderCell>
+                    <Table.HeaderCell>Last updated</Table.HeaderCell>
+                </Table.Row>
+            </Table.Head>
+            <Table.Body>
+                <Table.Row>
+                    <Table.Cell>MyService</Table.Cell>
+                    <Table.Cell>Active</Table.Cell>
+                    <Table.Cell>1 Jan 2024</Table.Cell>
+                </Table.Row>
+            </Table.Body>
+        </Table>
+    </Table.Container>
+);
+```
+
+## Rules
+
+-   Always wrap in `Table.Container` — it provides horizontal scroll on small viewports.
+-   Use `Table.HeaderCell` (`<th>`) for column headers, not `Table.Cell`.
+-   Use `DataTable` for sortable, selectable, or paginated tables — `Table` is read-only only.
+-   All props pass through to the underlying HTML element — use `style` or `className` for custom layout only when DS tokens don't cover the need.
+
+## Anti-patterns
+
+-   Do not use `Table` when rows need to be selected or sorted — use `DataTable`.
+-   Do not nest tables.
+-   Do not omit `Table.Container` — the table will overflow on mobile without it.
diff --git a/skills/fds-build/resources/v4/components/tag.md b/skills/fds-build/resources/v4/components/tag.md
new file mode 100644
index 0000000000..875fb409c5
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/tag.md
@@ -0,0 +1,118 @@
+# Tag
+
+Import: `import { Tag } from "@lifesg/react-design-system/tag"`
+
+## When to use
+
+Use to label categories, apply filters, or tag items. Can be static or interactive — set `interactive` to render as a button for toggleable filters or selectable categories. For status labels, use Pill instead.
+
+## Variants
+
+| `type`      | Usage                                                 |
+| ----------- | ----------------------------------------------------- |
+| `"outline"` | Subtle, secondary label — default for most uses       |
+| `"solid"`   | Higher emphasis — use when the tag needs to stand out |
+
+| `colorType` | Semantic use                  |
+| ----------- | ----------------------------- |
+| `"green"`   | Success, active, approved     |
+| `"red"`     | Error, rejected, danger       |
+| `"yellow"`  | Warning, pending, in progress |
+| `"blue"`    | Informational                 |
+| `"grey"`    | Neutral, inactive, draft      |
+| `"primary"` | Theme primary color           |
+| `"black"`   | Default, no semantic meaning  |
+
+## Usage
+
+```tsx
+import { Tag } from "@lifesg/react-design-system/tag";
+
+{
+    /* Static category tag */
+}
+<Tag type="outline" colorType="blue">
+    Health
+</Tag>;
+
+{
+    /* Interactive filter tag */
+}
+<Tag type="solid" colorType="primary" interactive onClick={() => {}}>
+    Finance
+</Tag>;
+```
+
+## Props
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Props
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Props — `TagProps`
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Props — `TagProps`
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Props — `TagProps`
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Props — `TagProps`
+
+| Prop           | Type                | Default | Description                                                                                                                                          |
+| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
+| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
+| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
+| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
+| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
+
+## Rules
+
+-   When `interactive` is `true`, the component renders as a `<button>` with an extended touch target on mobile.
+-   Always pair `interactive` with `onClick` — interactive tags are larger on mobile to extend the touch target.
+-   Use color semantically — do not use `"red"` for non-error states.
+-   Keep label text short — text does not wrap inside a tag.
+-   Use Tag for categories, filters, and tagging — use Pill for statuses.
+
+## Anti-patterns
+
+-   Using Tag for status labels — use Pill instead.
+-   Setting `interactive` without providing an `onClick` handler.
+-   Using `"red"` for non-error states.
diff --git a/skills/fds-build/resources/v4/components/text-list.md b/skills/fds-build/resources/v4/components/text-list.md
new file mode 100644
index 0000000000..6b13b0f169
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/text-list.md
@@ -0,0 +1,169 @@
+# TextList
+
+Import: `import { TextList } from "@lifesg/react-design-system/text-list"`
+
+## When to use
+
+Use for semantic list content. For navigation links, use `LinkList` instead.
+
+## Sub-components
+
+| Sub-component | Renders | When to use                                  |
+| ------------- | ------- | -------------------------------------------- |
+| `TextList.Ul` | `<ul>`  | Unordered list — items without a sequence    |
+| `TextList.Ol` | `<ol>`  | Ordered list — numbered or lettered sequence |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Props — `OrderedListProps`
+
+| Prop               | Type                           | Default   | Description                                                             |
+| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
+| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
+| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
+| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
+| `start`            | `number`                       | —         | The value to start the list count from.                                 |
+| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
+| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
+| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
+| `id`               | `string`                       | —         | —                                                                       |
+| `className`        | `string`                       | —         | —                                                                       |
+
+## Props — `UnorderedListProps`
+
+| Prop           | Type                             | Default | Description                                                                                                                                                      |
+| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
+| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
+| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
+| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
+| `id`           | `string`                         | —       | —                                                                                                                                                                |
+| `className`    | `string`                         | —       | —                                                                                                                                                                |
+
+## Rules
+
+-   Children must be `<li>` elements.
+-   Use `bulletType` as a `ReactNode` to render a custom icon bullet — the icon is automatically marked `aria-hidden`.
diff --git a/skills/fds-build/resources/v4/components/time-slot-bar-week.md b/skills/fds-build/resources/v4/components/time-slot-bar-week.md
new file mode 100644
index 0000000000..92ebaf1c1d
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/time-slot-bar-week.md
@@ -0,0 +1,191 @@
+# TimeSlotBarWeek
+
+Import: `import { TimeSlotBarWeek } from "@lifesg/react-design-system/time-slot-bar-week"`
+
+## Sub-components
+
+-   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
+-   `TimeSlot` — shape of each slot in the `slots` map
+-   `TimeSlotBarStyleAttributes` — visual styling for a slot
+
+## YearMonthWeekDisplay
+
+| Prop    | Type                                                | Description                                            |
+| ------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
+| `year`  | `number`                                            | Visible year                                           |
+| `month` | `number`                                            | Visible month (1–12)                                   |
+
+## TimeSlot
+
+| Prop              | Type                         | Description                        |
+| ----------------- | ---------------------------- | ---------------------------------- |
+| `id` \*           | `string`                     | Unique identifier of the slot      |
+| `startTime` \*    | `string`                     | Start time (`HH:mm`)               |
+| `endTime` \*      | `string`                     | End time (`HH:mm`)                 |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                     |
+| `label`           | `string`                     | Text content within the slot cell  |
+| `clickable`       | `boolean`                    | Whether the slot cell is clickable |
+
+## TimeSlotBarStyleAttributes
+
+| Prop                 | Type                     | Default     | Description                                       |
+| -------------------- | ------------------------ | ----------- | ------------------------------------------------- |
+| `backgroundColor` \* | `string`                 | —           | The color of the slot                             |
+| `styleType`          | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
+| `backgroundColor2`   | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
+
+## Props
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `TimeSlotBarWeekProps`
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `TimeSlotBarWeekProps`
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `TimeSlotBarWeekProps`
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `TimeSlotBarWeekProps`
+
+| Prop                      | Type                                           | Default    | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —          | —                                                                                                     |
+| `id`                      | `string`                                       | —          | —                                                                                                     |
+| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
+| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
+| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
+| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
+| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
+| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
+| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
+| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
+| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
+| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
+
+## Rules
+
+-   `slots` is mandatory.
+-   `startTime`/`endTime` on the component must be full hours (e.g. `"08:00"`, `"13:00"`).
diff --git a/skills/fds-build/resources/v4/components/time-slot-bar.md b/skills/fds-build/resources/v4/components/time-slot-bar.md
new file mode 100644
index 0000000000..75b26b7924
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/time-slot-bar.md
@@ -0,0 +1,222 @@
+# TimeSlotBar
+
+Import: `import { TimeSlotBar } from "@lifesg/react-design-system/time-slot-bar"`
+
+## TimeSlot
+
+| Prop              | Type                         | Default | Description                                |
+| ----------------- | ---------------------------- | ------- | ------------------------------------------ |
+| `id` \*           | `string`                     | —       | Unique identifier of the slot              |
+| `startTime` \*    | `string`                     | —       | Slot start time in `HH:mm` (15-min blocks) |
+| `endTime` \*      | `string`                     | —       | Slot end time in `HH:mm` (15-min blocks)   |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | —       | Styling for this slot                      |
+| `label`           | `string`                     | —       | Text content within the slot cell          |
+| `clickable`       | `boolean`                    | —       | Whether the slot cell is clickable         |
+
+## TimeSlotBarStyleAttributes
+
+| Prop                    | Type                     | Default     | Description                                                            |
+| ----------------------- | ------------------------ | ----------- | ---------------------------------------------------------------------- |
+| `backgroundColor` \*    | `string`                 | —           | Slot color                                                             |
+| `styleType`             | `"default" \| "stripes"` | `"default"` | Style type of the slot                                                 |
+| `backgroundColor2`      | `string`                 | —           | Secondary color; used with `styleType="stripes"`                       |
+| `hoverBackgroundColor`  | `string`                 | —           | Background on hover; only when `clickable`                             |
+| `hoverBackgroundColor2` | `string`                 | —           | Secondary hover color for `styleType="stripes"`; only when `clickable` |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
+
+## Props — `TimeSlotBarRef`
+
+| Prop             | Type         | Default | Description                                                                                     |
+| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
+
+## Props — `TimeSlotBarProps`
+
+| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
+| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
+| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
+| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
+| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
+| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
+| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
+| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
+| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
+| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
+| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
+
+## Props — `TimeSlot`
+
+| Prop                 | Type                         | Default | Description                                                                                                      |
+| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
+| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
+| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
+| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
+| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
+| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
+| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
+| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
diff --git a/skills/fds-build/resources/v4/components/time-slot-week-view.md b/skills/fds-build/resources/v4/components/time-slot-week-view.md
new file mode 100644
index 0000000000..69f44f97fe
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/time-slot-week-view.md
@@ -0,0 +1,210 @@
+# TimeSlotWeekView
+
+Import: `import { TimeSlotWeekView } from "@lifesg/react-design-system/time-slot-week-view"`
+
+## Sub-components
+
+-   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
+-   `TimeSlot` — shape of each slot in the `slots` map
+-   `TimeSlotBarStyleAttributes` — visual styling for a slot
+
+## YearMonthWeekDisplay
+
+| Prop    | Type                                                | Description                                            |
+| ------- | --------------------------------------------------- | ------------------------------------------------------ |
+| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
+| `year`  | `number`                                            | Visible year                                           |
+| `month` | `number`                                            | Visible month (1–12)                                   |
+
+## TimeSlot
+
+| Prop              | Type                         | Description                                                       |
+| ----------------- | ---------------------------- | ----------------------------------------------------------------- |
+| `id` \*           | `string`                     | Unique identifier of the slot                                     |
+| `startTime` \*    | `string`                     | Start time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45) |
+| `endTime` \*      | `string`                     | End time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45)   |
+| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                                                    |
+| `label`           | `string`                     | Text content within the slot cell                                 |
+| `clickable`       | `boolean`                    | Whether the slot cell is clickable                                |
+
+## TimeSlotBarStyleAttributes
+
+| Prop             | Type                     | Default     | Description                                       |
+| ---------------- | ------------------------ | ----------- | ------------------------------------------------- |
+| `color` \*       | `string`                 | —           | The color of the slot                             |
+| `styleType`      | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
+| `secondaryColor` | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Props — `TimeSlotWeekViewProps`
+
+| Prop                      | Type                                           | Default | Description                                                                                           |
+| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `className`               | `string`                                       | —       | —                                                                                                     |
+| `id`                      | `string`                                       | —       | —                                                                                                     |
+| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
+| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
+| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
+| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
+| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
+| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
+| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
+| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
+| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
+| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
+| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
+| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
+
+## Props — `YearMonthWeekDisplay`
+
+| Prop       | Type                                                | Default | Description                                                               |
+| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
+| `year` \*  | `number`                                            | —       | —                                                                         |
+| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
+
+## Rules
+
+-   `slots` is mandatory.
+-   `TimeSlot` minutes must be in 15-minute blocks (00, 15, 30, 45).
+-   `TimeSlotBarStyleAttributes` uses `color`/`secondaryColor` — not `backgroundColor`/`backgroundColor2` as in `TimeSlotBarWeek`.
diff --git a/skills/fds-build/resources/v4/components/timeline.md b/skills/fds-build/resources/v4/components/timeline.md
new file mode 100644
index 0000000000..824f16599f
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/timeline.md
@@ -0,0 +1,184 @@
+# Timeline
+
+Import: `import { Timeline } from "@lifesg/react-design-system/timeline"`
+
+## When to use
+
+Use to communicate a process, application history, or sequence of steps. Use the `numeric` variant for numbered step-by-step instructions.
+
+## Sub-components
+
+### TimelineItemProps
+
+| Prop       | Type                                                                                                         | Default | Description                                            |
+| ---------- | ------------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------ |
+| `title`    | `string`                                                                                                     | —       | Item title — required                                  |
+| `content`  | `JSX.Element`                                                                                                | —       | Item content — required                                |
+| `variant`  | `"completed" \| "current" \| "upcoming-active" \| "upcoming-inactive" \| "numeric" \| "error" \| "disabled"` | —       | Visual state of the item indicator                     |
+| `statuses` | `PillProps[]`                                                                                                | —       | Status pills shown alongside the item (max 2 rendered) |
+
+## Variants
+
+| `variant`             | Usage                                |
+| --------------------- | ------------------------------------ |
+| `"completed"`         | Step or event is done                |
+| `"current"`           | Step currently in progress           |
+| `"upcoming-active"`   | Next actionable step                 |
+| `"upcoming-inactive"` | Future step, not yet actionable      |
+| `"error"`             | Step has an error                    |
+| `"disabled"`          | Step is not available                |
+| `"numeric"`           | Numbered step — use for instructions |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Props — `TimelineItemProps`
+
+| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
+| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
+| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
+| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
+| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
+
+## Props — `TimelineProps`
+
+| Prop                         | Type                  | Default | Description                                                                                         |
+| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
+| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
+| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
+| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
+| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
+| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
+| `className`                  | `string`              | —       | —                                                                                                   |
+| `id`                         | `string`              | —       | —                                                                                                   |
+| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
+
+## Rules
+
+-   The first item defaults to `variant="current"` and subsequent items default to `variant="upcoming-active"` when `variant` is not specified.
+-   Only a maximum of 2 `statuses` pills will render per item regardless of how many are provided.
+-   `counterOffset` shifts the numeric counter: if `offset=2`, the first item shows `3`.
+-   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
+-   Use `counterOffset` when showing a partial sequence (e.g. steps 3–5 of a larger flow).
+-   Use `statuses` with `PillProps` — follow Pill color semantics (see `pill.md`).
+-   Use `"numeric"` variant consistently across all items in an instruction list — do not mix with status variants.
+
+## Anti-patterns
+
+-   Mixing `"numeric"` and status variants in the same timeline — choose one paradigm per use case.
+-   Providing more than 2 status pills per item — only 2 will render.
+-   Using Timeline for non-sequential content — use a list or table instead.
diff --git a/skills/fds-build/resources/v4/components/timetable.md b/skills/fds-build/resources/v4/components/timetable.md
new file mode 100644
index 0000000000..8537344ad9
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/timetable.md
@@ -0,0 +1,522 @@
+# Timetable
+
+Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
+
+## TimeTableRowData
+
+| Prop                    | Type                                                       | Default   | Description                                               |
+| ----------------------- | ---------------------------------------------------------- | --------- | --------------------------------------------------------- |
+| `name` \*               | `string`                                                   | —         | Row header name                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                   | —         | Array of row cells; sorted by start time automatically    |
+| `id`                    | `string`                                                   | —         | Row identifier; passed to `onRowNameClick`                |
+| `subtitle`              | `string \| JSX.Element`                                    | —         | Row header subtitle                                       |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                    | —         | Custom popover for the row header                         |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                    | —         | Custom popover for auto-filled blocked cells              |
+| `rowMinTime`            | `string`                                                   | `minTime` | Row start time; blocked cells are auto-filled before this |
+| `rowMaxTime`            | `string`                                                   | `maxTime` | Row end time; blocked cells are auto-filled after this    |
+| `onRowNameClick`        | `(rowData: TimeTableRowData, e: React.MouseEvent) => void` | —         | Called when the row header name is clicked                |
+
+## TimeTableRowCellData
+
+| Prop                  | Type                                                            | Default | Description                                                        |
+| --------------------- | --------------------------------------------------------------- | ------- | ------------------------------------------------------------------ |
+| `startTime` \*        | `string`                                                        | —       | Cell start time in `HH:mm` (duration must be a multiple of 15 min) |
+| `endTime` \*          | `string`                                                        | —       | Cell end time in `HH:mm` (duration must be a multiple of 15 min)   |
+| `id`                  | `string`                                                        | —       | Cell identifier; passed to `onClick`                               |
+| `status`              | `"filled" \| "blocked" \| "default" \| "pending" \| "disabled"` | —       | Cell status, determines rendering style                            |
+| `title`               | `string`                                                        | —       | Title shown for this cell                                          |
+| `subtitle`            | `string`                                                        | —       | Subtitle shown for this cell                                       |
+| `customPopover`       | `TimeTablePopoverProps`                                         | —       | Custom popover for the cell                                        |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                  | —       | Custom style attributes; falls back to default row bar colors      |
+| `onClick`             | `(data: TimeTableRowCellData, e: React.MouseEvent) => void`     | —       | Called when the cell is clicked                                    |
+
+## TimeTablePopoverProps
+
+| Prop         | Type                                               | Default | Description                            |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------- |
+| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover  |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Popover content                        |
+| `delay`      | `{ open: number, close: number }`                  | —       | Hover delay in ms (hover trigger only) |
+| `offset`     | `number`                                           | —       | Offset in px for the popover           |
+
+## TimeTableCellStyleAttributes
+
+| Prop                      | Type                                           | Description                                                                      |
+| ------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------- |
+| `backgroundColor`         | `string \| (props: ThemeStyleProps) => string` | Main background color                                                            |
+| `altBackgroundColor`      | `string \| (props: ThemeStyleProps) => string` | Alternate background color for striped displays                                  |
+| `hoverBackgroundColor`    | `string \| (props: ThemeStyleProps) => string` | Background on hover                                                              |
+| `altHoverBackgroundColor` | `string \| (props: ThemeStyleProps) => string` | Alternate background on hover                                                    |
+| `styleType`               | `"default" \| "solid" \| "stripes"`            | Display style; defaults to cell type (blocked/pending = striped, others = solid) |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Props — `TimeTableCellStyleAttributes`
+
+| Prop                      | Type                     | Default   | Description                                                                |
+| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
+| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
+| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
+| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
+| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
+| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
+
+## Props — `TimeTableRef`
+
+| Prop             | Type         | Default | Description                                                                                   |
+| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
+| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
+
+## Props — `TimeTableRowData`
+
+| Prop                    | Type                                                            | Default | Description                                                                                                     |
+| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
+| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
+| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
+| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
+| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
+| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
+| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
+| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
+| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
+| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
+
+## Props — `TimeTablePopoverProps`
+
+| Prop         | Type                                               | Default | Description                                                                                                    |
+| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
+| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
+| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
+| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
+
+## Props — `TimeTableProps`
+
+| Prop                     | Type                              | Default | Description                                                                                                                             |
+| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                     | `string`                          | —       | —                                                                                                                                       |
+| `className`              | `string`                          | —       | —                                                                                                                                       |
+| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
+| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
+| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
+| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
+| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
+| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
+| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
+| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
+| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
+| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
+| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
+| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
+| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
+| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
+| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
+| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
+| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
+| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
+
+## Props — `TimeTableRowCellData`
+
+| Prop                  | Type                                                             | Default | Description                                             |
+| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
+| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
+| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
+| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
+| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
+| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
+| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
+| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
+| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
+| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
+
+## Rules
+
+-   Do not combine `onClick` on a cell with a `trigger="click"` popover on the same cell — they conflict.
diff --git a/skills/fds-build/resources/v4/components/toast.md b/skills/fds-build/resources/v4/components/toast.md
new file mode 100644
index 0000000000..6f264dd4b5
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/toast.md
@@ -0,0 +1,172 @@
+# Toast
+
+Import: `import { Toast } from "@lifesg/react-design-system/toast"`
+
+## When to use
+
+Use for brief, non-blocking feedback on system or user actions — "Changes saved", "Upload complete", "Request failed". Does not replace persistent callouts — use Alert for section-specific notices.
+
+## Sub-components
+
+### ActionButtonProps
+
+| Prop      | Type         | Default | Description                                         |
+| --------- | ------------ | ------- | --------------------------------------------------- |
+| `label`   | `string`     | —       | Label of the action button — required               |
+| `onClick` | `() => void` | —       | Called when the action button is clicked — required |
+
+## Variants
+
+| `type`      | When to use                   |
+| ----------- | ----------------------------- |
+| `"success"` | Action completed successfully |
+| `"error"`   | Action failed or system error |
+| `"warning"` | Completed with caution        |
+| `"info"`    | Neutral status update         |
+
+## Usage
+
+```tsx
+import { Toast } from "@lifesg/react-design-system/toast";
+
+<Toast
+    type="success"
+    label="Changes saved successfully."
+    autoDismiss
+    onDismiss={() => {}}
+/>;
+```
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Props — `ToastActionButtonProps`
+
+| Prop         | Type         | Default | Description                              |
+| ------------ | ------------ | ------- | ---------------------------------------- |
+| `label` \*   | `string`     | —       | The label of the action button           |
+| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
+
+## Props — `ToastProps`
+
+| Prop              | Type                        | Default   | Description                                                                                                                           |
+| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
+| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
+| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
+| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
+| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
+| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
+| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
+| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
+
+## Rules
+
+-   `autoDismissTime` only takes effect when `autoDismiss` is `true`.
+-   Use `autoDismiss` for non-critical updates — keep visible for errors that require user action.
+-   Use `actionButton` for recoverable errors (retry, undo).
+-   Use `title` + `label` together when the toast message has a heading and a description.
+-   Do not use Toast for persistent notices — use Alert or NotificationBanner instead.
+
+## Anti-patterns
+
+-   Using Toast for errors that require user action without providing an `actionButton`.
+-   Setting `autoDismiss` on error toasts — errors should remain visible until the user dismisses them.
+-   Replacing Alert with Toast for section-specific inline messages.
diff --git a/skills/fds-build/resources/v4/components/toggle.md b/skills/fds-build/resources/v4/components/toggle.md
new file mode 100644
index 0000000000..cd26b36c98
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/toggle.md
@@ -0,0 +1,288 @@
+# Toggle
+
+Import: `import { Toggle } from "@lifesg/react-design-system/toggle"`
+
+## When to use
+
+-   Form inputs for boolean choices, single/multi-option selection, and yes/no questions.
+-   Preferred over bare `Checkbox` and `RadioButton` when building form inputs that need a card-style visible label container.
+
+## Variants
+
+| `type`       | When to use                                                  |
+| ------------ | ------------------------------------------------------------ |
+| `"checkbox"` | Multiple options can be selected or deselected independently |
+| `"radio"`    | Exactly one option must be selected — cannot be deselected   |
+| `"yes"`      | Binary yes answer — use with a paired `type="no"` Toggle     |
+| `"no"`       | Binary no answer — use with a paired `type="yes"` Toggle     |
+
+| `styleType`   | When to use                                                  |
+| ------------- | ------------------------------------------------------------ |
+| `"default"`   | Standard bordered card                                       |
+| `"no-border"` | Borderless — for contexts where the border is visually noisy |
+
+| `type`       | Behaviour                            |
+| ------------ | ------------------------------------ |
+| `"checkbox"` | Allows deselection — standard toggle |
+| `"radio"`    | No deselection — radio-style         |
+| `"yes"`      | No deselection — tick indicator      |
+| `"no"`       | No deselection — cross indicator     |
+
+## Usage
+
+```tsx
+import { Toggle } from "@lifesg/react-design-system/toggle";
+import { Form } from "@lifesg/react-design-system/form";
+
+{/* Checkbox group */}
+<Form.Label>Select your preferences</Form.Label>
+<Toggle type="checkbox" indicator checked={emailChecked} onChange={(e) => {}}>
+  Email notifications
+</Toggle>
+<Toggle type="checkbox" indicator checked={smsChecked} onChange={(e) => {}}>
+  SMS notifications
+</Toggle>
+```
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## CompositeSectionProps
+
+| Prop              | Type                      | Default | Description                                                      |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------- |
+| `children`        | `string \| JSX.Element`   | —       | Contents of the subsection — **required**                        |
+| `collapsible`     | `boolean`                 | `true`  | Whether the subsection is collapsible                            |
+| `initialExpanded` | `boolean`                 | —       | Initial expanded state — only applies when `collapsible` is true |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown when the subsection is collapsed                    |
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Props — `ToggleProps`
+
+| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
+| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
+| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
+| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
+| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
+| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
+| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
+| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
+| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
+| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
+| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
+| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
+| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
+| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
+| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
+| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
+| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
+
+## Props — `ToggleCompositeSectionProps`
+
+| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
+| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
+| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
+| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
+| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
+
+## Rules
+
+-   `children` (main label) is mandatory.
+-   `indicator` is recommended when using `type="yes"` or `type="no"` to show the tick/cross icon.
+-   Always pass `indicator` for `type="checkbox"`, `type="radio"`, `type="yes"`, and `type="no"` — it shows the relevant icon (tick, dot, tick, cross) inside the toggle.
+-   Use `type="radio"` when the option cannot be deselected (e.g. single-select from a list).
+-   Use `compositeSection` to reveal dependent fields when a Toggle is selected — do not conditionally render fields outside the Toggle.
+-   Use `subLabel` for secondary supporting text — do not embed long descriptions in `children`.
+-   Use `childrenMaxLines` to constrain label height in dense list layouts.
+-   Place a `Form.Label` above each toggle group to provide the question or field label.
+
+### Spacing
+
+| Layout                    | Gap                                  |
+| ------------------------- | ------------------------------------ |
+| Stacked (checkbox, radio) | `spacing-8` between each Toggle      |
+| Side by side (yes / no)   | `spacing-16` between the two Toggles |
+
+```tsx
+{/* Stacked — checkbox or radio */}
+<Form.Label>Declaration</Form.Label>
+<ToggleWrapper> {/* margin-bottom: spacing-32 — matches Form field built-in */}
+  <Toggle indicator checked={a} onChange={...}>Option A</Toggle>
+  <div style={{ marginBottom: Spacing["spacing-8"] }} />
+  <Toggle indicator checked={b} onChange={...}>Option B</Toggle>
+</ToggleWrapper>
+
+{/* Side by side — yes / no */}
+<Form.Label>Do you have a disability?</Form.Label>
+<YesNoGroup> {/* display: flex; gap: spacing-16 */}
+  <Toggle type="yes" indicator checked={val === "yes"} onChange={...}>Yes</Toggle>
+  <Toggle type="no"  indicator checked={val === "no"}  onChange={...}>No</Toggle>
+</YesNoGroup>
+```
+
+## Anti-patterns
+
+-   Do not use bare `Checkbox` or `RadioButton` in forms when a labelled card container is needed — use `Toggle` instead.
+-   Do not conditionally render dependent fields outside the Toggle — use `compositeSection`.
+-   Do not use `type="yes"` or `type="no"` without pairing both options together in the UI.
+-   Do not omit `indicator` for any Toggle type — it is required for all variants.
diff --git a/skills/fds-build/resources/v4/components/typography.md b/skills/fds-build/resources/v4/components/typography.md
new file mode 100644
index 0000000000..e15951cda3
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/typography.md
@@ -0,0 +1,156 @@
+# Typography
+
+Import: `import { Typography } from "@lifesg/react-design-system/typography"`
+
+## When to use
+
+Use Typography components to render text content — headings, paragraphs, and links. Do not use for parent containers that have text children; use Font tokens instead (see `foundations/typography.md`).
+
+## Sub-components
+
+**Headings:** `Typography.HeadingXXL`, `Typography.HeadingXL`, `Typography.HeadingLG`, `Typography.HeadingMD`, `Typography.HeadingSM`, `Typography.HeadingXS`
+
+**Body:** `Typography.BodyBL`, `Typography.BodyMD`, `Typography.BodySM`, `Typography.BodyXS`
+
+**Links:** `Typography.LinkBL`, `Typography.LinkMD`, `Typography.LinkSM`, `Typography.LinkXS`
+
+## Variants
+
+| Component         | Default element | Usage                                  |
+| ----------------- | --------------- | -------------------------------------- |
+| `HeadingXXL`      | `h1`            | Hero/page-level title                  |
+| `HeadingXL`       | `h2`            | Page title or primary section heading  |
+| `HeadingLG`       | `h3`            | Section heading                        |
+| `HeadingMD`       | `h4`            | Subsection heading                     |
+| `HeadingSM`       | —               | Card heading, secondary heading        |
+| `HeadingXS`       | —               | Small heading                          |
+| `BodyBL`          | —               | Default paragraph text                 |
+| `BodyMD`          | —               | Medium body text                       |
+| `BodySM`          | —               | Helper text                            |
+| `BodyXS`          | —               | Metadata, timestamps                   |
+| `LinkBL/MD/SM/XS` | `<a>`           | Inline links, sized to match body text |
+
+## Usage
+
+```tsx
+import { Typography } from "@lifesg/react-design-system/typography";
+
+<>
+    <Typography.HeadingXL>Page title</Typography.HeadingXL>
+    <Typography.BodyBL paragraph>
+        Supporting body text for the section. Use{" "}
+        <Typography.LinkMD href="/learn-more">
+            link components
+        </Typography.LinkMD>{" "}
+        for inline anchors.
+    </Typography.BodyBL>
+</>;
+```
+
+## Props
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyProps`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `TypographyLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyProps`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `TypographyLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyProps`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Props — `TypographyLinkProps`
+
+| Prop             | Type                       | Default     | Description                                                                                                   |
+| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+
+## Props — `TypographyProps`
+
+| Prop        | Type               | Default   | Description                                                                                                         |
+| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
+| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
+| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
+| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
+| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
+
+## Rules
+
+-   Default HTML elements: `HeadingXXL` → `h1`, `HeadingXL` → `h2`, `HeadingLG` → `h3`, `HeadingMD` → `h4`.
+-   Text color is not set by the component — apply via `styled()` using Colour tokens.
+-   Do not pass `color` as a prop — `TypographyProps` extends `HTMLAttributes` and forwards the value to the DOM, triggering a React warning.
+-   Do not use Typography for parent containers — use Font tokens instead.
+-   Heading components render default HTML elements — use the `as` prop when visual size and reading order don't match.
+-   Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
+-   Apply text color via `styled()` using Colour tokens — never pass `color` as a prop.
+-   Use the `weight` prop to adjust emphasis, not opacity.
+-   Links are underlined by default — use `underlineStyle="none"` only when context makes the link obvious.
+-   Always use the `external` prop for links that navigate outside the domain.
+
+## Anti-patterns
+
+-   Passing `color` directly as a prop — it forwards a Colour object to the DOM and triggers a React warning.
+-   Skipping heading levels for visual sizing — use the `as` prop instead.
+-   Using `<h1>` raw HTML inside a Typography component instead of `as="h1"`.
+-   Using Typography on a container element to inherit font styles — use Font tokens.
diff --git a/skills/fds-build/resources/v4/components/uneditable-section.md b/skills/fds-build/resources/v4/components/uneditable-section.md
new file mode 100644
index 0000000000..e6f316e63d
--- /dev/null
+++ b/skills/fds-build/resources/v4/components/uneditable-section.md
@@ -0,0 +1,299 @@
+# UneditableSection
+
+Import: `import { UneditableSection } from "@lifesg/react-design-system/uneditable-section"`
+
+## When to use
+
+-   Displaying read-only label/value pairs on summary or review screens.
+-   Showing retrieved or pre-filled data the user cannot edit.
+
+## Sub-components
+
+-   `UneditableSection.ItemSection` — wraps a group of items (extends `HTMLUListElement`)
+-   `UneditableSection.Item` — individual label/value item
+
+## Usage
+
+```tsx
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+
+<UneditableSection
+    title="Personal details"
+    items={[
+        { label: "Full name", value: "Jane Tan", displayWidth: "half" },
+        { label: "Date of birth", value: "1 Jan 1990", displayWidth: "half" },
+        { label: "Address", value: "123 Example Road, Singapore 123456" },
+    ]}
+/>;
+```
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Props — `UneditableSectionItemProps`
+
+| Prop                | Type                                    | Default | Description                                                                                                                                         |
+| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                | `string`                                | —       | —                                                                                                                                                   |
+| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
+| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
+| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
+| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
+| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
+| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
+| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
+| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
+| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
+| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
+| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
+| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
+
+## Props — `UneditableSectionItemSectionProps`
+
+| Prop      | Type      | Default | Description                                                    |
+| --------- | --------- | ------- | -------------------------------------------------------------- |
+| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
+
+## Props — `UneditableSectionProps`
+
+| Prop            | Type                                           | Default | Description                                                                                      |
+| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
+| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
+| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
+| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
+| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
+| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
+| `className`     | `string`                                       | —       | —                                                                                                |
+| `id`            | `string`                                       | —       | —                                                                                                |
+| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
+| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
+| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
+| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
+| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
+| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
+
+## Rules
+
+-   Always supply `items` with a `label` and `value` for each field.
+-   Use `displayWidth: "half"` for short values (names, dates, codes) to show two per row; omit for long values.
+-   Show `"—"` for any unanswered or empty field rather than leaving `value` blank.
+-   Set `background={false}` when rendering inside a `BoxContainer` — the container already provides the visual boundary; the default background creates an unwanted nested box appearance.
+-   Set `fullWidth` when rendering inside a container such as `BoxContainer` to remove the default `Layout.Content` spacing and allow content to fill the full width.
+
+## Anti-patterns
+
+-   Do not use `UneditableSection` for editable fields — use `Form.*` components with `readOnly` instead.
+-   Do not nest `UneditableSection` inside another `UneditableSection`.
diff --git a/docs/skills/fds-build/resources/v4/foundations/layout-composition-patterns.md b/skills/fds-build/resources/v4/foundations/layout-composition-patterns.md
similarity index 100%
rename from docs/skills/fds-build/resources/v4/foundations/layout-composition-patterns.md
rename to skills/fds-build/resources/v4/foundations/layout-composition-patterns.md
diff --git a/docs/skills/fds-build/resources/v4/foundations/tokens.md b/skills/fds-build/resources/v4/foundations/tokens.md
similarity index 100%
rename from docs/skills/fds-build/resources/v4/foundations/tokens.md
rename to skills/fds-build/resources/v4/foundations/tokens.md
diff --git a/docs/skills/fds-build/resources/v4/patterns/states.md b/skills/fds-build/resources/v4/patterns/states.md
similarity index 100%
rename from docs/skills/fds-build/resources/v4/patterns/states.md
rename to skills/fds-build/resources/v4/patterns/states.md
diff --git a/docs/skills/fds-build/resources/v4/setup/setup.md b/skills/fds-build/resources/v4/setup/setup.md
similarity index 100%
rename from docs/skills/fds-build/resources/v4/setup/setup.md
rename to skills/fds-build/resources/v4/setup/setup.md
diff --git a/docs/skills/fds-build/resources/v4/templates/form.md b/skills/fds-build/resources/v4/templates/form.md
similarity index 100%
rename from docs/skills/fds-build/resources/v4/templates/form.md
rename to skills/fds-build/resources/v4/templates/form.md
diff --git a/docs/skills/fds-build/resources/v4/templates/listing.md b/skills/fds-build/resources/v4/templates/listing.md
similarity index 100%
rename from docs/skills/fds-build/resources/v4/templates/listing.md
rename to skills/fds-build/resources/v4/templates/listing.md
diff --git a/stories/getting-started/installation.mdx b/stories/getting-started/installation.mdx
index bf0a32077a..3d96601f0e 100644
--- a/stories/getting-started/installation.mdx
+++ b/stories/getting-started/installation.mdx
@@ -41,3 +41,13 @@ The following peer dependencies should be installed:
 ```
 
 <Installation />
+
+## AI agent skill
+
+Give your AI coding assistant (Claude Code, Cursor, GitHub Copilot, Codex, and others) accurate knowledge of FDS components, import patterns, and usage rules.
+
+```bash
+npx skills add lifesg/react-design-system
+```
+
+Re-run after upgrading `@lifesg/react-design-system` to keep the skill in sync.

From ebfddf6061c7038cdfa17db714d09e9b17fd432a Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Tue, 8 Sep 2026 17:22:18 +0800
Subject: [PATCH 04/15] [MISC][XY] Correct v4 resource files + consolidate prop
 extraction

---
 .npmignore                                    |   1 +
 scripts/generate-skill-props.ts               | 144 +---
 scripts/init-skills.js                        |  87 +--
 skills/fds-build/SKILL-v4.md                  |  16 +
 .../resources/v3/components/accordion.md      | 215 +-----
 .../resources/v3/components/alert.md          |  60 --
 .../resources/v3/components/animation.md      |  45 --
 .../resources/v3/components/avatar.md         |  35 -
 .../resources/v3/components/badge.md          |  50 --
 .../resources/v3/components/box-container.md  | 115 ---
 .../resources/v3/components/breadcrumb.md     |  90 ---
 .../resources/v3/components/button.md         |  60 --
 .../resources/v3/components/calendar.md       | 146 ----
 .../resources/v3/components/checkbox.md       |  45 --
 .../v3/components/countdown-timer.md          |  51 --
 .../resources/v3/components/data-table.md     | 167 ----
 .../resources/v3/components/date-navigator.md |  90 ---
 .../resources/v3/components/divider.md        |  80 --
 .../resources/v3/components/drawer.md         |  60 --
 .../resources/v3/components/error-display.md  | 190 -----
 .../v3/components/feedback-rating.md          |  65 --
 .../resources/v3/components/file-download.md  | 130 ----
 .../resources/v3/components/file-upload.md    | 294 -------
 .../resources/v3/components/filter.md         | 500 ------------
 .../resources/v3/components/footer.md         | 197 -----
 .../v3/components/form-date-input.md          | 170 ----
 .../v3/components/form-date-range-input.md    | 185 -----
 .../v3/components/form-e-signature.md         | 115 ---
 .../resources/v3/components/form-input.md     |  95 ---
 .../v3/components/form-masked-input.md        | 175 -----
 .../v3/components/form-multi-select.md        | 220 ------
 .../v3/components/form-nested-multi-select.md | 205 -----
 .../v3/components/form-nested-select.md       | 210 -----
 .../v3/components/form-otp-verification.md    |  72 --
 .../v3/components/form-phone-number-input.md  | 185 -----
 .../components/form-predictive-text-input.md  | 160 ----
 .../resources/v3/components/form-select.md    | 231 +-----
 .../resources/v3/components/form-slider.md    | 170 ----
 .../resources/v3/components/form-textarea.md  |  90 ---
 .../v3/components/form-time-range-picker.md   | 190 -----
 .../v3/components/form-timepicker.md          | 160 ----
 .../v3/components/form-unit-number-input.md   | 155 ----
 .../components/fullscreen-image-carousel.md   | 340 --------
 .../v3/components/histogram-slider.md         | 152 ----
 .../resources/v3/components/image-button.md   |  45 --
 .../resources/v3/components/input.md          |  77 --
 .../v3/components/language-switcher.md        |  40 -
 .../resources/v3/components/layout.md         | 235 ------
 .../resources/v3/components/link-list.md      | 162 +---
 .../resources/v3/components/local-nav.md      | 220 ------
 .../resources/v3/components/masthead.md       |  30 -
 .../fds-build/resources/v3/components/menu.md | 230 ------
 .../resources/v3/components/modal.md          | 110 ---
 .../resources/v3/components/navbar.md         | 726 ------------------
 .../v3/components/notification-banner.md      | 265 -------
 .../resources/v3/components/pagination.md     | 110 ---
 .../fds-build/resources/v3/components/pill.md |  40 -
 .../resources/v3/components/popover.md        | 215 ------
 .../v3/components/progress-indicator.md       |  50 --
 .../resources/v3/components/radio-button.md   |  45 --
 .../resources/v3/components/schedule.md       | 351 ---------
 .../resources/v3/components/sidenav.md        | 255 ------
 .../v3/components/singpass-button.md          |  35 -
 .../v3/components/smart-app-banner.md         | 135 ----
 .../fds-build/resources/v3/components/tab.md  | 187 +----
 .../fds-build/resources/v3/components/tag.md  |  50 --
 .../resources/v3/components/text-list.md      | 125 ---
 .../v3/components/time-slot-bar-week.md       | 125 ---
 .../resources/v3/components/time-slot-bar.md  | 165 ----
 .../v3/components/time-slot-week-view.md      | 140 ----
 .../resources/v3/components/timeline.md       | 115 ---
 .../resources/v3/components/timetable.md      | 399 ----------
 .../resources/v3/components/toast.md          | 100 ---
 .../resources/v3/components/toggle.md         | 169 ----
 .../resources/v3/components/typography.md     |  70 --
 .../v3/components/uneditable-section.md       | 215 ------
 .../resources/v4/components/accordion.md      | 215 +-----
 .../resources/v4/components/alert.md          |  60 --
 .../resources/v4/components/animation.md      |  45 --
 .../resources/v4/components/avatar.md         |  35 -
 .../resources/v4/components/badge.md          |  50 --
 .../resources/v4/components/box-container.md  | 115 ---
 .../resources/v4/components/breadcrumb.md     |  90 ---
 .../resources/v4/components/button.md         |  79 +-
 .../resources/v4/components/calendar.md       | 146 ----
 .../resources/v4/components/checkbox.md       |  45 --
 .../v4/components/countdown-timer.md          |  51 --
 .../resources/v4/components/data-table.md     | 167 ----
 .../resources/v4/components/date-navigator.md |  90 ---
 .../resources/v4/components/divider.md        |  80 --
 .../resources/v4/components/drawer.md         |  80 +-
 .../resources/v4/components/error-display.md  | 190 -----
 .../v4/components/feedback-rating.md          |  65 --
 .../resources/v4/components/file-download.md  | 130 ----
 .../resources/v4/components/file-upload.md    | 294 -------
 .../resources/v4/components/filter.md         | 500 ------------
 .../resources/v4/components/footer.md         | 197 -----
 .../v4/components/form-date-input.md          | 170 ----
 .../v4/components/form-date-range-input.md    | 185 -----
 .../v4/components/form-e-signature.md         | 115 ---
 .../resources/v4/components/form-input.md     |  95 ---
 .../v4/components/form-masked-input.md        | 175 -----
 .../v4/components/form-multi-select.md        | 220 ------
 .../v4/components/form-nested-multi-select.md | 205 -----
 .../v4/components/form-nested-select.md       | 210 -----
 .../v4/components/form-otp-verification.md    |  72 --
 .../v4/components/form-phone-number-input.md  | 185 -----
 .../components/form-predictive-text-input.md  | 160 ----
 .../resources/v4/components/form-select.md    | 231 +-----
 .../resources/v4/components/form-slider.md    | 170 ----
 .../resources/v4/components/form-textarea.md  |  90 ---
 .../v4/components/form-time-range-picker.md   | 190 -----
 .../v4/components/form-timepicker.md          | 160 ----
 .../v4/components/form-unit-number-input.md   | 155 ----
 .../components/fullscreen-image-carousel.md   | 340 --------
 .../v4/components/histogram-slider.md         | 152 ----
 .../fds-build/resources/v4/components/icon.md |   2 +-
 .../resources/v4/components/image-button.md   |  45 --
 .../resources/v4/components/input.md          |  77 --
 .../v4/components/language-switcher.md        |  40 -
 .../resources/v4/components/layout.md         | 235 ------
 .../resources/v4/components/link-list.md      | 162 +---
 .../resources/v4/components/local-nav.md      | 220 ------
 .../resources/v4/components/masthead.md       |  30 -
 .../fds-build/resources/v4/components/menu.md | 232 +-----
 .../resources/v4/components/modal.md          | 272 +++----
 .../resources/v4/components/navbar.md         | 726 ------------------
 .../v4/components/notification-banner.md      | 265 -------
 .../resources/v4/components/pagination.md     | 110 ---
 .../fds-build/resources/v4/components/pill.md |  40 -
 .../resources/v4/components/popover.md        | 223 +-----
 .../v4/components/progress-indicator.md       |  50 --
 .../resources/v4/components/radio-button.md   |  45 --
 .../resources/v4/components/schedule.md       | 351 ---------
 .../resources/v4/components/sidenav.md        | 255 ------
 .../v4/components/singpass-button.md          |  35 -
 .../v4/components/smart-app-banner.md         | 135 ----
 .../fds-build/resources/v4/components/tab.md  | 187 +----
 .../fds-build/resources/v4/components/tag.md  |  50 --
 .../resources/v4/components/text-list.md      | 125 ---
 .../v4/components/time-slot-bar-week.md       | 125 ---
 .../resources/v4/components/time-slot-bar.md  | 165 ----
 .../v4/components/time-slot-week-view.md      | 140 ----
 .../resources/v4/components/timeline.md       | 115 ---
 .../resources/v4/components/timetable.md      | 399 ----------
 .../resources/v4/components/toast.md          | 100 ---
 .../resources/v4/components/toggle.md         | 169 ----
 .../resources/v4/components/typography.md     |  70 --
 .../v4/components/uneditable-section.md       | 215 ------
 .../fds-build/resources/v4/patterns/states.md |  28 +-
 .../fds-build/resources/v4/templates/form.md  |  10 +-
 .../resources/v4/templates/listing.md         |   7 +-
 tools/shared/prop-extractor.ts                | 124 +++
 153 files changed, 406 insertions(+), 22626 deletions(-)
 create mode 100644 tools/shared/prop-extractor.ts

diff --git a/.npmignore b/.npmignore
index 66ebbb8bb4..9db7301658 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,6 +1,7 @@
 **/*
 !dist/**
 !skills/**
+!scripts/init-skills.js
 !CHANGELOG.md
 !package-lock.json
 !package.json
diff --git a/scripts/generate-skill-props.ts b/scripts/generate-skill-props.ts
index bf2729b7af..a1aab89d6b 100644
--- a/scripts/generate-skill-props.ts
+++ b/scripts/generate-skill-props.ts
@@ -19,12 +19,13 @@ import * as path from "node:path";
 
 import {
     InterfaceDeclaration,
-    Node,
     Project,
     TypeAliasDeclaration,
     type SourceFile,
 } from "ts-morph";
 
+import { PropExtractor, type PropEntry } from "../tools/shared/prop-extractor";
+
 // =============================================================================
 // Constants
 // =============================================================================
@@ -38,23 +39,6 @@ const SKILLS_RESOURCES_DIR = path.join(
     "resources"
 );
 
-// Props that come from React/HTML base types — noise for skill docs
-const SKIP_PROP_NAMES = new Set([
-    "data-testid",
-    "data-error-testid",
-    "ref",
-    "key",
-]);
-
-// Declaration source paths that indicate a prop is from a React/HTML base type
-function isFromReactOrHtmlBase(declFilePath: string): boolean {
-    return (
-        declFilePath.includes("node_modules/typescript") ||
-        declFilePath.includes("node_modules/@types/react") ||
-        declFilePath.includes("node_modules/@types/react-dom")
-    );
-}
-
 // =============================================================================
 // Source path resolution
 // =============================================================================
@@ -84,98 +68,6 @@ function resolveSourceTypesPath(
     return candidates.find(fs.existsSync) ?? candidates[0];
 }
 
-// =============================================================================
-// Type extraction
-// =============================================================================
-
-/** Clean up a type string for display in the markdown table. */
-function formatType(raw: string): string {
-    return (
-        raw
-            // Remove trailing | undefined (optional marker)
-            .replace(/\s*\|\s*undefined/g, "")
-            // Collapse excessive whitespace
-            .replace(/\s+/g, " ")
-            .trim()
-    );
-}
-
-type PropEntry = {
-    name: string;
-    type: string;
-    required: boolean;
-    defaultVal: string;
-    description: string;
-};
-
-/**
- * Collect all props for an interface or type alias using ts-morph's
- * fully-resolved type system. Handles Omit<>, intersections, extends chains,
- * and union members in one pass — no manual recursion needed.
- */
-function collectProps(
-    node: InterfaceDeclaration | TypeAliasDeclaration
-): PropEntry[] {
-    const result: PropEntry[] = [];
-
-    for (const sym of node.getType().getProperties()) {
-        const name = sym.getName();
-        if (SKIP_PROP_NAMES.has(name)) continue;
-        if (name.startsWith("__")) continue;
-
-        // Find the best declaration for type text and JSDoc
-        const decls = sym.getDeclarations();
-        const propDecl =
-            decls.find(Node.isPropertySignature) ??
-            decls.find(Node.isMethodSignature) ??
-            decls[0];
-
-        if (!propDecl) continue;
-
-        // Skip props that originate from React/@types — they're HTML noise
-        const declPath = propDecl.getSourceFile().getFilePath();
-        if (isFromReactOrHtmlBase(declPath)) continue;
-
-        // Get a clean type string
-        let type = "unknown";
-        if (Node.isPropertySignature(propDecl)) {
-            const typeNode = propDecl.getTypeNode();
-            type = formatType(
-                typeNode
-                    ? typeNode.getText()
-                    : propDecl.getType().getText(propDecl)
-            );
-        } else {
-            type = formatType(sym.getTypeAtLocation(node).getText());
-        }
-
-        const required = Node.isPropertySignature(propDecl)
-            ? !propDecl.hasQuestionToken()
-            : false;
-
-        let description = "";
-        let defaultVal = "";
-
-        if (Node.isPropertySignature(propDecl)) {
-            for (const jsDoc of propDecl.getJsDocs()) {
-                const comment = jsDoc.getCommentText();
-                if (comment && !description) {
-                    description = comment.replace(/\n\s*/g, " ").trim();
-                }
-                for (const tag of jsDoc.getTags()) {
-                    if (tag.getTagName() === "default") {
-                        defaultVal = (tag.getCommentText() ?? "").trim();
-                    }
-                }
-            }
-        }
-
-        result.push({ name, type, required, defaultVal, description });
-    }
-
-    return result;
-}
-
 // =============================================================================
 // Markdown generation
 // =============================================================================
@@ -220,19 +112,37 @@ function buildPropsContent(
 // Resource file processing
 // =============================================================================
 
+function stripPropsSection(content: string): string {
+    const lines = content.split("\n");
+    const out: string[] = [];
+    let inProps = false;
+    for (const line of lines) {
+        if (/^## Props(\b|$)/.test(line)) {
+            inProps = true;
+            continue;
+        }
+        if (inProps && /^## /.test(line)) {
+            inProps = false;
+        }
+        if (!inProps) out.push(line);
+    }
+    return out.join("\n").replace(/\n{3,}/g, "\n\n");
+}
+
 function insertPropsSection(content: string, propsBlock: string): string {
+    const stripped = stripPropsSection(content);
     const marker = "\n\n" + propsBlock;
 
-    if (content.includes("\n## Rules")) {
-        return content.replace("\n## Rules", marker + "\n\n## Rules");
+    if (stripped.includes("\n## Rules")) {
+        return stripped.replace("\n## Rules", marker + "\n\n## Rules");
     }
-    if (content.includes("\n## Anti-patterns")) {
-        return content.replace(
+    if (stripped.includes("\n## Anti-patterns")) {
+        return stripped.replace(
             "\n## Anti-patterns",
             marker + "\n\n## Anti-patterns"
         );
     }
-    return content.trimEnd() + marker + "\n";
+    return stripped.trimEnd() + marker + "\n";
 }
 
 function processResourceFile(
@@ -299,9 +209,11 @@ function processResourceFile(
         return { skipped: true, reason: "no documented exported interfaces" };
     }
 
+    const propExtractor = new PropExtractor();
+
     // Build interface sections
     const ifaceSections = publicNodes.map((node) => {
-        const props = collectProps(node);
+        const props = propExtractor.collectProps(node);
         const title =
             publicNodes.length > 1
                 ? `## Props — \`${node.getName()}\``
diff --git a/scripts/init-skills.js b/scripts/init-skills.js
index 7d4dbb3c76..a07b5b9446 100644
--- a/scripts/init-skills.js
+++ b/scripts/init-skills.js
@@ -1,88 +1,7 @@
 #!/usr/bin/env node
-
-const fs = require("fs");
+const { execSync } = require("child_process");
 const path = require("path");
 
-const CWD = process.cwd();
-
-// Source: skills bundled with this package
-const SKILLS_SRC = path.resolve(__dirname, "../docs/skills/fds-build");
-
-// IDE detection: marker folder → destination path
-const IDE_TARGETS = {
-    "Claude Code": {
-        marker: ".claude",
-        dest: ".claude/commands",
-    },
-    Cursor: {
-        marker: ".cursor",
-        dest: ".cursor/rules",
-    },
-    Windsurf: {
-        marker: ".windsurf",
-        dest: ".windsurf/rules",
-    },
-    Copilot: {
-        marker: ".github",
-        dest: ".github/copilot-instructions",
-    },
-    Generic: {
-        marker: null, // fallback
-        dest: ".agents/skills/fds-build",
-    },
-};
-
-// Files to copy from the skill source (top-level only)
-// Resources are fetched on-demand by the agent, not copied
-const FILES_TO_COPY = ["SKILL.md", "SKILL-v4.md", "catalogue.md"];
-
-function detectIDEs() {
-    const detected = [];
-
-    for (const [ide, config] of Object.entries(IDE_TARGETS)) {
-        if (ide === "Generic") continue;
-        if (fs.existsSync(path.join(CWD, config.marker))) {
-            detected.push(ide);
-        }
-    }
-
-    // fallback to generic if nothing detected
-    return detected.length > 0 ? detected : ["Generic"];
-}
-
-function copyFiles(ide, destRelative) {
-    const destDir = path.join(CWD, destRelative);
-    fs.mkdirSync(destDir, { recursive: true });
-
-    const config = IDE_TARGETS[ide];
-
-    for (const filename of FILES_TO_COPY) {
-        const src = path.join(SKILLS_SRC, filename);
-        if (!fs.existsSync(src)) continue;
-
-        const dest = path.join(destDir, filename);
-        fs.copyFileSync(src, dest);
-        console.log(`  ✓ ${filename} → ${destRelative}/${filename}`);
-    }
-}
-
-function main() {
-    console.log("\n🚀 Installing Flagship DS agent skills...\n");
-
-    const ides = detectIDEs();
-    console.log(`Detected: ${ides.join(", ")}\n`);
-
-    for (const ide of ides) {
-        const { dest } = IDE_TARGETS[ide];
-        console.log(`[${ide}]`);
-        copyFiles(ide, dest);
-        console.log();
-    }
-
-    console.log("✅ Done! Start building with Flagship DS.\n");
-    console.log(
-        "Usage: describe what you want to build and your agent will use the skill automatically."
-    );
-}
+const PACKAGE_ROOT = path.resolve(__dirname, "..");
 
-main();
+execSync(`npx skills add ${PACKAGE_ROOT}`, { stdio: "inherit" });
diff --git a/skills/fds-build/SKILL-v4.md b/skills/fds-build/SKILL-v4.md
index 7d062b1ce8..daaa7cc94d 100644
--- a/skills/fds-build/SKILL-v4.md
+++ b/skills/fds-build/SKILL-v4.md
@@ -31,6 +31,22 @@ Peer deps: `react` + `react-dom` (^17, ^18, or ^19).
 
 ---
 
+## Migrating from v3
+
+If the codebase has v3 patterns, do not carry them into v4:
+
+| v3 pattern                                                              | v4 replacement                                                                                      |
+| ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `import { Color } from "@lifesg/react-design-system/color"`             | `import { Colour } from "@lifesg/react-design-system/theme"` or `var(--fds-colour-*)` CSS variables |
+| `import { TextStyleUtils } from "@lifesg/react-design-system/text"`     | `var(--fds-font-*)` CSS variables                                                                   |
+| `import { FontSize } from "@lifesg/react-design-system/spec/text-spec"` | `var(--fds-font-size-*)` CSS variables                                                              |
+| `styled-components` theme (`${(p) => p.theme.color...}`)                | CSS Modules with `var(--fds-colour-*)`                                                              |
+| `StyleSheetManager` / `ThemeProvider` from `styled-components`          | `ThemeProvider` from `@lifesg/react-design-system/theme`                                            |
+
+v3 design tokens (`Color`, `FontSize`, `TextStyleUtils`, etc.) are **not exported** from v4 — using them will cause import errors. Use CSS variables or the `Colour` / `Spacing` / `Typography` helpers from `@lifesg/react-design-system/theme` instead.
+
+---
+
 ## ThemeProvider (required)
 
 Every app must wrap all components in `ThemeProvider`. Without it, components throw errors.
diff --git a/skills/fds-build/resources/v3/components/accordion.md b/skills/fds-build/resources/v3/components/accordion.md
index b758a4edf2..1b33b0c5a0 100644
--- a/skills/fds-build/resources/v3/components/accordion.md
+++ b/skills/fds-build/resources/v3/components/accordion.md
@@ -74,7 +74,7 @@ const ControlledExample = () => (
 | Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
 | ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `title`                  | `string \| JSX.Element`          | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
 | `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
 | `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
 | `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
@@ -85,209 +85,16 @@ const ControlledExample = () => (
 
 ## Props — `AccordionItemProps`
 
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionItemHandle`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionItemHandle`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionItemHandle`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+| Prop             | Type                            | Default | Description                                                                                                                                                                                                                                                                               |
+| ---------------- | ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*       | `string \| JSX.Element`         | —       | —                                                                                                                                                                                                                                                                                         |
+| `children` \*    | `JSX.Element \| JSX.Element[]`  | —       | —                                                                                                                                                                                                                                                                                         |
+| `expanded`       | `boolean`                       | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item.                                                                                 |
+| `id`             | `string`                        | —       | —                                                                                                                                                                                                                                                                                         |
+| `className`      | `string`                        | —       | —                                                                                                                                                                                                                                                                                         |
+| `type`           | `AccordionItemType`             | —       | Visual size variant for the accordion item.                                                                                                                                                                                                                                               |
+| `collapsible`    | `boolean`                       | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                                                                                                 |
+| `onExpandChange` | `((expanded: boolean) => void)` | —       | Called when the user toggles this item or the parent "Show all" / "Hide all" button fires. When provided, the item enters **controlled mode** — the caller must update the `expanded` prop in response. Without this prop, the item manages its own state internally (uncontrolled mode). |
 
 ## Props — `AccordionItemApi`
 
diff --git a/skills/fds-build/resources/v3/components/alert.md b/skills/fds-build/resources/v3/components/alert.md
index df2769f74e..3142159a30 100644
--- a/skills/fds-build/resources/v3/components/alert.md
+++ b/skills/fds-build/resources/v3/components/alert.md
@@ -27,66 +27,6 @@ import { Alert } from "@lifesg/react-design-system/alert";
 </Alert>;
 ```
 
-## Props
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
-## Props
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
-## Props — `AlertProps`
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
-## Props — `AlertProps`
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
-## Props — `AlertProps`
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
 ## Props — `AlertProps`
 
 | Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
diff --git a/skills/fds-build/resources/v3/components/animation.md b/skills/fds-build/resources/v3/components/animation.md
index 07feac889d..55ac88341e 100644
--- a/skills/fds-build/resources/v3/components/animation.md
+++ b/skills/fds-build/resources/v3/components/animation.md
@@ -16,48 +16,3 @@ Import: `import { Animation } from "@lifesg/react-design-system/animation"`
 | `id`        | `string`                                                                  | —       | —                                                        |
 | `className` | `string`                                                                  | —       | —                                                        |
 | `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
-
-## Props — `AnimationProps`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `id`        | `string` | —       | —           |
-| `className` | `string` | —       | —           |
-
-## Props — `CustomisableAnimationProps`
-
-| Prop        | Type                                                                      | Default | Description                                              |
-| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `id`        | `string`                                                                  | —       | —                                                        |
-| `className` | `string`                                                                  | —       | —                                                        |
-| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
-
-## Props — `AnimationProps`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `id`        | `string` | —       | —           |
-| `className` | `string` | —       | —           |
-
-## Props — `CustomisableAnimationProps`
-
-| Prop        | Type                                                                      | Default | Description                                              |
-| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `id`        | `string`                                                                  | —       | —                                                        |
-| `className` | `string`                                                                  | —       | —                                                        |
-| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
-
-## Props — `AnimationProps`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `id`        | `string` | —       | —           |
-| `className` | `string` | —       | —           |
-
-## Props — `CustomisableAnimationProps`
-
-| Prop        | Type                                                                      | Default | Description                                              |
-| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `id`        | `string`                                                                  | —       | —                                                        |
-| `className` | `string`                                                                  | —       | —                                                        |
-| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
diff --git a/skills/fds-build/resources/v3/components/avatar.md b/skills/fds-build/resources/v3/components/avatar.md
index bb553c1561..def3ad46c4 100644
--- a/skills/fds-build/resources/v3/components/avatar.md
+++ b/skills/fds-build/resources/v3/components/avatar.md
@@ -2,41 +2,6 @@
 
 Import: `import { Avatar } from "@lifesg/react-design-system/avatar"`
 
-## Props
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
-
-## Props
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
-
-## Props — `AvatarProps`
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
-
-## Props — `AvatarProps`
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
-
-## Props — `AvatarProps`
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
-
 ## Props — `AvatarProps`
 
 | Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
diff --git a/skills/fds-build/resources/v3/components/badge.md b/skills/fds-build/resources/v3/components/badge.md
index 14a93a1fd0..b6a08e7cc8 100644
--- a/skills/fds-build/resources/v3/components/badge.md
+++ b/skills/fds-build/resources/v3/components/badge.md
@@ -2,56 +2,6 @@
 
 Import: `import { Badge } from "@lifesg/react-design-system/badge"`
 
-## Props
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
-## Props
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
-## Props — `BadgeProps`
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
-## Props — `BadgeProps`
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
-## Props — `BadgeProps`
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
 ## Props — `BadgeProps`
 
 | Prop          | Type               | Default   | Description                                                                                                                                                                                           |
diff --git a/skills/fds-build/resources/v3/components/box-container.md b/skills/fds-build/resources/v3/components/box-container.md
index a8f27fbcd0..a0cee68541 100644
--- a/skills/fds-build/resources/v3/components/box-container.md
+++ b/skills/fds-build/resources/v3/components/box-container.md
@@ -47,121 +47,6 @@ Use for a single collapsible panel displaying form data or structured content 
 | `id`                    | `string`                          | —         | —                                                                                                                                                       |
 | `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
 
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
 ## Rules
 
 -   Use `displayState` to indicate section-level status — not as a substitute for inline field errors.
diff --git a/skills/fds-build/resources/v3/components/breadcrumb.md b/skills/fds-build/resources/v3/components/breadcrumb.md
index a3f549cb30..bae6aa4b34 100644
--- a/skills/fds-build/resources/v3/components/breadcrumb.md
+++ b/skills/fds-build/resources/v3/components/breadcrumb.md
@@ -51,96 +51,6 @@ import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
 | `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
 | `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
 
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
 ## Rules
 
 -   Always place the current page last in `links` — omit `href` on the last item.
diff --git a/skills/fds-build/resources/v3/components/button.md b/skills/fds-build/resources/v3/components/button.md
index 6407316c2d..b7e34d9687 100644
--- a/skills/fds-build/resources/v3/components/button.md
+++ b/skills/fds-build/resources/v3/components/button.md
@@ -58,66 +58,6 @@ import { Button } from "@lifesg/react-design-system/button";
 | `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
 | `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
 
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
 ## Rules
 
 -   `styleType` is mandatory.
diff --git a/skills/fds-build/resources/v3/components/calendar.md b/skills/fds-build/resources/v3/components/calendar.md
index 9c32e3bcd0..4bdc7d2dee 100644
--- a/skills/fds-build/resources/v3/components/calendar.md
+++ b/skills/fds-build/resources/v3/components/calendar.md
@@ -55,25 +55,6 @@ const MultiDateCalendar = () => {
 };
 ```
 
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
 ## YearMonthDisplay
 
 | Prop    | Type     | Description                           |
@@ -100,133 +81,6 @@ const MultiDateCalendar = () => {
 | `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
 | `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
 
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
-## Props — `CalendarProps`
-
-| Prop                       | Type                                  | Default    | Description                                                                                           |
-| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —          | —                                                                                                     |
-| `id`                       | `string`                              | —          | —                                                                                                     |
-| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
-| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
-| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
-| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
-| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
-
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
-## Props — `CalendarProps`
-
-| Prop                       | Type                                  | Default    | Description                                                                                           |
-| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —          | —                                                                                                     |
-| `id`                       | `string`                              | —          | —                                                                                                     |
-| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
-| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
-| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
-| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
-| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
-
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
-## Props — `CalendarProps`
-
-| Prop                       | Type                                  | Default    | Description                                                                                           |
-| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —          | —                                                                                                     |
-| `id`                       | `string`                              | —          | —                                                                                                     |
-| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
-| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
-| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
-| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
-| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
-
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
 ## Props — `CalendarProps`
 
 | Prop                       | Type                                  | Default    | Description                                                                                           |
diff --git a/skills/fds-build/resources/v3/components/checkbox.md b/skills/fds-build/resources/v3/components/checkbox.md
index 9fbbc7826b..bf98ce7a78 100644
--- a/skills/fds-build/resources/v3/components/checkbox.md
+++ b/skills/fds-build/resources/v3/components/checkbox.md
@@ -38,51 +38,6 @@ import { Checkbox } from "@lifesg/react-design-system/checkbox";
 | `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
 | `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
 
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
 ## Rules
 
 -   Always pair with a visible label — wrap in `<label>` or use `aria-label`.
diff --git a/skills/fds-build/resources/v3/components/countdown-timer.md b/skills/fds-build/resources/v3/components/countdown-timer.md
index dd6f2c040c..8d0791b053 100644
--- a/skills/fds-build/resources/v3/components/countdown-timer.md
+++ b/skills/fds-build/resources/v3/components/countdown-timer.md
@@ -18,54 +18,3 @@ Import: `import { CountdownTimer } from "@lifesg/react-design-system/countdown-t
 | `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
 | `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
 | `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
-
-## Props
-
-| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
-| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
-| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
-| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
-| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
-| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
-| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
-| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
-| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
-| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
-| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
-| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
-| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
-
-## Props
-
-| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
-| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
-| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
-| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
-| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
-| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
-| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
-| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
-| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
-| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
-| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
-| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
-| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
-
-## Props
-
-| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
-| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
-| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
-| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
-| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
-| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
-| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
-| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
-| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
-| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
-| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
-| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
-| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
diff --git a/skills/fds-build/resources/v3/components/data-table.md b/skills/fds-build/resources/v3/components/data-table.md
index 33586184db..b99831d0f3 100644
--- a/skills/fds-build/resources/v3/components/data-table.md
+++ b/skills/fds-build/resources/v3/components/data-table.md
@@ -84,38 +84,6 @@ const Example = () => {
 };
 ```
 
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
 ## HeaderItemProps
 
 | Prop          | Type                        | Default | Description                                                            |
@@ -126,141 +94,6 @@ const Example = () => {
 | `style`       | `CSSProperties`             | —       | Custom styles for the column header cell                               |
 | `keyColumn`   | `boolean`                   | —       | Marks this column as descriptive for screen reader row checkbox labels |
 
-## RowProps
-
-| Prop         | Type                                                                           | Default | Description                             |
-| ------------ | ------------------------------------------------------------------------------ | ------- | --------------------------------------- |
-| `id` \*      | `string`                                                                       | —       | Row id                                  |
-| `[fieldKey]` | `string \| number \| React.ReactNode \| (row, renderProps) => React.ReactNode` | —       | Other properties on the row item object |
-
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
 ## Props — `DataTableProps`
 
 | Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
diff --git a/skills/fds-build/resources/v3/components/date-navigator.md b/skills/fds-build/resources/v3/components/date-navigator.md
index ddba7852ef..88671722d8 100644
--- a/skills/fds-build/resources/v3/components/date-navigator.md
+++ b/skills/fds-build/resources/v3/components/date-navigator.md
@@ -20,96 +20,6 @@ Import: `import { DateNavigator } from "@lifesg/react-design-system/date-navigat
 | `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
 | `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
 
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
 ## Rules
 
 -   Only override `dropdownRootNode` if you need the dropdown to share a stacking context with a scroll container — may cause z-index issues.
diff --git a/skills/fds-build/resources/v3/components/divider.md b/skills/fds-build/resources/v3/components/divider.md
index 5db1ba48ed..a1e8ae18c3 100644
--- a/skills/fds-build/resources/v3/components/divider.md
+++ b/skills/fds-build/resources/v3/components/divider.md
@@ -2,86 +2,6 @@
 
 Import: `import { Divider } from "@lifesg/react-design-system/divider"`
 
-## Props
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
-## Props
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
-## Props — `DividerProps`
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
-## Props — `DividerProps`
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
-## Props — `DividerProps`
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
 ## Props — `DividerProps`
 
 | Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
diff --git a/skills/fds-build/resources/v3/components/drawer.md b/skills/fds-build/resources/v3/components/drawer.md
index 4875195819..c5e06ce402 100644
--- a/skills/fds-build/resources/v3/components/drawer.md
+++ b/skills/fds-build/resources/v3/components/drawer.md
@@ -65,66 +65,6 @@ const FilterDrawer = () => {
 | `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
 | `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
 
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
 ## Rules
 
 -   Always provide `onClose` so users can dismiss the panel via the close button.
diff --git a/skills/fds-build/resources/v3/components/error-display.md b/skills/fds-build/resources/v3/components/error-display.md
index 52dace764a..78eac167b9 100644
--- a/skills/fds-build/resources/v3/components/error-display.md
+++ b/skills/fds-build/resources/v3/components/error-display.md
@@ -70,44 +70,6 @@ import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
 />;
 ```
 
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
 ## MaintenanceAdditionalAttributes
 
 | Prop            | Type     | Default | Description                            |
@@ -158,158 +120,6 @@ import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
 | `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
 | `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
 
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
 ## Rules
 
 -   Always use `ErrorDisplay` for error/empty states — never build custom error pages with raw components.
diff --git a/skills/fds-build/resources/v3/components/feedback-rating.md b/skills/fds-build/resources/v3/components/feedback-rating.md
index 769b51d7b4..764958b94b 100644
--- a/skills/fds-build/resources/v3/components/feedback-rating.md
+++ b/skills/fds-build/resources/v3/components/feedback-rating.md
@@ -50,71 +50,6 @@ const RatingWidget = () => {
 | `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
 | `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
 
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
 ## Rules
 
 -   All three props — `rating`, `onRatingChange`, `onSubmit` — are required.
diff --git a/skills/fds-build/resources/v3/components/file-download.md b/skills/fds-build/resources/v3/components/file-download.md
index 95073261ce..e19e6640e5 100644
--- a/skills/fds-build/resources/v3/components/file-download.md
+++ b/skills/fds-build/resources/v3/components/file-download.md
@@ -46,136 +46,6 @@ Import: `import { FileDownload } from "@lifesg/react-design-system/file-download
 | `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
 | `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
 
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
 ## Rules
 
 -   `fileItems` and `onDownload` are required.
diff --git a/skills/fds-build/resources/v3/components/file-upload.md b/skills/fds-build/resources/v3/components/file-upload.md
index cfdb8c14da..a5d2d378c8 100644
--- a/skills/fds-build/resources/v3/components/file-upload.md
+++ b/skills/fds-build/resources/v3/components/file-upload.md
@@ -24,306 +24,12 @@ import { FileUpload } from "@lifesg/react-design-system/file-upload";
 />;
 ```
 
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
 ## Custom labels
 
 | Prop                             | Type     | Default          | Description                                       |
 | -------------------------------- | -------- | ---------------- | ------------------------------------------------- |
 | `customLabels.uploadButtonLabel` | `string` | `"Upload files"` | Label of the button that triggers the file dialog |
 
-## FileItemProps
-
-| Prop                    | Type                        | Required | Description                              |
-| ----------------------- | --------------------------- | -------- | ---------------------------------------- |
-| `id`                    | `string`                    | Yes      | Unique identifier for the file           |
-| `name`                  | `string`                    | Yes      | File name displayed in the list          |
-| `type`                  | `string`                    | Yes      | MIME type of the file                    |
-| `size`                  | `number`                    | Yes      | File size in bytes                       |
-| `description`           | `string`                    | —        | Alt text or description for the file     |
-| `progress`              | `number`                    | —        | Upload progress from 0 to 1              |
-| `errorMessage`          | `string \| React.ReactNode` | —        | Per-file error message                   |
-| `thumbnailImageDataUrl` | `string`                    | —        | Thumbnail data URL rendered for the file |
-| `truncateText`          | `boolean`                   | `true`   | Truncates long file names                |
-
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
 ## Props — `FileItemProps`
 
 | Prop                    | Type                        | Default | Description                                                                                                                                                                 |
diff --git a/skills/fds-build/resources/v3/components/filter.md b/skills/fds-build/resources/v3/components/filter.md
index 6239669de7..85e7561193 100644
--- a/skills/fds-build/resources/v3/components/filter.md
+++ b/skills/fds-build/resources/v3/components/filter.md
@@ -208,506 +208,6 @@ Key points:
 | `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
 | `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
 
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
 ## Rules
 
 -   `Filter` is the recommended entry point — it automatically renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile.
diff --git a/skills/fds-build/resources/v3/components/footer.md b/skills/fds-build/resources/v3/components/footer.md
index 07e0f7c2e9..036792657b 100644
--- a/skills/fds-build/resources/v3/components/footer.md
+++ b/skills/fds-build/resources/v3/components/footer.md
@@ -75,203 +75,6 @@ import { Footer } from "@lifesg/react-design-system/footer";
 | `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
 | `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
 
-## FooterLinkProps\<T\>
-
-Inherits `TypographyLinkProps`, plus:
-
-| Prop           | Type     | Description                                 |
-| -------------- | -------- | ------------------------------------------- |
-| `data-options` | `T`      | Custom attributes passed to the link object |
-| `data-testid`  | `string` | Test identifier                             |
-
-## DisclaimerLinks
-
-| Prop                  | Type                  | Default    | Description                                                         |
-| --------------------- | --------------------- | ---------- | ------------------------------------------------------------------- |
-| `privacy`             | `TypographyLinkProps` | predefined | Privacy Statement link — text is fixed to "Privacy Statement"       |
-| `termsOfUse`          | `TypographyLinkProps` | predefined | Terms of Use link — text is fixed to "Terms of Use"                 |
-| `reportVulnerability` | `TypographyLinkProps` | predefined | Report Vulnerability link — text is fixed to "Report Vulnerability" |
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
 ## Rules
 
 -   Use `<Footer />` with no props for standard pages — do not add unnecessary props.
diff --git a/skills/fds-build/resources/v3/components/form-date-input.md b/skills/fds-build/resources/v3/components/form-date-input.md
index 539721fcbd..e96e23b75f 100644
--- a/skills/fds-build/resources/v3/components/form-date-input.md
+++ b/skills/fds-build/resources/v3/components/form-date-input.md
@@ -19,40 +19,6 @@ const StyledDateInput = styled(Form.DateInput)`
 
 Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper — `max-width` constrains the component without conflicting with its internal `width: 100%`.
 
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
 ## YearMonthDisplay
 
 | Prop    | Type     | Description                       |
@@ -94,142 +60,6 @@ Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-wid
 | `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
 | `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
 
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/form-date-range-input.md b/skills/fds-build/resources/v3/components/form-date-range-input.md
index 02ea7e55dc..2d4a01d925 100644
--- a/skills/fds-build/resources/v3/components/form-date-range-input.md
+++ b/skills/fds-build/resources/v3/components/form-date-range-input.md
@@ -77,43 +77,6 @@ const StyledDateRangeInput = styled(Form.DateRangeInput)`
 `;
 ```
 
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
 ## YearMonthDisplay
 
 | Prop    | Type     | Description                       |
@@ -158,154 +121,6 @@ const StyledDateRangeInput = styled(Form.DateRangeInput)`
 | `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
 | `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
 
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/form-e-signature.md b/skills/fds-build/resources/v3/components/form-e-signature.md
index 4808458372..4e98aa3820 100644
--- a/skills/fds-build/resources/v3/components/form-e-signature.md
+++ b/skills/fds-build/resources/v3/components/form-e-signature.md
@@ -38,121 +38,6 @@ Import: `import { Form } from "@lifesg/react-design-system/form"`
 | `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/form-input.md b/skills/fds-build/resources/v3/components/form-input.md
index 89c8768e03..0c64781046 100644
--- a/skills/fds-build/resources/v3/components/form-input.md
+++ b/skills/fds-build/resources/v3/components/form-input.md
@@ -45,101 +45,6 @@ import { Form } from "@lifesg/react-design-system/form";
 | `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Set `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
diff --git a/skills/fds-build/resources/v3/components/form-masked-input.md b/skills/fds-build/resources/v3/components/form-masked-input.md
index f17e94d3df..e69faac3fa 100644
--- a/skills/fds-build/resources/v3/components/form-masked-input.md
+++ b/skills/fds-build/resources/v3/components/form-masked-input.md
@@ -50,181 +50,6 @@ Import: `import { Form } from "@lifesg/react-design-system/form"`
 | `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
 | `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
 
-## Props
-
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
-## Props
-
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
-## Props
-
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
-## Props
-
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
-## Props
-
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/form-multi-select.md b/skills/fds-build/resources/v3/components/form-multi-select.md
index 91c28ffc74..e6f11df87c 100644
--- a/skills/fds-build/resources/v3/components/form-multi-select.md
+++ b/skills/fds-build/resources/v3/components/form-multi-select.md
@@ -39,226 +39,10 @@ const options = [
 
 | Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
 | -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
 | `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
 | `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
 | `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
 | `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
 | `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
 | `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
@@ -278,10 +62,6 @@ const options = [
 | `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
 | `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
 | `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
 | `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
 | `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
 | `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
diff --git a/skills/fds-build/resources/v3/components/form-nested-multi-select.md b/skills/fds-build/resources/v3/components/form-nested-multi-select.md
index ceb912cfe6..2f0e066332 100644
--- a/skills/fds-build/resources/v3/components/form-nested-multi-select.md
+++ b/skills/fds-build/resources/v3/components/form-nested-multi-select.md
@@ -137,211 +137,6 @@ const NestedMultiSelectExample = () => {
 | `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
 | `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
 
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
 ## Rules
 
 -   Every option node must have a unique `key` string — key paths are used for controlled state.
diff --git a/skills/fds-build/resources/v3/components/form-nested-select.md b/skills/fds-build/resources/v3/components/form-nested-select.md
index aade4e7dc3..0b2c118659 100644
--- a/skills/fds-build/resources/v3/components/form-nested-select.md
+++ b/skills/fds-build/resources/v3/components/form-nested-select.md
@@ -130,216 +130,6 @@ const NestedSelectExample = () => {
 | `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
 | `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
 
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
 ## Rules
 
 -   Every option node must have a unique `key` string — the key path is used for controlled state.
diff --git a/skills/fds-build/resources/v3/components/form-otp-verification.md b/skills/fds-build/resources/v3/components/form-otp-verification.md
index 2513ba3d79..59780485e5 100644
--- a/skills/fds-build/resources/v3/components/form-otp-verification.md
+++ b/skills/fds-build/resources/v3/components/form-otp-verification.md
@@ -156,78 +156,6 @@ Returning a value (or nothing) always signals success and advances the state mac
 | `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
-| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
-| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
-| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
-| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
-| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
-| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
-| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
-| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
-| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
-| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
-| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
-| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
-| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
-| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
-| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
-| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
-| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
-| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
-| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
-| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
-| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
-| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
-| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
-| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
-| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
-| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
-| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
-| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
-| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
-| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
-| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
-| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
-| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
-| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
-| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
-| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
-| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
-| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
-| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
-| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
-| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
-| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
-| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
-| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/form-phone-number-input.md b/skills/fds-build/resources/v3/components/form-phone-number-input.md
index cb28ddfa81..d150bc005c 100644
--- a/skills/fds-build/resources/v3/components/form-phone-number-input.md
+++ b/skills/fds-build/resources/v3/components/form-phone-number-input.md
@@ -22,43 +22,6 @@ const StyledPhoneNumberInput = styled(Form.PhoneNumberInput)`
 
 Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
 
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## PhoneNumberInputValue
 
 | Prop          | Type     | Description                                                                                                             |
@@ -103,154 +66,6 @@ Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-wid
 | `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/form-predictive-text-input.md b/skills/fds-build/resources/v3/components/form-predictive-text-input.md
index a8babd0d9e..05bf4536ee 100644
--- a/skills/fds-build/resources/v3/components/form-predictive-text-input.md
+++ b/skills/fds-build/resources/v3/components/form-predictive-text-input.md
@@ -89,166 +89,6 @@ Debounce `fetchOptions` internally (e.g. with `setTimeout` or a library) — the
 | `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
 | `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
 
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/form-select.md b/skills/fds-build/resources/v3/components/form-select.md
index 8b0092fe43..f5f29bfb32 100644
--- a/skills/fds-build/resources/v3/components/form-select.md
+++ b/skills/fds-build/resources/v3/components/form-select.md
@@ -61,236 +61,7 @@ const options = [
 | `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
 | `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
 | `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `isOptionDisabled`           | `((item: T) => boolean)`                                      | —             | Returns `true` if the given option should be shown but not selectable.                                                                           |
 | `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
 | `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
 | `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
diff --git a/skills/fds-build/resources/v3/components/form-slider.md b/skills/fds-build/resources/v3/components/form-slider.md
index 156a622ea5..cdc911c2f5 100644
--- a/skills/fds-build/resources/v3/components/form-slider.md
+++ b/skills/fds-build/resources/v3/components/form-slider.md
@@ -97,176 +97,6 @@ const BudgetSlider = () => {
 | `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/form-textarea.md b/skills/fds-build/resources/v3/components/form-textarea.md
index 332014daa7..2f6097f0b3 100644
--- a/skills/fds-build/resources/v3/components/form-textarea.md
+++ b/skills/fds-build/resources/v3/components/form-textarea.md
@@ -96,96 +96,6 @@ The prop signature is `(maxLength: number, currentValueLength: number) => JSX.El
 | `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Set `rows` to match the expected content length — a short reason field needs fewer rows than a free-text description.
diff --git a/skills/fds-build/resources/v3/components/form-time-range-picker.md b/skills/fds-build/resources/v3/components/form-time-range-picker.md
index 5295143f51..e05b3e60b3 100644
--- a/skills/fds-build/resources/v3/components/form-time-range-picker.md
+++ b/skills/fds-build/resources/v3/components/form-time-range-picker.md
@@ -20,44 +20,6 @@ const StyledTimeRangePicker = styled(Form.TimeRangePicker)`
 
 Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
 
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Combobox-variant-specific props
 
 | Prop                     | Type     | Default | Description                                                  |
@@ -113,158 +75,6 @@ Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-wid
 | `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/form-timepicker.md b/skills/fds-build/resources/v3/components/form-timepicker.md
index 062bb21b5a..a2869dcfa2 100644
--- a/skills/fds-build/resources/v3/components/form-timepicker.md
+++ b/skills/fds-build/resources/v3/components/form-timepicker.md
@@ -54,166 +54,6 @@ Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-wid
 | `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
 | `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
 
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/form-unit-number-input.md b/skills/fds-build/resources/v3/components/form-unit-number-input.md
index 92e3436720..363e8c92a9 100644
--- a/skills/fds-build/resources/v3/components/form-unit-number-input.md
+++ b/skills/fds-build/resources/v3/components/form-unit-number-input.md
@@ -114,161 +114,6 @@ const StyledUnitNumberInput = styled(Form.UnitNumberInput)`
 | `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md b/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
index a15b2145d0..43c2def61d 100644
--- a/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
+++ b/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
@@ -124,346 +124,6 @@ const DocViewer = () => {
 | `width` \*  | `number` | —       | —           |
 | `height` \* | `number` | —       | —           |
 
-## FullscreenImageCarouselItemProps (shared)
-
-| Prop       | Type     | Default | Description                                      |
-| ---------- | -------- | ------- | ------------------------------------------------ |
-| `fileName` | `string` | —       | File name displayed in the info bar at the top   |
-| `fileSize` | `string` | —       | Pre-formatted file size string (e.g. `"2.4 MB"`) |
-
-## FullscreenImageCarouselImageItemProps
-
-| Prop           | Type      | Default | Description                                   |
-| -------------- | --------- | ------- | --------------------------------------------- |
-| `type`         | `"image"` | —       | Discriminant; may be omitted for image items  |
-| `src` \*       | `string`  | —       | The image src                                 |
-| `alt`          | `string`  | —       | Descriptive text for screen readers           |
-| `thumbnailSrc` | `string`  | —       | Thumbnail src; falls back to `src` if omitted |
-
-## FullscreenImageCarouselCustomItemProps
-
-| Prop               | Type                    | Default | Description                                  |
-| ------------------ | ----------------------- | ------- | -------------------------------------------- |
-| `type` \*          | `"custom"`              | —       | Discriminant; must be `"custom"`             |
-| `renderContent` \* | `() => React.ReactNode` | —       | Custom render prop for the full slide area   |
-| `thumbnailSrc`     | `string`                | —       | Thumbnail src; shows placeholder if omitted  |
-| `itemLabel`        | `string`                | —       | Label describing content type (e.g. `"PDF"`) |
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
-## Props — `FullscreenImageCarouselItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
-## Props — `FullscreenImageCarouselItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
-## Props — `FullscreenImageCarouselItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
 ## Props — `FullscreenImageCarouselItemProps`
 
 | Prop            | Type      | Default | Description                                                                              |
diff --git a/skills/fds-build/resources/v3/components/histogram-slider.md b/skills/fds-build/resources/v3/components/histogram-slider.md
index 8275933252..9c7501df95 100644
--- a/skills/fds-build/resources/v3/components/histogram-slider.md
+++ b/skills/fds-build/resources/v3/components/histogram-slider.md
@@ -4,158 +4,6 @@ Import: `import { HistogramSlider } from "@lifesg/react-design-system/histogram-
 
 A range slider with a histogram distribution chart above it — used in filter panels where showing the value distribution helps users pick a range (e.g. price range, age range).
 
-## HistogramBinProps
-
-| Prop       | Type     | Description                                         |
-| ---------- | -------- | --------------------------------------------------- |
-| `count`    | `number` | Number of items in this bin — determines bar height |
-| `minValue` | `number` | Starting value of this bin                          |
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
 ## Props — `HistogramBinProps`
 
 | Prop          | Type     | Default | Description                                              |
diff --git a/skills/fds-build/resources/v3/components/image-button.md b/skills/fds-build/resources/v3/components/image-button.md
index 8533c75e54..bdcb2bd27c 100644
--- a/skills/fds-build/resources/v3/components/image-button.md
+++ b/skills/fds-build/resources/v3/components/image-button.md
@@ -10,48 +10,3 @@ Import: `import { ImageButton } from "@lifesg/react-design-system/image-button"`
 | `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
 | `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
 | `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
diff --git a/skills/fds-build/resources/v3/components/input.md b/skills/fds-build/resources/v3/components/input.md
index bd09756498..2ad6979937 100644
--- a/skills/fds-build/resources/v3/components/input.md
+++ b/skills/fds-build/resources/v3/components/input.md
@@ -13,83 +13,6 @@ Use `Input` for standalone inputs that do not need a label or error message —
 | `"bordered"` (default) | Standard standalone input — provides clear affordance                                                            |
 | `"no-border"`          | Inline editing or search bars embedded in headers/toolbars where a border would conflict with the surrounding UI |
 
-## Props
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputPartialProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputPartialProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputPartialProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
 ## Props — `InputProps`
 
 | Prop         | Type             | Default    | Description                                                                                                   |
diff --git a/skills/fds-build/resources/v3/components/language-switcher.md b/skills/fds-build/resources/v3/components/language-switcher.md
index cd0671507a..655a6c359e 100644
--- a/skills/fds-build/resources/v3/components/language-switcher.md
+++ b/skills/fds-build/resources/v3/components/language-switcher.md
@@ -2,46 +2,6 @@
 
 Import: `import { LanguageSwitcher } from "@lifesg/react-design-system/language-switcher"`
 
-## Props
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
-## Props
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
-## Props — `LanguageSwitcherProps`
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
-## Props — `LanguageSwitcherProps`
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
-## Props — `LanguageSwitcherProps`
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
 ## Props — `LanguageSwitcherProps`
 
 | Prop               | Type                                         | Default    | Description                                                                |
diff --git a/skills/fds-build/resources/v3/components/layout.md b/skills/fds-build/resources/v3/components/layout.md
index 26eb9163c4..6a45830bb1 100644
--- a/skills/fds-build/resources/v3/components/layout.md
+++ b/skills/fds-build/resources/v3/components/layout.md
@@ -39,53 +39,6 @@ import { Layout } from "@lifesg/react-design-system/layout";
 | `"flex"`        | Horizontal flexbox layout        |
 | `"flex-column"` | Vertical flexbox layout          |
 
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Breakpoints
 
 | Breakpoint | Min width | Columns | Gutter | Device                |
@@ -184,194 +137,6 @@ Design mobile-first — define base styles for mobile, then override with `MinWi
 | `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Do not use CSS modules or plain CSS/SCSS — styled-components only.
diff --git a/skills/fds-build/resources/v3/components/link-list.md b/skills/fds-build/resources/v3/components/link-list.md
index 430d63de1d..471477e898 100644
--- a/skills/fds-build/resources/v3/components/link-list.md
+++ b/skills/fds-build/resources/v3/components/link-list.md
@@ -59,170 +59,12 @@ import { LinkList } from "@lifesg/react-design-system/link-list";
 />;
 ```
 
-## Props
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props — `LinkListItemProps`
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props — `LinkListBaseProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-
-## Props — `LinkListEagerProps`
-
-| Prop       | Type      | Default | Description                                                                                                                                                                               |
-| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
-| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
-
-## Props — `LinkListLazyProps`
-
-| Prop            | Type                          | Default | Description                                                                               |
-| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
-| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
-| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
-
-## Props — `LinkListProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
-
-## Props — `LinkListItemProps`
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props — `LinkListBaseProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-
-## Props — `LinkListEagerProps`
-
-| Prop       | Type      | Default | Description                                                                                                                                                                               |
-| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
-| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
-
-## Props — `LinkListLazyProps`
-
-| Prop            | Type                          | Default | Description                                                                               |
-| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
-| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
-| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
-
-## Props — `LinkListProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
-
-## Props — `LinkListItemProps`
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props — `LinkListBaseProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-
-## Props — `LinkListEagerProps`
-
-| Prop       | Type      | Default | Description                                                                                                                                                                               |
-| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
-| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
-
-## Props — `LinkListLazyProps`
-
-| Prop            | Type                          | Default | Description                                                                               |
-| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
-| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
-| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
-
-## Props — `LinkListProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
-
 ## Props — `LinkListItemProps`
 
 | Prop                   | Type                                                        | Default | Description                                                                                          |
 | ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `title` \*             | `string \| JSX.Element`                                     | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string \| JSX.Element`                                     | —       | Secondary text shown below the title.                                                                |
 | `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
 | `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
 | `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
diff --git a/skills/fds-build/resources/v3/components/local-nav.md b/skills/fds-build/resources/v3/components/local-nav.md
index 6bac8af5c2..3fd0b9c364 100644
--- a/skills/fds-build/resources/v3/components/local-nav.md
+++ b/skills/fds-build/resources/v3/components/local-nav.md
@@ -95,226 +95,6 @@ const navItems = [
 | `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
 | `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
 
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
 ## Rules
 
 -   Use `LocalNavMenu` on desktop and `LocalNavDropdown` on tablet/mobile — render both and show/hide with CSS breakpoints.
diff --git a/skills/fds-build/resources/v3/components/masthead.md b/skills/fds-build/resources/v3/components/masthead.md
index 6d477b6be7..815ca760b9 100644
--- a/skills/fds-build/resources/v3/components/masthead.md
+++ b/skills/fds-build/resources/v3/components/masthead.md
@@ -8,36 +8,6 @@ Import: `import { Masthead } from "@lifesg/react-design-system/masthead"`
 | --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
 | `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
 
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
 ## Rules
 
 -   No mandatory props.
diff --git a/skills/fds-build/resources/v3/components/menu.md b/skills/fds-build/resources/v3/components/menu.md
index 53f260f150..8e3a0d8378 100644
--- a/skills/fds-build/resources/v3/components/menu.md
+++ b/skills/fds-build/resources/v3/components/menu.md
@@ -92,236 +92,6 @@ import { Button } from "@lifesg/react-design-system/button";
 | `label`    | `string` | —       | Primary text label.                                |
 | `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
 
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
 ## Rules
 
 -   `Menu` wraps a trigger element as its child — the trigger can be any element (e.g. `Avatar`, `Button`, `NavbarLink`).
diff --git a/skills/fds-build/resources/v3/components/modal.md b/skills/fds-build/resources/v3/components/modal.md
index f9b0d97024..f83dcfca06 100644
--- a/skills/fds-build/resources/v3/components/modal.md
+++ b/skills/fds-build/resources/v3/components/modal.md
@@ -94,116 +94,6 @@ const ConfirmDeleteModal = () => {
 | `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
 | `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
 
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
 ## Rules
 
 -   Always include `showCloseButton` on `Modal.Box` — the close button is the minimum required exit mechanism.
diff --git a/skills/fds-build/resources/v3/components/navbar.md b/skills/fds-build/resources/v3/components/navbar.md
index 77d6872fe0..c904041390 100644
--- a/skills/fds-build/resources/v3/components/navbar.md
+++ b/skills/fds-build/resources/v3/components/navbar.md
@@ -216,732 +216,6 @@ Key points:
 | `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
 | `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
 
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
-## Props — `NavItemProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavbarButtonProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarDrawerApi`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavbarDrawerHandle`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
-## Props — `NavItemProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavbarButtonProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarDrawerApi`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavbarDrawerHandle`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
-## Props — `NavItemProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavbarButtonProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarDrawerApi`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavbarDrawerHandle`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
 ## Props — `NavItemProps`
 
 | Prop          | Type          | Default | Description |
diff --git a/skills/fds-build/resources/v3/components/notification-banner.md b/skills/fds-build/resources/v3/components/notification-banner.md
index 5c0088852e..1db204b125 100644
--- a/skills/fds-build/resources/v3/components/notification-banner.md
+++ b/skills/fds-build/resources/v3/components/notification-banner.md
@@ -90,271 +90,6 @@ import { NotificationBanner } from "@lifesg/react-design-system/notification-ban
 | `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
 | `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
 
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
 ## Rules
 
 -   Place directly below the Navbar — above all page content.
diff --git a/skills/fds-build/resources/v3/components/pagination.md b/skills/fds-build/resources/v3/components/pagination.md
index b75b1b8bb1..f322cfb154 100644
--- a/skills/fds-build/resources/v3/components/pagination.md
+++ b/skills/fds-build/resources/v3/components/pagination.md
@@ -84,116 +84,6 @@ const [pageSize, setPageSize] = useState(10);
 | `value` \* | `number` | —       | —           |
 | `label` \* | `string` | —       | —           |
 
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
 ## Rules
 
 -   `activePage` is 1-based — the first page is `1`, not `0`.
diff --git a/skills/fds-build/resources/v3/components/pill.md b/skills/fds-build/resources/v3/components/pill.md
index 54118a8ec4..0a9fc887f9 100644
--- a/skills/fds-build/resources/v3/components/pill.md
+++ b/skills/fds-build/resources/v3/components/pill.md
@@ -33,46 +33,6 @@ import { Pill } from "@lifesg/react-design-system/pill";
 </Pill>;
 ```
 
-## Props
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
-## Props
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
-## Props — `PillProps`
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
-## Props — `PillProps`
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
-## Props — `PillProps`
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
 ## Props — `PillProps`
 
 | Prop        | Type            | Default | Description                          |
diff --git a/skills/fds-build/resources/v3/components/popover.md b/skills/fds-build/resources/v3/components/popover.md
index cc1df61a0e..f201a7161f 100644
--- a/skills/fds-build/resources/v3/components/popover.md
+++ b/skills/fds-build/resources/v3/components/popover.md
@@ -73,221 +73,6 @@ import { Button } from "@lifesg/react-design-system/button";
 | `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
 | `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
 
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
 ## Rules
 
 -   Use `withPopover` for most cases — it handles trigger logic automatically.
diff --git a/skills/fds-build/resources/v3/components/progress-indicator.md b/skills/fds-build/resources/v3/components/progress-indicator.md
index 96aa9ae66e..6cc2ddcc3b 100644
--- a/skills/fds-build/resources/v3/components/progress-indicator.md
+++ b/skills/fds-build/resources/v3/components/progress-indicator.md
@@ -34,56 +34,6 @@ const steps = [
 | `className`        | `string`                | —       | —                                                                                                        |
 | `id`               | `string`                | —       | —                                                                                                        |
 
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
 ## Rules
 
 -   `currentIndex` is zero-based — the first step is `0`.
diff --git a/skills/fds-build/resources/v3/components/radio-button.md b/skills/fds-build/resources/v3/components/radio-button.md
index 2d99b432b5..3c0e1a0dcd 100644
--- a/skills/fds-build/resources/v3/components/radio-button.md
+++ b/skills/fds-build/resources/v3/components/radio-button.md
@@ -43,51 +43,6 @@ import { RadioButton } from "@lifesg/react-design-system/radio-button";
 </div>;
 ```
 
-## Props
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
-## Props
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
-## Props — `RadioButtonProps`
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
-## Props — `RadioButtonProps`
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
-## Props — `RadioButtonProps`
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
 ## Props — `RadioButtonProps`
 
 | Prop                    | Type              | Default   | Description                                                                                                             |
diff --git a/skills/fds-build/resources/v3/components/schedule.md b/skills/fds-build/resources/v3/components/schedule.md
index a780729625..fd7490feda 100644
--- a/skills/fds-build/resources/v3/components/schedule.md
+++ b/skills/fds-build/resources/v3/components/schedule.md
@@ -8,357 +8,6 @@ Import: `import { Schedule } from "@lifesg/react-design-system/schedule"`
 -   `ScheduleSlotProps` — a single bookable timeslot cell
 -   `SchedulePopoverProps` — popover config for a slot
 
-## ScheduleEntityProps
-
-| Prop       | Type                  | Description                          |
-| ---------- | --------------------- | ------------------------------------ |
-| `name` \*  | `string`              | The name of the service or resource  |
-| `slots` \* | `ScheduleSlotProps[]` | Array of time slots for this service |
-| `id`       | `string`              | Identifier for the service entity    |
-
-## ScheduleSlotProps
-
-| Prop            | Type                                                     | Description                                                 |
-| --------------- | -------------------------------------------------------- | ----------------------------------------------------------- |
-| `startTime` \*  | `string`                                                 | Start time (`HH:mm`)                                        |
-| `endTime` \*    | `string`                                                 | End time (`HH:mm`)                                          |
-| `status` \*     | `"booked" \| "available" \| "blocked" \| "pending"`      | Determines slot visual style                                |
-| `date` \*       | `string`                                                 | Date for this timeslot (`YYYY-MM-DD`)                       |
-| `id`            | `string`                                                 | Identifier; passed to `onClick` and `onSlotClick` callbacks |
-| `capacity`      | `number`                                                 | Maximum capacity for this timeslot                          |
-| `booked`        | `number`                                                 | Number of current bookings                                  |
-| `customPopover` | `SchedulePopoverProps`                                   | Popover config for the slot                                 |
-| `onClick`       | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | Per-slot click callback                                     |
-
-## SchedulePopoverProps
-
-| Prop         | Type                                               | Default | Description                                        |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------- |
-| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover              |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered in the popover                    |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Hover delay in milliseconds (`hover` trigger only) |
-| `offset`     | `number`                                           | —       | Offset in px applied to the popover                |
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
 ## Props — `ScheduleEntityProps`
 
 | Prop       | Type                  | Default | Description                                                |
diff --git a/skills/fds-build/resources/v3/components/sidenav.md b/skills/fds-build/resources/v3/components/sidenav.md
index dac2924a3f..e129772477 100644
--- a/skills/fds-build/resources/v3/components/sidenav.md
+++ b/skills/fds-build/resources/v3/components/sidenav.md
@@ -169,261 +169,6 @@ Key wiring notes:
 | `id`        | `string`                 | —       | —                                      |
 | `className` | `string`                 | —       | —                                      |
 
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
 ## Rules
 
 -   Always provide `icon` on `Sidenav.Item` — it is required for the collapsed state.
diff --git a/skills/fds-build/resources/v3/components/singpass-button.md b/skills/fds-build/resources/v3/components/singpass-button.md
index 595ee34ca6..c9809ab886 100644
--- a/skills/fds-build/resources/v3/components/singpass-button.md
+++ b/skills/fds-build/resources/v3/components/singpass-button.md
@@ -2,41 +2,6 @@
 
 Import: `import { SingpassButton } from "@lifesg/react-design-system/singpass-button"`
 
-## Props
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
-## Props
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
-## Props — `SingpassButtonProps`
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
-## Props — `SingpassButtonProps`
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
-## Props — `SingpassButtonProps`
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
 ## Props — `SingpassButtonProps`
 
 | Prop        | Type                      | Default        | Description                                                             |
diff --git a/skills/fds-build/resources/v3/components/smart-app-banner.md b/skills/fds-build/resources/v3/components/smart-app-banner.md
index b8e82add92..7ebe6f9d7e 100644
--- a/skills/fds-build/resources/v3/components/smart-app-banner.md
+++ b/skills/fds-build/resources/v3/components/smart-app-banner.md
@@ -2,141 +2,6 @@
 
 Import: `import { SmartAppBanner } from "@lifesg/react-design-system/smart-app-banner"`
 
-## SmartAppBannerContentProps
-
-| Prop                 | Type     | Default | Description                                                                    |
-| -------------------- | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*           | `string` | —       | Display title                                                                  |
-| `buttonLabel` \*     | `string` | —       | Button text                                                                    |
-| `buttonAriaLabel` \* | `string` | —       | Aria label for the button                                                      |
-| `numberOfStars` \*   | `number` | —       | Stars to display; decimals accepted; `NaN` or negative hides the stars display |
-| `message`            | `string` | —       | Description below the title                                                    |
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
-
 ## Props — `SmartAppBannerProps`
 
 | Prop           | Type                         | Default                                                                    | Description                                                                   |
diff --git a/skills/fds-build/resources/v3/components/tab.md b/skills/fds-build/resources/v3/components/tab.md
index aa46519696..3e4b633a9f 100644
--- a/skills/fds-build/resources/v3/components/tab.md
+++ b/skills/fds-build/resources/v3/components/tab.md
@@ -55,160 +55,39 @@ All direct children of `Tab` must be `Tab.Item`. `Tab.Item` renders both the tab
 | `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
 | `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
 
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
-
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
-
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
-
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
-
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+## Props — `TabContextProps`
+
+| Prop            | Type                                       | Default | Description                                                                                                                                                                                                          |
+| --------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `React.ReactNode`                          | —       | —                                                                                                                                                                                                                    |
+| `initialActive` | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                               |
+| `currentActive` | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes. |
+| `onTabClick`    | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                              |
+
+## Props — `TabListProps`
+
+| Prop                     | Type                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `React.ReactNode`          | —       | —                                                                                                                                                                                                                                      |
+| `fullWidthIndicatorLine` | `boolean`                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet` | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabListItemProps`
+
+| Prop         | Type              | Default | Description                                                                         |
+| ------------ | ----------------- | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*   | `string`          | —       | Text label rendered in the tab link bar for this item.                              |
+| `titleAddon` | `TitleAddonProps` | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `width`      | `string`          | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TabPanelProps`
+
+| Prop          | Type              | Default | Description                                                              |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------------ |
+| `index` \*    | `number`          | —       | Zero-based index identifying which active tab this panel corresponds to. |
+| `children` \* | `React.ReactNode` | —       | —                                                                        |
+| `className`   | `string`          | —       | —                                                                        |
+| `id`          | `string`          | —       | —                                                                        |
 
 ## Rules
 
diff --git a/skills/fds-build/resources/v3/components/tag.md b/skills/fds-build/resources/v3/components/tag.md
index 875fb409c5..bd2baedf88 100644
--- a/skills/fds-build/resources/v3/components/tag.md
+++ b/skills/fds-build/resources/v3/components/tag.md
@@ -43,56 +43,6 @@ import { Tag } from "@lifesg/react-design-system/tag";
 </Tag>;
 ```
 
-## Props
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
-## Props
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
-## Props — `TagProps`
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
-## Props — `TagProps`
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
-## Props — `TagProps`
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
 ## Props — `TagProps`
 
 | Prop           | Type                | Default | Description                                                                                                                                          |
diff --git a/skills/fds-build/resources/v3/components/text-list.md b/skills/fds-build/resources/v3/components/text-list.md
index 6b13b0f169..cc8e8f826b 100644
--- a/skills/fds-build/resources/v3/components/text-list.md
+++ b/skills/fds-build/resources/v3/components/text-list.md
@@ -38,131 +38,6 @@ Use for semantic list content. For navigation links, use `LinkList` instead.
 | `id`           | `string`                         | —       | —                                                                                                                                                                |
 | `className`    | `string`                         | —       | —                                                                                                                                                                |
 
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
 ## Rules
 
 -   Children must be `<li>` elements.
diff --git a/skills/fds-build/resources/v3/components/time-slot-bar-week.md b/skills/fds-build/resources/v3/components/time-slot-bar-week.md
index 92ebaf1c1d..7a5318eafc 100644
--- a/skills/fds-build/resources/v3/components/time-slot-bar-week.md
+++ b/skills/fds-build/resources/v3/components/time-slot-bar-week.md
@@ -35,131 +35,6 @@ Import: `import { TimeSlotBarWeek } from "@lifesg/react-design-system/time-slot-
 | `styleType`          | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
 | `backgroundColor2`   | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
 
-## Props
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `TimeSlotBarWeekProps`
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `TimeSlotBarWeekProps`
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `TimeSlotBarWeekProps`
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
 ## Props — `TimeSlotBarWeekProps`
 
 | Prop                      | Type                                           | Default    | Description                                                                                           |
diff --git a/skills/fds-build/resources/v3/components/time-slot-bar.md b/skills/fds-build/resources/v3/components/time-slot-bar.md
index 75b26b7924..e8f366f749 100644
--- a/skills/fds-build/resources/v3/components/time-slot-bar.md
+++ b/skills/fds-build/resources/v3/components/time-slot-bar.md
@@ -55,168 +55,3 @@ Import: `import { TimeSlotBar } from "@lifesg/react-design-system/time-slot-bar"
 | `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
 | `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
 | `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
diff --git a/skills/fds-build/resources/v3/components/time-slot-week-view.md b/skills/fds-build/resources/v3/components/time-slot-week-view.md
index 69f44f97fe..9dc74a2177 100644
--- a/skills/fds-build/resources/v3/components/time-slot-week-view.md
+++ b/skills/fds-build/resources/v3/components/time-slot-week-view.md
@@ -63,146 +63,6 @@ Import: `import { TimeSlotWeekView } from "@lifesg/react-design-system/time-slot
 | `year` \*  | `number`                                            | —       | —                                                                         |
 | `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
 
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
 ## Rules
 
 -   `slots` is mandatory.
diff --git a/skills/fds-build/resources/v3/components/timeline.md b/skills/fds-build/resources/v3/components/timeline.md
index 824f16599f..5efdb5c83e 100644
--- a/skills/fds-build/resources/v3/components/timeline.md
+++ b/skills/fds-build/resources/v3/components/timeline.md
@@ -52,121 +52,6 @@ Use to communicate a process, application history, or sequence of steps. Use the
 | `id`                         | `string`              | —       | —                                                                                                   |
 | `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
 
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
 ## Rules
 
 -   The first item defaults to `variant="current"` and subsequent items default to `variant="upcoming-active"` when `variant` is not specified.
diff --git a/skills/fds-build/resources/v3/components/timetable.md b/skills/fds-build/resources/v3/components/timetable.md
index 8537344ad9..1a74d42025 100644
--- a/skills/fds-build/resources/v3/components/timetable.md
+++ b/skills/fds-build/resources/v3/components/timetable.md
@@ -30,15 +30,6 @@ Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
 | `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                  | —       | Custom style attributes; falls back to default row bar colors      |
 | `onClick`             | `(data: TimeTableRowCellData, e: React.MouseEvent) => void`     | —       | Called when the cell is clicked                                    |
 
-## TimeTablePopoverProps
-
-| Prop         | Type                                               | Default | Description                            |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------- |
-| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover  |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Popover content                        |
-| `delay`      | `{ open: number, close: number }`                  | —       | Hover delay in ms (hover trigger only) |
-| `offset`     | `number`                                           | —       | Offset in px for the popover           |
-
 ## TimeTableCellStyleAttributes
 
 | Prop                      | Type                                           | Description                                                                      |
@@ -127,396 +118,6 @@ Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
 | `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
 | `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
 
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
 ## Rules
 
 -   Do not combine `onClick` on a cell with a `trigger="click"` popover on the same cell — they conflict.
diff --git a/skills/fds-build/resources/v3/components/toast.md b/skills/fds-build/resources/v3/components/toast.md
index 6f264dd4b5..82c044c2a9 100644
--- a/skills/fds-build/resources/v3/components/toast.md
+++ b/skills/fds-build/resources/v3/components/toast.md
@@ -57,106 +57,6 @@ import { Toast } from "@lifesg/react-design-system/toast";
 | `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
 | `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
 
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
 ## Rules
 
 -   `autoDismissTime` only takes effect when `autoDismiss` is `true`.
diff --git a/skills/fds-build/resources/v3/components/toggle.md b/skills/fds-build/resources/v3/components/toggle.md
index cd26b36c98..73d1b055bb 100644
--- a/skills/fds-build/resources/v3/components/toggle.md
+++ b/skills/fds-build/resources/v3/components/toggle.md
@@ -76,175 +76,6 @@ import { Form } from "@lifesg/react-design-system/form";
 | `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
 | `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
 
-## CompositeSectionProps
-
-| Prop              | Type                      | Default | Description                                                      |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------- |
-| `children`        | `string \| JSX.Element`   | —       | Contents of the subsection — **required**                        |
-| `collapsible`     | `boolean`                 | `true`  | Whether the subsection is collapsible                            |
-| `initialExpanded` | `boolean`                 | —       | Initial expanded state — only applies when `collapsible` is true |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown when the subsection is collapsed                    |
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
 ## Rules
 
 -   `children` (main label) is mandatory.
diff --git a/skills/fds-build/resources/v3/components/typography.md b/skills/fds-build/resources/v3/components/typography.md
index e15951cda3..ef489dbe6f 100644
--- a/skills/fds-build/resources/v3/components/typography.md
+++ b/skills/fds-build/resources/v3/components/typography.md
@@ -47,76 +47,6 @@ import { Typography } from "@lifesg/react-design-system/typography";
 </>;
 ```
 
-## Props
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `TypographyLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `TypographyProps`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `TypographyLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `TypographyProps`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `TypographyLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `TypographyProps`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
 ## Props — `TypographyLinkProps`
 
 | Prop             | Type                       | Default     | Description                                                                                                   |
diff --git a/skills/fds-build/resources/v3/components/uneditable-section.md b/skills/fds-build/resources/v3/components/uneditable-section.md
index e6f316e63d..deb443a0e0 100644
--- a/skills/fds-build/resources/v3/components/uneditable-section.md
+++ b/skills/fds-build/resources/v3/components/uneditable-section.md
@@ -70,221 +70,6 @@ import { UneditableSection } from "@lifesg/react-design-system/uneditable-sectio
 | `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
 | `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
 
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
 ## Rules
 
 -   Always supply `items` with a `label` and `value` for each field.
diff --git a/skills/fds-build/resources/v4/components/accordion.md b/skills/fds-build/resources/v4/components/accordion.md
index b758a4edf2..1b33b0c5a0 100644
--- a/skills/fds-build/resources/v4/components/accordion.md
+++ b/skills/fds-build/resources/v4/components/accordion.md
@@ -74,7 +74,7 @@ const ControlledExample = () => (
 | Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
 | ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
+| `title`                  | `string \| JSX.Element`          | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
 | `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
 | `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
 | `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
@@ -85,209 +85,16 @@ const ControlledExample = () => (
 
 ## Props — `AccordionItemProps`
 
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionItemHandle`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionItemHandle`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionItemHandle`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string`                         | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop          | Type                           | Default | Description                                                                                                                                                                                               |
-| ------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*    | `string \| JSX.Element`        | —       | —                                                                                                                                                                                                         |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                                                                                                                                         |
-| `expanded`    | `boolean`                      | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item. |
-| `id`          | `string`                       | —       | —                                                                                                                                                                                                         |
-| `className`   | `string`                       | —       | —                                                                                                                                                                                                         |
-| `type`        | `AccordionItemType`            | —       | Visual size variant for the accordion item.                                                                                                                                                               |
-| `collapsible` | `boolean`                      | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                 |
+| Prop             | Type                            | Default | Description                                                                                                                                                                                                                                                                               |
+| ---------------- | ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*       | `string \| JSX.Element`         | —       | —                                                                                                                                                                                                                                                                                         |
+| `children` \*    | `JSX.Element \| JSX.Element[]`  | —       | —                                                                                                                                                                                                                                                                                         |
+| `expanded`       | `boolean`                       | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item.                                                                                 |
+| `id`             | `string`                        | —       | —                                                                                                                                                                                                                                                                                         |
+| `className`      | `string`                        | —       | —                                                                                                                                                                                                                                                                                         |
+| `type`           | `AccordionItemType`             | —       | Visual size variant for the accordion item.                                                                                                                                                                                                                                               |
+| `collapsible`    | `boolean`                       | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                                                                                                 |
+| `onExpandChange` | `((expanded: boolean) => void)` | —       | Called when the user toggles this item or the parent "Show all" / "Hide all" button fires. When provided, the item enters **controlled mode** — the caller must update the `expanded` prop in response. Without this prop, the item manages its own state internally (uncontrolled mode). |
 
 ## Props — `AccordionItemApi`
 
diff --git a/skills/fds-build/resources/v4/components/alert.md b/skills/fds-build/resources/v4/components/alert.md
index df2769f74e..3142159a30 100644
--- a/skills/fds-build/resources/v4/components/alert.md
+++ b/skills/fds-build/resources/v4/components/alert.md
@@ -27,66 +27,6 @@ import { Alert } from "@lifesg/react-design-system/alert";
 </Alert>;
 ```
 
-## Props
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
-## Props
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
-## Props — `AlertProps`
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
-## Props — `AlertProps`
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
-## Props — `AlertProps`
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
 ## Props — `AlertProps`
 
 | Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
diff --git a/skills/fds-build/resources/v4/components/animation.md b/skills/fds-build/resources/v4/components/animation.md
index 07feac889d..55ac88341e 100644
--- a/skills/fds-build/resources/v4/components/animation.md
+++ b/skills/fds-build/resources/v4/components/animation.md
@@ -16,48 +16,3 @@ Import: `import { Animation } from "@lifesg/react-design-system/animation"`
 | `id`        | `string`                                                                  | —       | —                                                        |
 | `className` | `string`                                                                  | —       | —                                                        |
 | `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
-
-## Props — `AnimationProps`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `id`        | `string` | —       | —           |
-| `className` | `string` | —       | —           |
-
-## Props — `CustomisableAnimationProps`
-
-| Prop        | Type                                                                      | Default | Description                                              |
-| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `id`        | `string`                                                                  | —       | —                                                        |
-| `className` | `string`                                                                  | —       | —                                                        |
-| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
-
-## Props — `AnimationProps`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `id`        | `string` | —       | —           |
-| `className` | `string` | —       | —           |
-
-## Props — `CustomisableAnimationProps`
-
-| Prop        | Type                                                                      | Default | Description                                              |
-| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `id`        | `string`                                                                  | —       | —                                                        |
-| `className` | `string`                                                                  | —       | —                                                        |
-| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
-
-## Props — `AnimationProps`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `id`        | `string` | —       | —           |
-| `className` | `string` | —       | —           |
-
-## Props — `CustomisableAnimationProps`
-
-| Prop        | Type                                                                      | Default | Description                                              |
-| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `id`        | `string`                                                                  | —       | —                                                        |
-| `className` | `string`                                                                  | —       | —                                                        |
-| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
diff --git a/skills/fds-build/resources/v4/components/avatar.md b/skills/fds-build/resources/v4/components/avatar.md
index bb553c1561..def3ad46c4 100644
--- a/skills/fds-build/resources/v4/components/avatar.md
+++ b/skills/fds-build/resources/v4/components/avatar.md
@@ -2,41 +2,6 @@
 
 Import: `import { Avatar } from "@lifesg/react-design-system/avatar"`
 
-## Props
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
-
-## Props
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
-
-## Props — `AvatarProps`
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
-
-## Props — `AvatarProps`
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
-
-## Props — `AvatarProps`
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
-
 ## Props — `AvatarProps`
 
 | Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
diff --git a/skills/fds-build/resources/v4/components/badge.md b/skills/fds-build/resources/v4/components/badge.md
index 14a93a1fd0..b6a08e7cc8 100644
--- a/skills/fds-build/resources/v4/components/badge.md
+++ b/skills/fds-build/resources/v4/components/badge.md
@@ -2,56 +2,6 @@
 
 Import: `import { Badge } from "@lifesg/react-design-system/badge"`
 
-## Props
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
-## Props
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
-## Props — `BadgeProps`
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
-## Props — `BadgeProps`
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
-## Props — `BadgeProps`
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
 ## Props — `BadgeProps`
 
 | Prop          | Type               | Default   | Description                                                                                                                                                                                           |
diff --git a/skills/fds-build/resources/v4/components/box-container.md b/skills/fds-build/resources/v4/components/box-container.md
index a8f27fbcd0..a0cee68541 100644
--- a/skills/fds-build/resources/v4/components/box-container.md
+++ b/skills/fds-build/resources/v4/components/box-container.md
@@ -47,121 +47,6 @@ Use for a single collapsible panel displaying form data or structured content 
 | `id`                    | `string`                          | —         | —                                                                                                                                                       |
 | `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
 
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
 ## Rules
 
 -   Use `displayState` to indicate section-level status — not as a substitute for inline field errors.
diff --git a/skills/fds-build/resources/v4/components/breadcrumb.md b/skills/fds-build/resources/v4/components/breadcrumb.md
index a3f549cb30..bae6aa4b34 100644
--- a/skills/fds-build/resources/v4/components/breadcrumb.md
+++ b/skills/fds-build/resources/v4/components/breadcrumb.md
@@ -51,96 +51,6 @@ import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
 | `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
 | `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
 
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
 ## Rules
 
 -   Always place the current page last in `links` — omit `href` on the last item.
diff --git a/skills/fds-build/resources/v4/components/button.md b/skills/fds-build/resources/v4/components/button.md
index b6832c8337..10f8ad5d19 100644
--- a/skills/fds-build/resources/v4/components/button.md
+++ b/skills/fds-build/resources/v4/components/button.md
@@ -4,18 +4,13 @@ Import: `import { Button } from "@lifesg/react-design-system/button"`
 
 ## When to use
 
-```
-┌─ "Which button component?"
-│
-├─ Icon only (no text)?
-│  └─ IconButton — aria-label required
-│
-├─ Text + icon together?
-│  └─ ButtonWithIcon — icon left (default) or right for directional actions
-│
-└─ Text only?
-   └─ Button
-```
+`Button` handles all button variants in v4 — there are no separate `IconButton` or `ButtonWithIcon` components:
+
+| Need                | Usage                                                            |
+| ------------------- | ---------------------------------------------------------------- |
+| Text only           | `<Button>Label</Button>`                                         |
+| Text + icon         | `<Button icon={<Icon />}>Label</Button>` — icon defaults to left |
+| Icon only (no text) | `<Button icon={<Icon />} aria-label="..." />` — renders square   |
 
 ## Size variants
 
@@ -60,66 +55,6 @@ import { Button } from "@lifesg/react-design-system/button";
 | `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
 | `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
 
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
 ## Rules
 
 -   `styleType` is mandatory.
diff --git a/skills/fds-build/resources/v4/components/calendar.md b/skills/fds-build/resources/v4/components/calendar.md
index 9c32e3bcd0..4bdc7d2dee 100644
--- a/skills/fds-build/resources/v4/components/calendar.md
+++ b/skills/fds-build/resources/v4/components/calendar.md
@@ -55,25 +55,6 @@ const MultiDateCalendar = () => {
 };
 ```
 
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
 ## YearMonthDisplay
 
 | Prop    | Type     | Description                           |
@@ -100,133 +81,6 @@ const MultiDateCalendar = () => {
 | `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
 | `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
 
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
-## Props — `CalendarProps`
-
-| Prop                       | Type                                  | Default    | Description                                                                                           |
-| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —          | —                                                                                                     |
-| `id`                       | `string`                              | —          | —                                                                                                     |
-| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
-| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
-| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
-| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
-| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
-
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
-## Props — `CalendarProps`
-
-| Prop                       | Type                                  | Default    | Description                                                                                           |
-| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —          | —                                                                                                     |
-| `id`                       | `string`                              | —          | —                                                                                                     |
-| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
-| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
-| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
-| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
-| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
-
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
-## Props — `CalendarProps`
-
-| Prop                       | Type                                  | Default    | Description                                                                                           |
-| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —          | —                                                                                                     |
-| `id`                       | `string`                              | —          | —                                                                                                     |
-| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
-| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
-| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
-| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
-| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
-
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
 ## Props — `CalendarProps`
 
 | Prop                       | Type                                  | Default    | Description                                                                                           |
diff --git a/skills/fds-build/resources/v4/components/checkbox.md b/skills/fds-build/resources/v4/components/checkbox.md
index 9fbbc7826b..bf98ce7a78 100644
--- a/skills/fds-build/resources/v4/components/checkbox.md
+++ b/skills/fds-build/resources/v4/components/checkbox.md
@@ -38,51 +38,6 @@ import { Checkbox } from "@lifesg/react-design-system/checkbox";
 | `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
 | `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
 
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
 ## Rules
 
 -   Always pair with a visible label — wrap in `<label>` or use `aria-label`.
diff --git a/skills/fds-build/resources/v4/components/countdown-timer.md b/skills/fds-build/resources/v4/components/countdown-timer.md
index dd6f2c040c..8d0791b053 100644
--- a/skills/fds-build/resources/v4/components/countdown-timer.md
+++ b/skills/fds-build/resources/v4/components/countdown-timer.md
@@ -18,54 +18,3 @@ Import: `import { CountdownTimer } from "@lifesg/react-design-system/countdown-t
 | `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
 | `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
 | `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
-
-## Props
-
-| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
-| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
-| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
-| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
-| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
-| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
-| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
-| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
-| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
-| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
-| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
-| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
-| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
-
-## Props
-
-| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
-| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
-| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
-| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
-| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
-| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
-| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
-| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
-| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
-| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
-| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
-| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
-| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
-
-## Props
-
-| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
-| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
-| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
-| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
-| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
-| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
-| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
-| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
-| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
-| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
-| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
-| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
-| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
diff --git a/skills/fds-build/resources/v4/components/data-table.md b/skills/fds-build/resources/v4/components/data-table.md
index 33586184db..b99831d0f3 100644
--- a/skills/fds-build/resources/v4/components/data-table.md
+++ b/skills/fds-build/resources/v4/components/data-table.md
@@ -84,38 +84,6 @@ const Example = () => {
 };
 ```
 
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
 ## HeaderItemProps
 
 | Prop          | Type                        | Default | Description                                                            |
@@ -126,141 +94,6 @@ const Example = () => {
 | `style`       | `CSSProperties`             | —       | Custom styles for the column header cell                               |
 | `keyColumn`   | `boolean`                   | —       | Marks this column as descriptive for screen reader row checkbox labels |
 
-## RowProps
-
-| Prop         | Type                                                                           | Default | Description                             |
-| ------------ | ------------------------------------------------------------------------------ | ------- | --------------------------------------- |
-| `id` \*      | `string`                                                                       | —       | Row id                                  |
-| `[fieldKey]` | `string \| number \| React.ReactNode \| (row, renderProps) => React.ReactNode` | —       | Other properties on the row item object |
-
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
 ## Props — `DataTableProps`
 
 | Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
diff --git a/skills/fds-build/resources/v4/components/date-navigator.md b/skills/fds-build/resources/v4/components/date-navigator.md
index ddba7852ef..88671722d8 100644
--- a/skills/fds-build/resources/v4/components/date-navigator.md
+++ b/skills/fds-build/resources/v4/components/date-navigator.md
@@ -20,96 +20,6 @@ Import: `import { DateNavigator } from "@lifesg/react-design-system/date-navigat
 | `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
 | `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
 
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
 ## Rules
 
 -   Only override `dropdownRootNode` if you need the dropdown to share a stacking context with a scroll container — may cause z-index issues.
diff --git a/skills/fds-build/resources/v4/components/divider.md b/skills/fds-build/resources/v4/components/divider.md
index 5db1ba48ed..a1e8ae18c3 100644
--- a/skills/fds-build/resources/v4/components/divider.md
+++ b/skills/fds-build/resources/v4/components/divider.md
@@ -2,86 +2,6 @@
 
 Import: `import { Divider } from "@lifesg/react-design-system/divider"`
 
-## Props
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
-## Props
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
-## Props — `DividerProps`
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
-## Props — `DividerProps`
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
-## Props — `DividerProps`
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
 ## Props — `DividerProps`
 
 | Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
diff --git a/skills/fds-build/resources/v4/components/drawer.md b/skills/fds-build/resources/v4/components/drawer.md
index 4875195819..551c385163 100644
--- a/skills/fds-build/resources/v4/components/drawer.md
+++ b/skills/fds-build/resources/v4/components/drawer.md
@@ -17,7 +17,7 @@ Do not use for:
 import { useState } from "react";
 import { Drawer } from "@lifesg/react-design-system/drawer";
 import { Button } from "@lifesg/react-design-system/button";
-import { Text } from "@lifesg/react-design-system/text";
+import { Typography } from "@lifesg/react-design-system/typography";
 
 const FilterDrawer = () => {
     const [show, setShow] = useState(false);
@@ -26,9 +26,7 @@ const FilterDrawer = () => {
 
     return (
         <>
-            <Button.Default onClick={() => setShow(true)}>
-                Open filters
-            </Button.Default>
+            <Button onClick={() => setShow(true)}>Open filters</Button>
 
             <Drawer
                 show={show}
@@ -37,15 +35,15 @@ const FilterDrawer = () => {
                 onOverlayClick={handleClose}
             >
                 <div style={{ padding: "1.5rem" }}>
-                    <Text.H4 style={{ marginBottom: "0.75rem" }}>
+                    <Typography.HeadingMD style={{ marginBottom: "0.75rem" }}>
                         Category
-                    </Text.H4>
-                    <Text.Body style={{ marginBottom: "2rem" }}>
+                    </Typography.HeadingMD>
+                    <Typography.BodyBL style={{ marginBottom: "2rem" }}>
                         Filter content goes here.
-                    </Text.Body>
-                    <Button.Default styleType="secondary" onClick={handleClose}>
+                    </Typography.BodyBL>
+                    <Button styleType="secondary" onClick={handleClose}>
                         Close
-                    </Button.Default>
+                    </Button>
                 </div>
             </Drawer>
         </>
@@ -65,66 +63,6 @@ const FilterDrawer = () => {
 | `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
 | `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
 
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
 ## Rules
 
 -   Always provide `onClose` so users can dismiss the panel via the close button.
@@ -135,5 +73,5 @@ const FilterDrawer = () => {
 
 ## Anti-patterns
 
--   Do not use the Drawer for full forms — use a dedicated page or Modal instead.
+-   Do not use the Drawer for full forms — use a dedicated page or ModalV2 instead.
 -   Do not omit `onClose` — users must have a way to dismiss the panel.
diff --git a/skills/fds-build/resources/v4/components/error-display.md b/skills/fds-build/resources/v4/components/error-display.md
index 52dace764a..78eac167b9 100644
--- a/skills/fds-build/resources/v4/components/error-display.md
+++ b/skills/fds-build/resources/v4/components/error-display.md
@@ -70,44 +70,6 @@ import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
 />;
 ```
 
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
 ## MaintenanceAdditionalAttributes
 
 | Prop            | Type     | Default | Description                            |
@@ -158,158 +120,6 @@ import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
 | `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
 | `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
 
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
 ## Rules
 
 -   Always use `ErrorDisplay` for error/empty states — never build custom error pages with raw components.
diff --git a/skills/fds-build/resources/v4/components/feedback-rating.md b/skills/fds-build/resources/v4/components/feedback-rating.md
index 769b51d7b4..764958b94b 100644
--- a/skills/fds-build/resources/v4/components/feedback-rating.md
+++ b/skills/fds-build/resources/v4/components/feedback-rating.md
@@ -50,71 +50,6 @@ const RatingWidget = () => {
 | `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
 | `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
 
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
 ## Rules
 
 -   All three props — `rating`, `onRatingChange`, `onSubmit` — are required.
diff --git a/skills/fds-build/resources/v4/components/file-download.md b/skills/fds-build/resources/v4/components/file-download.md
index 95073261ce..e19e6640e5 100644
--- a/skills/fds-build/resources/v4/components/file-download.md
+++ b/skills/fds-build/resources/v4/components/file-download.md
@@ -46,136 +46,6 @@ Import: `import { FileDownload } from "@lifesg/react-design-system/file-download
 | `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
 | `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
 
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
 ## Rules
 
 -   `fileItems` and `onDownload` are required.
diff --git a/skills/fds-build/resources/v4/components/file-upload.md b/skills/fds-build/resources/v4/components/file-upload.md
index cfdb8c14da..a5d2d378c8 100644
--- a/skills/fds-build/resources/v4/components/file-upload.md
+++ b/skills/fds-build/resources/v4/components/file-upload.md
@@ -24,306 +24,12 @@ import { FileUpload } from "@lifesg/react-design-system/file-upload";
 />;
 ```
 
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
 ## Custom labels
 
 | Prop                             | Type     | Default          | Description                                       |
 | -------------------------------- | -------- | ---------------- | ------------------------------------------------- |
 | `customLabels.uploadButtonLabel` | `string` | `"Upload files"` | Label of the button that triggers the file dialog |
 
-## FileItemProps
-
-| Prop                    | Type                        | Required | Description                              |
-| ----------------------- | --------------------------- | -------- | ---------------------------------------- |
-| `id`                    | `string`                    | Yes      | Unique identifier for the file           |
-| `name`                  | `string`                    | Yes      | File name displayed in the list          |
-| `type`                  | `string`                    | Yes      | MIME type of the file                    |
-| `size`                  | `number`                    | Yes      | File size in bytes                       |
-| `description`           | `string`                    | —        | Alt text or description for the file     |
-| `progress`              | `number`                    | —        | Upload progress from 0 to 1              |
-| `errorMessage`          | `string \| React.ReactNode` | —        | Per-file error message                   |
-| `thumbnailImageDataUrl` | `string`                    | —        | Thumbnail data URL rendered for the file |
-| `truncateText`          | `boolean`                   | `true`   | Truncates long file names                |
-
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
 ## Props — `FileItemProps`
 
 | Prop                    | Type                        | Default | Description                                                                                                                                                                 |
diff --git a/skills/fds-build/resources/v4/components/filter.md b/skills/fds-build/resources/v4/components/filter.md
index 05d091a816..38bd0cc470 100644
--- a/skills/fds-build/resources/v4/components/filter.md
+++ b/skills/fds-build/resources/v4/components/filter.md
@@ -162,506 +162,6 @@ Key points:
 
 ## Props — `FilterProps`
 
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
 | Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
 | ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
diff --git a/skills/fds-build/resources/v4/components/footer.md b/skills/fds-build/resources/v4/components/footer.md
index 07e0f7c2e9..036792657b 100644
--- a/skills/fds-build/resources/v4/components/footer.md
+++ b/skills/fds-build/resources/v4/components/footer.md
@@ -75,203 +75,6 @@ import { Footer } from "@lifesg/react-design-system/footer";
 | `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
 | `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
 
-## FooterLinkProps\<T\>
-
-Inherits `TypographyLinkProps`, plus:
-
-| Prop           | Type     | Description                                 |
-| -------------- | -------- | ------------------------------------------- |
-| `data-options` | `T`      | Custom attributes passed to the link object |
-| `data-testid`  | `string` | Test identifier                             |
-
-## DisclaimerLinks
-
-| Prop                  | Type                  | Default    | Description                                                         |
-| --------------------- | --------------------- | ---------- | ------------------------------------------------------------------- |
-| `privacy`             | `TypographyLinkProps` | predefined | Privacy Statement link — text is fixed to "Privacy Statement"       |
-| `termsOfUse`          | `TypographyLinkProps` | predefined | Terms of Use link — text is fixed to "Terms of Use"                 |
-| `reportVulnerability` | `TypographyLinkProps` | predefined | Report Vulnerability link — text is fixed to "Report Vulnerability" |
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
 ## Rules
 
 -   Use `<Footer />` with no props for standard pages — do not add unnecessary props.
diff --git a/skills/fds-build/resources/v4/components/form-date-input.md b/skills/fds-build/resources/v4/components/form-date-input.md
index 0c77fa3b8a..02ada2b211 100644
--- a/skills/fds-build/resources/v4/components/form-date-input.md
+++ b/skills/fds-build/resources/v4/components/form-date-input.md
@@ -26,40 +26,6 @@ import styles from "./MyForm.module.css";
 
 Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class — `max-width` constrains the component without conflicting with its internal `width: 100%`.
 
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
 ## YearMonthDisplay
 
 | Prop    | Type     | Description                       |
@@ -101,142 +67,6 @@ Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-wid
 | `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
 | `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
 
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v4/components/form-date-range-input.md b/skills/fds-build/resources/v4/components/form-date-range-input.md
index 2ea5681e03..2c3690bafb 100644
--- a/skills/fds-build/resources/v4/components/form-date-range-input.md
+++ b/skills/fds-build/resources/v4/components/form-date-range-input.md
@@ -84,43 +84,6 @@ import styles from "./MyForm.module.css";
 }
 ```
 
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
 ## YearMonthDisplay
 
 | Prop    | Type     | Description                       |
@@ -165,154 +128,6 @@ import styles from "./MyForm.module.css";
 | `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
 | `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
 
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v4/components/form-e-signature.md b/skills/fds-build/resources/v4/components/form-e-signature.md
index 4808458372..4e98aa3820 100644
--- a/skills/fds-build/resources/v4/components/form-e-signature.md
+++ b/skills/fds-build/resources/v4/components/form-e-signature.md
@@ -38,121 +38,6 @@ Import: `import { Form } from "@lifesg/react-design-system/form"`
 | `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v4/components/form-input.md b/skills/fds-build/resources/v4/components/form-input.md
index ef36c844c3..ebd534f5ca 100644
--- a/skills/fds-build/resources/v4/components/form-input.md
+++ b/skills/fds-build/resources/v4/components/form-input.md
@@ -45,101 +45,6 @@ import { Form } from "@lifesg/react-design-system/form";
 | `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Set `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
diff --git a/skills/fds-build/resources/v4/components/form-masked-input.md b/skills/fds-build/resources/v4/components/form-masked-input.md
index c46732eb4a..0e430dfc49 100644
--- a/skills/fds-build/resources/v4/components/form-masked-input.md
+++ b/skills/fds-build/resources/v4/components/form-masked-input.md
@@ -17,181 +17,6 @@ Import: `import { Form } from "@lifesg/react-design-system/form"`
 
 ## Props
 
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
-## Props
-
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
-## Props
-
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
-## Props
-
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
-## Props
-
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
-## Props
-
 | Prop                | Type                          | Default          | Description                                                                                                                                         |
 | ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `value`             | `string`                      | —                | —                                                                                                                                                   |
diff --git a/skills/fds-build/resources/v4/components/form-multi-select.md b/skills/fds-build/resources/v4/components/form-multi-select.md
index 20ca52ceba..3923e0d2a3 100644
--- a/skills/fds-build/resources/v4/components/form-multi-select.md
+++ b/skills/fds-build/resources/v4/components/form-multi-select.md
@@ -44,226 +44,10 @@ const options = [
 | `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
 | `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
 | `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
 | `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
 | `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
 | `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
 | `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
 | `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
 | `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
 | `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
@@ -278,10 +62,6 @@ const options = [
 | `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
 | `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
 | `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
 | `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
 | `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
 | `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
diff --git a/skills/fds-build/resources/v4/components/form-nested-multi-select.md b/skills/fds-build/resources/v4/components/form-nested-multi-select.md
index 8a96fcb24b..9ce4685481 100644
--- a/skills/fds-build/resources/v4/components/form-nested-multi-select.md
+++ b/skills/fds-build/resources/v4/components/form-nested-multi-select.md
@@ -137,211 +137,6 @@ const NestedMultiSelectExample = () => {
 | `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
 | `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
 
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
 ## Rules
 
 -   Every option node must have a unique `key` string — key paths are used for controlled state.
diff --git a/skills/fds-build/resources/v4/components/form-nested-select.md b/skills/fds-build/resources/v4/components/form-nested-select.md
index 0138296c51..b60446a40d 100644
--- a/skills/fds-build/resources/v4/components/form-nested-select.md
+++ b/skills/fds-build/resources/v4/components/form-nested-select.md
@@ -130,216 +130,6 @@ const NestedSelectExample = () => {
 | `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
 | `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
 
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
 ## Rules
 
 -   Every option node must have a unique `key` string — the key path is used for controlled state.
diff --git a/skills/fds-build/resources/v4/components/form-otp-verification.md b/skills/fds-build/resources/v4/components/form-otp-verification.md
index 2513ba3d79..59780485e5 100644
--- a/skills/fds-build/resources/v4/components/form-otp-verification.md
+++ b/skills/fds-build/resources/v4/components/form-otp-verification.md
@@ -156,78 +156,6 @@ Returning a value (or nothing) always signals success and advances the state mac
 | `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
-| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
-| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
-| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
-| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
-| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
-| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
-| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
-| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
-| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
-| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
-| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
-| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
-| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
-| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
-| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
-| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
-| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
-| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
-| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
-| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
-| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
-| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
-| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
-| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
-| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
-| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
-| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
-| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
-| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
-| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
-| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
-| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
-| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
-| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
-| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
-| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
-| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
-| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
-| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
-| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
-| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
-| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
-| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
-| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v4/components/form-phone-number-input.md b/skills/fds-build/resources/v4/components/form-phone-number-input.md
index db5f96025f..345e09b551 100644
--- a/skills/fds-build/resources/v4/components/form-phone-number-input.md
+++ b/skills/fds-build/resources/v4/components/form-phone-number-input.md
@@ -29,43 +29,6 @@ import styles from "./MyForm.module.css";
 
 Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
 
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## PhoneNumberInputValue
 
 | Prop          | Type     | Description                                                                                                             |
@@ -110,154 +73,6 @@ Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-wid
 | `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v4/components/form-predictive-text-input.md b/skills/fds-build/resources/v4/components/form-predictive-text-input.md
index a8babd0d9e..05bf4536ee 100644
--- a/skills/fds-build/resources/v4/components/form-predictive-text-input.md
+++ b/skills/fds-build/resources/v4/components/form-predictive-text-input.md
@@ -89,166 +89,6 @@ Debounce `fetchOptions` internally (e.g. with `setTimeout` or a library) — the
 | `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
 | `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
 
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v4/components/form-select.md b/skills/fds-build/resources/v4/components/form-select.md
index d2dc7aa8f0..175946f3af 100644
--- a/skills/fds-build/resources/v4/components/form-select.md
+++ b/skills/fds-build/resources/v4/components/form-select.md
@@ -43,190 +43,11 @@ const options = [
 | `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
 | `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
 | `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `isOptionDisabled`           | `((item: T) => boolean)`                                      | —             | Returns `true` if the given option should be shown but not selectable.                                                                           |
 | `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
 | `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
 | `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
 | `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
 | `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
 | `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
 | `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
@@ -238,56 +59,6 @@ const options = [
 | `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
 | `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
 | `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
 | `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
 | `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
 | `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
diff --git a/skills/fds-build/resources/v4/components/form-slider.md b/skills/fds-build/resources/v4/components/form-slider.md
index 156a622ea5..cdc911c2f5 100644
--- a/skills/fds-build/resources/v4/components/form-slider.md
+++ b/skills/fds-build/resources/v4/components/form-slider.md
@@ -97,176 +97,6 @@ const BudgetSlider = () => {
 | `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v4/components/form-textarea.md b/skills/fds-build/resources/v4/components/form-textarea.md
index 0560a1f633..d935b0cfe9 100644
--- a/skills/fds-build/resources/v4/components/form-textarea.md
+++ b/skills/fds-build/resources/v4/components/form-textarea.md
@@ -96,96 +96,6 @@ The prop signature is `(maxLength: number, currentValueLength: number) => JSX.El
 | `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Set `rows` to match the expected content length — a short reason field needs fewer rows than a free-text description.
diff --git a/skills/fds-build/resources/v4/components/form-time-range-picker.md b/skills/fds-build/resources/v4/components/form-time-range-picker.md
index 2d02accc9a..9664cf5937 100644
--- a/skills/fds-build/resources/v4/components/form-time-range-picker.md
+++ b/skills/fds-build/resources/v4/components/form-time-range-picker.md
@@ -27,44 +27,6 @@ import styles from "./MyForm.module.css";
 
 Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a CSS Module class.
 
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Combobox-variant-specific props
 
 | Prop                     | Type     | Default | Description                                                  |
@@ -120,158 +82,6 @@ Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-wid
 | `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v4/components/form-timepicker.md b/skills/fds-build/resources/v4/components/form-timepicker.md
index 85088d2e03..ddb91e9be7 100644
--- a/skills/fds-build/resources/v4/components/form-timepicker.md
+++ b/skills/fds-build/resources/v4/components/form-timepicker.md
@@ -61,166 +61,6 @@ Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-wid
 | `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
 | `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
 
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v4/components/form-unit-number-input.md b/skills/fds-build/resources/v4/components/form-unit-number-input.md
index 057e501480..1d9856a220 100644
--- a/skills/fds-build/resources/v4/components/form-unit-number-input.md
+++ b/skills/fds-build/resources/v4/components/form-unit-number-input.md
@@ -121,161 +121,6 @@ import styles from "./MyForm.module.css";
 | `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Always supply a `label` so the field is accessible.
diff --git a/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md b/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
index a15b2145d0..43c2def61d 100644
--- a/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
+++ b/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
@@ -124,346 +124,6 @@ const DocViewer = () => {
 | `width` \*  | `number` | —       | —           |
 | `height` \* | `number` | —       | —           |
 
-## FullscreenImageCarouselItemProps (shared)
-
-| Prop       | Type     | Default | Description                                      |
-| ---------- | -------- | ------- | ------------------------------------------------ |
-| `fileName` | `string` | —       | File name displayed in the info bar at the top   |
-| `fileSize` | `string` | —       | Pre-formatted file size string (e.g. `"2.4 MB"`) |
-
-## FullscreenImageCarouselImageItemProps
-
-| Prop           | Type      | Default | Description                                   |
-| -------------- | --------- | ------- | --------------------------------------------- |
-| `type`         | `"image"` | —       | Discriminant; may be omitted for image items  |
-| `src` \*       | `string`  | —       | The image src                                 |
-| `alt`          | `string`  | —       | Descriptive text for screen readers           |
-| `thumbnailSrc` | `string`  | —       | Thumbnail src; falls back to `src` if omitted |
-
-## FullscreenImageCarouselCustomItemProps
-
-| Prop               | Type                    | Default | Description                                  |
-| ------------------ | ----------------------- | ------- | -------------------------------------------- |
-| `type` \*          | `"custom"`              | —       | Discriminant; must be `"custom"`             |
-| `renderContent` \* | `() => React.ReactNode` | —       | Custom render prop for the full slide area   |
-| `thumbnailSrc`     | `string`                | —       | Thumbnail src; shows placeholder if omitted  |
-| `itemLabel`        | `string`                | —       | Label describing content type (e.g. `"PDF"`) |
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
-## Props — `FullscreenImageCarouselItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
-## Props — `FullscreenImageCarouselItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
-## Props — `FullscreenImageCarouselItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
 ## Props — `FullscreenImageCarouselItemProps`
 
 | Prop            | Type      | Default | Description                                                                              |
diff --git a/skills/fds-build/resources/v4/components/histogram-slider.md b/skills/fds-build/resources/v4/components/histogram-slider.md
index 8275933252..9c7501df95 100644
--- a/skills/fds-build/resources/v4/components/histogram-slider.md
+++ b/skills/fds-build/resources/v4/components/histogram-slider.md
@@ -4,158 +4,6 @@ Import: `import { HistogramSlider } from "@lifesg/react-design-system/histogram-
 
 A range slider with a histogram distribution chart above it — used in filter panels where showing the value distribution helps users pick a range (e.g. price range, age range).
 
-## HistogramBinProps
-
-| Prop       | Type     | Description                                         |
-| ---------- | -------- | --------------------------------------------------- |
-| `count`    | `number` | Number of items in this bin — determines bar height |
-| `minValue` | `number` | Starting value of this bin                          |
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
 ## Props — `HistogramBinProps`
 
 | Prop          | Type     | Default | Description                                              |
diff --git a/skills/fds-build/resources/v4/components/icon.md b/skills/fds-build/resources/v4/components/icon.md
index 96b82ec3e1..2af881a6d9 100644
--- a/skills/fds-build/resources/v4/components/icon.md
+++ b/skills/fds-build/resources/v4/components/icon.md
@@ -164,4 +164,4 @@ Icons come in two variants: outline (default) and filled (`-fill` suffix).
 -   Never guess an icon name — verify it exists in the list above before importing.
 -   `-fill` variants are the solid/filled version; the base name is outline.
 -   Fallback: if no suitable icon exists in `@lifesg/react-icons`, use `@mui/icons-material` as a secondary source.
--   For `IconButton`, always set `aria-label` — the icon alone is not accessible.
+-   For icon-only buttons (`<Button icon={<Icon />} />`), always set `aria-label` — the icon alone is not accessible.
diff --git a/skills/fds-build/resources/v4/components/image-button.md b/skills/fds-build/resources/v4/components/image-button.md
index 8533c75e54..bdcb2bd27c 100644
--- a/skills/fds-build/resources/v4/components/image-button.md
+++ b/skills/fds-build/resources/v4/components/image-button.md
@@ -10,48 +10,3 @@ Import: `import { ImageButton } from "@lifesg/react-design-system/image-button"`
 | `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
 | `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
 | `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
diff --git a/skills/fds-build/resources/v4/components/input.md b/skills/fds-build/resources/v4/components/input.md
index deac96b8df..fb1a741fbc 100644
--- a/skills/fds-build/resources/v4/components/input.md
+++ b/skills/fds-build/resources/v4/components/input.md
@@ -13,83 +13,6 @@ Use `Input` for standalone inputs that do not need a label or error message —
 | `"bordered"` (default) | Standard standalone input — provides clear affordance                                                            |
 | `"no-border"`          | Inline editing or search bars embedded in headers/toolbars where a border would conflict with the surrounding UI |
 
-## Props
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputPartialProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputPartialProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputPartialProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
 ## Props — `InputProps`
 
 | Prop         | Type             | Default    | Description                                                                                                   |
diff --git a/skills/fds-build/resources/v4/components/language-switcher.md b/skills/fds-build/resources/v4/components/language-switcher.md
index cd0671507a..655a6c359e 100644
--- a/skills/fds-build/resources/v4/components/language-switcher.md
+++ b/skills/fds-build/resources/v4/components/language-switcher.md
@@ -2,46 +2,6 @@
 
 Import: `import { LanguageSwitcher } from "@lifesg/react-design-system/language-switcher"`
 
-## Props
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
-## Props
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
-## Props — `LanguageSwitcherProps`
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
-## Props — `LanguageSwitcherProps`
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
-## Props — `LanguageSwitcherProps`
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
 ## Props — `LanguageSwitcherProps`
 
 | Prop               | Type                                         | Default    | Description                                                                |
diff --git a/skills/fds-build/resources/v4/components/layout.md b/skills/fds-build/resources/v4/components/layout.md
index cb72ba3568..766ae91dac 100644
--- a/skills/fds-build/resources/v4/components/layout.md
+++ b/skills/fds-build/resources/v4/components/layout.md
@@ -41,53 +41,6 @@ import { Layout } from "@lifesg/react-design-system/layout";
 | `"flex"`        | Horizontal flexbox layout        |
 | `"flex-column"` | Vertical flexbox layout          |
 
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Breakpoints
 
 | Breakpoint | Min width | Columns | Gutter | Device                |
@@ -190,194 +143,6 @@ Design mobile-first — define base styles for mobile, then override with `MinWi
 | `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
 | `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
 
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
 ## Rules
 
 -   Use CSS Modules for component-level styles — do not use plain inline styles for layout concerns.
diff --git a/skills/fds-build/resources/v4/components/link-list.md b/skills/fds-build/resources/v4/components/link-list.md
index 430d63de1d..471477e898 100644
--- a/skills/fds-build/resources/v4/components/link-list.md
+++ b/skills/fds-build/resources/v4/components/link-list.md
@@ -59,170 +59,12 @@ import { LinkList } from "@lifesg/react-design-system/link-list";
 />;
 ```
 
-## Props
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props — `LinkListItemProps`
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props — `LinkListBaseProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-
-## Props — `LinkListEagerProps`
-
-| Prop       | Type      | Default | Description                                                                                                                                                                               |
-| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
-| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
-
-## Props — `LinkListLazyProps`
-
-| Prop            | Type                          | Default | Description                                                                               |
-| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
-| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
-| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
-
-## Props — `LinkListProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
-
-## Props — `LinkListItemProps`
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props — `LinkListBaseProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-
-## Props — `LinkListEagerProps`
-
-| Prop       | Type      | Default | Description                                                                                                                                                                               |
-| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
-| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
-
-## Props — `LinkListLazyProps`
-
-| Prop            | Type                          | Default | Description                                                                               |
-| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
-| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
-| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
-
-## Props — `LinkListProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
-
-## Props — `LinkListItemProps`
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props — `LinkListBaseProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-
-## Props — `LinkListEagerProps`
-
-| Prop       | Type      | Default | Description                                                                                                                                                                               |
-| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
-| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
-
-## Props — `LinkListLazyProps`
-
-| Prop            | Type                          | Default | Description                                                                               |
-| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
-| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
-| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
-
-## Props — `LinkListProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
-
 ## Props — `LinkListItemProps`
 
 | Prop                   | Type                                                        | Default | Description                                                                                          |
 | ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string`                                                    | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string`                                                    | —       | Secondary text shown below the title.                                                                |
+| `title` \*             | `string \| JSX.Element`                                     | —       | Primary label displayed as the link text.                                                            |
+| `description`          | `string \| JSX.Element`                                     | —       | Secondary text shown below the title.                                                                |
 | `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
 | `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
 | `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
diff --git a/skills/fds-build/resources/v4/components/local-nav.md b/skills/fds-build/resources/v4/components/local-nav.md
index 6bac8af5c2..3fd0b9c364 100644
--- a/skills/fds-build/resources/v4/components/local-nav.md
+++ b/skills/fds-build/resources/v4/components/local-nav.md
@@ -95,226 +95,6 @@ const navItems = [
 | `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
 | `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
 
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
 ## Rules
 
 -   Use `LocalNavMenu` on desktop and `LocalNavDropdown` on tablet/mobile — render both and show/hide with CSS breakpoints.
diff --git a/skills/fds-build/resources/v4/components/masthead.md b/skills/fds-build/resources/v4/components/masthead.md
index 6d477b6be7..815ca760b9 100644
--- a/skills/fds-build/resources/v4/components/masthead.md
+++ b/skills/fds-build/resources/v4/components/masthead.md
@@ -8,36 +8,6 @@ Import: `import { Masthead } from "@lifesg/react-design-system/masthead"`
 | --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
 | `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
 
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
 ## Rules
 
 -   No mandatory props.
diff --git a/skills/fds-build/resources/v4/components/menu.md b/skills/fds-build/resources/v4/components/menu.md
index 61857edcec..251c61e634 100644
--- a/skills/fds-build/resources/v4/components/menu.md
+++ b/skills/fds-build/resources/v4/components/menu.md
@@ -42,7 +42,7 @@ import { Button } from "@lifesg/react-design-system/button";
         </Menu.Content>
     }
 >
-    <Button.Default styleType="secondary">Account</Button.Default>
+    <Button styleType="secondary">Account</Button>
 </Menu>;
 ```
 
@@ -92,236 +92,6 @@ import { Button } from "@lifesg/react-design-system/button";
 | `label`    | `string` | —       | Primary text label.                                |
 | `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
 
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
 ## Rules
 
 -   `Menu` wraps a trigger element as its child — the trigger can be any element (e.g. `Avatar`, `Button`, `NavbarLink`).
diff --git a/skills/fds-build/resources/v4/components/modal.md b/skills/fds-build/resources/v4/components/modal.md
index f9b0d97024..463cbae341 100644
--- a/skills/fds-build/resources/v4/components/modal.md
+++ b/skills/fds-build/resources/v4/components/modal.md
@@ -1,22 +1,24 @@
-# Modal
+# ModalV2
 
-Import: `import { Modal } from "@lifesg/react-design-system/modal"`
+Import: `import { ModalV2 } from "@lifesg/react-design-system/modal-v2"`
 
 ## When to use
 
 Use for focused interactions that interrupt the user's flow — confirmations, detail views, or short multi-field forms that do not warrant a new page.
 
+> **v4 note:** `Modal` is deprecated. Use `ModalV2` — it provides improved scroll behaviour, proper focus management via `@floating-ui/react`, and a composable slot-based API.
+
 ## Sub-components
 
-`Modal`, `Modal.Box`
+`ModalV2`, `ModalV2.Card`, `ModalV2.Header`, `ModalV2.Content`, `ModalV2.Footer`, `ModalV2.CloseButton`
 
 ## Variants
 
-| Use case            | Notes                                                         |
-| ------------------- | ------------------------------------------------------------- |
-| Confirmation dialog | Title, description, and primary/secondary action buttons      |
-| Detail view         | Informational content with a close button                     |
-| Short form          | Minimal fields only; complex forms belong on a dedicated page |
+| Use case            | Structure                                                        |
+| ------------------- | ---------------------------------------------------------------- |
+| Confirmation dialog | `ModalV2.Header` + `ModalV2.Content` + `ModalV2.Footer`          |
+| Detail view         | `ModalV2.Header` (close only, no title) + `ModalV2.Content`      |
+| Short form          | `ModalV2.Header` + `ModalV2.Content` (fields) + `ModalV2.Footer` |
 
 ## Usage
 
@@ -24,9 +26,9 @@ Use for focused interactions that interrupt the user's flow — confirmations, d
 
 ```tsx
 import { useState } from "react";
-import { Modal } from "@lifesg/react-design-system/modal";
+import { ModalV2 } from "@lifesg/react-design-system/modal-v2";
 import { Button } from "@lifesg/react-design-system/button";
-import { Text } from "@lifesg/react-design-system/text";
+import { Typography } from "@lifesg/react-design-system/typography";
 
 const ConfirmDeleteModal = () => {
     const [show, setShow] = useState(false);
@@ -40,185 +42,103 @@ const ConfirmDeleteModal = () => {
 
     return (
         <>
-            <Button.Default onClick={() => setShow(true)}>
-                Delete item
-            </Button.Default>
-
-            <Modal show={show} enableOverlayClick onOverlayClick={handleClose}>
-                <Modal.Box showCloseButton onClose={handleClose}>
-                    <div style={{ padding: "2rem" }}>
-                        <Text.H3 style={{ marginBottom: "0.5rem" }}>
-                            Delete this item?
-                        </Text.H3>
-                        <Text.Body style={{ marginBottom: "1.5rem" }}>
+            <Button onClick={() => setShow(true)}>Delete item</Button>
+
+            <ModalV2
+                show={show}
+                onClose={handleClose}
+                enableOverlayClick
+                onOverlayClick={handleClose}
+            >
+                <ModalV2.Card>
+                    <ModalV2.Header title="Delete this item?" />
+                    <ModalV2.Content>
+                        <Typography.BodyBL>
                             This action cannot be undone.
-                        </Text.Body>
-                        <div style={{ display: "flex", gap: "1rem" }}>
-                            <Button.Default
-                                styleType="secondary"
-                                onClick={handleClose}
-                            >
+                        </Typography.BodyBL>
+                    </ModalV2.Content>
+                    <ModalV2.Footer
+                        primaryButton={
+                            <Button onClick={handleConfirm}>Confirm</Button>
+                        }
+                        secondaryButton={
+                            <Button styleType="secondary" onClick={handleClose}>
                                 Cancel
-                            </Button.Default>
-                            <Button.Default onClick={handleConfirm}>
-                                Confirm
-                            </Button.Default>
-                        </div>
-                    </div>
-                </Modal.Box>
-            </Modal>
+                            </Button>
+                        }
+                    />
+                </ModalV2.Card>
+            </ModalV2>
         </>
     );
 };
 ```
 
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+### Detail view (close button only, no title)
+
+```tsx
+<ModalV2 show={show} onClose={handleClose}>
+    <ModalV2.Card>
+        <ModalV2.Header />
+        <ModalV2.Content>
+            <Typography.BodyBL>Supplementary details here.</Typography.BodyBL>
+        </ModalV2.Content>
+    </ModalV2.Card>
+</ModalV2>
+```
+
+## Props — `ModalV2Props`
+
+| Prop                    | Type                      | Default       | Description                                                                                  |
+| ----------------------- | ------------------------- | ------------- | -------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                       |
+| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. Must be a valid HTML element or a component that forwards a ref.   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal animates in and out.                                          |
+| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop triggers `onOverlayClick`.                             |
+| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                        |
+| `zIndex`                | `number`                  | —             | Z-index applied to the overlay stack.                                                        |
+| `onClose`               | `(() => void)`            | —             | Called when dismissed via the Escape key or close button.                                    |
+| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.              |
+| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the focused element when the modal opens, dismissing the on-screen keyboard on mobile. |
+| `disableInitialFocus`   | `boolean`                 | false         | Disables automatic focus on the modal container when it opens.                               |
+
+## Props — `ModalCardProps`
+
+| Prop          | Type                        | Default | Description                                                                                     |
+| ------------- | --------------------------- | ------- | ----------------------------------------------------------------------------------------------- |
+| `children` \* | `React.ReactNode`           | —       | Slot content — `ModalV2.Header`, `ModalV2.Content`, `ModalV2.Footer`, or `ModalV2.CloseButton`. |
+| `fullscreen`  | `boolean`                   | —       | Expands the card to fill the viewport with no border-radius, padding, or box-shadow.            |
+| `elementRef`  | `React.Ref<HTMLDivElement>` | —       | Ref to the card DOM element.                                                                    |
+
+## Props — `ModalHeaderProps`
+
+| Prop                  | Type                | Default | Description                                        |
+| --------------------- | ------------------- | ------- | -------------------------------------------------- |
+| `title`               | `string`            | —       | Heading text. Omit for a close-button-only header. |
+| `closeButtonPosition` | `"left" \| "right"` | "right" | Which side the close button appears on.            |
+
+## Props — `ModalFooterProps`
+
+| Prop              | Type              | Default | Description                                     |
+| ----------------- | ----------------- | ------- | ----------------------------------------------- |
+| `primaryButton`   | `React.ReactNode` | —       | Node rendered in the primary action position.   |
+| `secondaryButton` | `React.ReactNode` | —       | Node rendered in the secondary action position. |
 
 ## Rules
 
--   Always include `showCloseButton` on `Modal.Box` — the close button is the minimum required exit mechanism.
--   `Modal` handles the overlay and animation. Always nest `Modal.Box` (or a custom content container) inside `Modal`.
--   Fragments are not supported as direct children of `Modal`.
--   Content inside `Modal.Box` scrolls automatically when it exceeds the screen height.
+-   Always pass `onClose` to `ModalV2` — it is used by `ModalV2.Header` / `ModalV2.CloseButton` via context.
+-   Always wrap content in `ModalV2.Card` — it handles internal layout of slots.
+-   Use `ModalV2.Header` (not `ModalV2.CloseButton`) when the modal has a title — the header provides the close button automatically.
+-   Use `ModalV2.CloseButton` only for custom layouts where `ModalV2.Header` is not present.
+-   Pass action buttons to `ModalV2.Footer` via `primaryButton` / `secondaryButton` — do not place them inside `ModalV2.Content`.
+-   Provide `enableOverlayClick` + `onOverlayClick` together to allow overlay dismissal.
 -   Use `animationFrom="bottom"` for mobile-friendly sheet-style modals.
--   Optionally also allow overlay dismissal via `enableOverlayClick` + `onOverlayClick`.
--   Use Typography components for all text inside the modal — not raw HTML elements.
 -   Keep modal content focused — one task or decision per modal.
--   Use illustrations (image above the title) for complex messages to reduce cognitive load; skip them for simple confirmations.
 
 ## Anti-patterns
 
--   Do not use a Fragment as a direct child of `Modal` — use a valid HTML element or a component that forwards a ref.
+-   Do not use the deprecated `Modal` — use `ModalV2`.
+-   Do not pass a Fragment as the direct child of `ModalV2` — use `ModalV2.Card` or a forwardRef component.
+-   Do not put buttons inside `ModalV2.Content` — use `ModalV2.Footer`.
+-   Do not stack modals unless using `zIndex` explicitly.
 -   Do not use modals for complex multi-step forms — navigate to a dedicated page instead.
--   Do not stack modals unless using `zIndex` to manage layering explicitly.
--   Do not omit `showCloseButton` — users must always have a way to exit the modal.
diff --git a/skills/fds-build/resources/v4/components/navbar.md b/skills/fds-build/resources/v4/components/navbar.md
index 77d6872fe0..c904041390 100644
--- a/skills/fds-build/resources/v4/components/navbar.md
+++ b/skills/fds-build/resources/v4/components/navbar.md
@@ -216,732 +216,6 @@ Key points:
 | `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
 | `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
 
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
-## Props — `NavItemProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavbarButtonProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarDrawerApi`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavbarDrawerHandle`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
-## Props — `NavItemProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavbarButtonProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarDrawerApi`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavbarDrawerHandle`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
-## Props — `NavItemProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavbarButtonProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarDrawerApi`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavbarDrawerHandle`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
 ## Props — `NavItemProps`
 
 | Prop          | Type          | Default | Description |
diff --git a/skills/fds-build/resources/v4/components/notification-banner.md b/skills/fds-build/resources/v4/components/notification-banner.md
index 5c0088852e..1db204b125 100644
--- a/skills/fds-build/resources/v4/components/notification-banner.md
+++ b/skills/fds-build/resources/v4/components/notification-banner.md
@@ -90,271 +90,6 @@ import { NotificationBanner } from "@lifesg/react-design-system/notification-ban
 | `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
 | `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
 
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
 ## Rules
 
 -   Place directly below the Navbar — above all page content.
diff --git a/skills/fds-build/resources/v4/components/pagination.md b/skills/fds-build/resources/v4/components/pagination.md
index b75b1b8bb1..f322cfb154 100644
--- a/skills/fds-build/resources/v4/components/pagination.md
+++ b/skills/fds-build/resources/v4/components/pagination.md
@@ -84,116 +84,6 @@ const [pageSize, setPageSize] = useState(10);
 | `value` \* | `number` | —       | —           |
 | `label` \* | `string` | —       | —           |
 
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
 ## Rules
 
 -   `activePage` is 1-based — the first page is `1`, not `0`.
diff --git a/skills/fds-build/resources/v4/components/pill.md b/skills/fds-build/resources/v4/components/pill.md
index 54118a8ec4..0a9fc887f9 100644
--- a/skills/fds-build/resources/v4/components/pill.md
+++ b/skills/fds-build/resources/v4/components/pill.md
@@ -33,46 +33,6 @@ import { Pill } from "@lifesg/react-design-system/pill";
 </Pill>;
 ```
 
-## Props
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
-## Props
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
-## Props — `PillProps`
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
-## Props — `PillProps`
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
-## Props — `PillProps`
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
 ## Props — `PillProps`
 
 | Prop        | Type            | Default | Description                          |
diff --git a/skills/fds-build/resources/v4/components/popover.md b/skills/fds-build/resources/v4/components/popover.md
index cc1df61a0e..aca1778832 100644
--- a/skills/fds-build/resources/v4/components/popover.md
+++ b/skills/fds-build/resources/v4/components/popover.md
@@ -23,10 +23,10 @@ import { Button } from "@lifesg/react-design-system/button";
     /* Preferred: HOC wraps an existing element */
 }
 {
-    withPopover(
-        <Button.Default styleType="link">What is this?</Button.Default>,
-        { content: "This field requires your NRIC number.", trigger: "click" }
-    );
+    withPopover(<Button styleType="link">What is this?</Button>, {
+        content: "This field requires your NRIC number.",
+        trigger: "click",
+    });
 }
 ```
 
@@ -73,221 +73,6 @@ import { Button } from "@lifesg/react-design-system/button";
 | `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
 | `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
 
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
 ## Rules
 
 -   Use `withPopover` for most cases — it handles trigger logic automatically.
diff --git a/skills/fds-build/resources/v4/components/progress-indicator.md b/skills/fds-build/resources/v4/components/progress-indicator.md
index 96aa9ae66e..6cc2ddcc3b 100644
--- a/skills/fds-build/resources/v4/components/progress-indicator.md
+++ b/skills/fds-build/resources/v4/components/progress-indicator.md
@@ -34,56 +34,6 @@ const steps = [
 | `className`        | `string`                | —       | —                                                                                                        |
 | `id`               | `string`                | —       | —                                                                                                        |
 
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
 ## Rules
 
 -   `currentIndex` is zero-based — the first step is `0`.
diff --git a/skills/fds-build/resources/v4/components/radio-button.md b/skills/fds-build/resources/v4/components/radio-button.md
index 2d99b432b5..3c0e1a0dcd 100644
--- a/skills/fds-build/resources/v4/components/radio-button.md
+++ b/skills/fds-build/resources/v4/components/radio-button.md
@@ -43,51 +43,6 @@ import { RadioButton } from "@lifesg/react-design-system/radio-button";
 </div>;
 ```
 
-## Props
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
-## Props
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
-## Props — `RadioButtonProps`
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
-## Props — `RadioButtonProps`
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
-## Props — `RadioButtonProps`
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
 ## Props — `RadioButtonProps`
 
 | Prop                    | Type              | Default   | Description                                                                                                             |
diff --git a/skills/fds-build/resources/v4/components/schedule.md b/skills/fds-build/resources/v4/components/schedule.md
index a780729625..fd7490feda 100644
--- a/skills/fds-build/resources/v4/components/schedule.md
+++ b/skills/fds-build/resources/v4/components/schedule.md
@@ -8,357 +8,6 @@ Import: `import { Schedule } from "@lifesg/react-design-system/schedule"`
 -   `ScheduleSlotProps` — a single bookable timeslot cell
 -   `SchedulePopoverProps` — popover config for a slot
 
-## ScheduleEntityProps
-
-| Prop       | Type                  | Description                          |
-| ---------- | --------------------- | ------------------------------------ |
-| `name` \*  | `string`              | The name of the service or resource  |
-| `slots` \* | `ScheduleSlotProps[]` | Array of time slots for this service |
-| `id`       | `string`              | Identifier for the service entity    |
-
-## ScheduleSlotProps
-
-| Prop            | Type                                                     | Description                                                 |
-| --------------- | -------------------------------------------------------- | ----------------------------------------------------------- |
-| `startTime` \*  | `string`                                                 | Start time (`HH:mm`)                                        |
-| `endTime` \*    | `string`                                                 | End time (`HH:mm`)                                          |
-| `status` \*     | `"booked" \| "available" \| "blocked" \| "pending"`      | Determines slot visual style                                |
-| `date` \*       | `string`                                                 | Date for this timeslot (`YYYY-MM-DD`)                       |
-| `id`            | `string`                                                 | Identifier; passed to `onClick` and `onSlotClick` callbacks |
-| `capacity`      | `number`                                                 | Maximum capacity for this timeslot                          |
-| `booked`        | `number`                                                 | Number of current bookings                                  |
-| `customPopover` | `SchedulePopoverProps`                                   | Popover config for the slot                                 |
-| `onClick`       | `(data: ScheduleSlotProps, e: React.MouseEvent) => void` | Per-slot click callback                                     |
-
-## SchedulePopoverProps
-
-| Prop         | Type                                               | Default | Description                                        |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------- |
-| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover              |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered in the popover                    |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Hover delay in milliseconds (`hover` trigger only) |
-| `offset`     | `number`                                           | —       | Offset in px applied to the popover                |
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
 ## Props — `ScheduleEntityProps`
 
 | Prop       | Type                  | Default | Description                                                |
diff --git a/skills/fds-build/resources/v4/components/sidenav.md b/skills/fds-build/resources/v4/components/sidenav.md
index dac2924a3f..e129772477 100644
--- a/skills/fds-build/resources/v4/components/sidenav.md
+++ b/skills/fds-build/resources/v4/components/sidenav.md
@@ -169,261 +169,6 @@ Key wiring notes:
 | `id`        | `string`                 | —       | —                                      |
 | `className` | `string`                 | —       | —                                      |
 
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
 ## Rules
 
 -   Always provide `icon` on `Sidenav.Item` — it is required for the collapsed state.
diff --git a/skills/fds-build/resources/v4/components/singpass-button.md b/skills/fds-build/resources/v4/components/singpass-button.md
index 595ee34ca6..c9809ab886 100644
--- a/skills/fds-build/resources/v4/components/singpass-button.md
+++ b/skills/fds-build/resources/v4/components/singpass-button.md
@@ -2,41 +2,6 @@
 
 Import: `import { SingpassButton } from "@lifesg/react-design-system/singpass-button"`
 
-## Props
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
-## Props
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
-## Props — `SingpassButtonProps`
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
-## Props — `SingpassButtonProps`
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
-## Props — `SingpassButtonProps`
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
 ## Props — `SingpassButtonProps`
 
 | Prop        | Type                      | Default        | Description                                                             |
diff --git a/skills/fds-build/resources/v4/components/smart-app-banner.md b/skills/fds-build/resources/v4/components/smart-app-banner.md
index b8e82add92..7ebe6f9d7e 100644
--- a/skills/fds-build/resources/v4/components/smart-app-banner.md
+++ b/skills/fds-build/resources/v4/components/smart-app-banner.md
@@ -2,141 +2,6 @@
 
 Import: `import { SmartAppBanner } from "@lifesg/react-design-system/smart-app-banner"`
 
-## SmartAppBannerContentProps
-
-| Prop                 | Type     | Default | Description                                                                    |
-| -------------------- | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*           | `string` | —       | Display title                                                                  |
-| `buttonLabel` \*     | `string` | —       | Button text                                                                    |
-| `buttonAriaLabel` \* | `string` | —       | Aria label for the button                                                      |
-| `numberOfStars` \*   | `number` | —       | Stars to display; decimals accepted; `NaN` or negative hides the stars display |
-| `message`            | `string` | —       | Description below the title                                                    |
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
-
 ## Props — `SmartAppBannerProps`
 
 | Prop           | Type                         | Default                                                                    | Description                                                                   |
diff --git a/skills/fds-build/resources/v4/components/tab.md b/skills/fds-build/resources/v4/components/tab.md
index aa46519696..3e4b633a9f 100644
--- a/skills/fds-build/resources/v4/components/tab.md
+++ b/skills/fds-build/resources/v4/components/tab.md
@@ -55,160 +55,39 @@ All direct children of `Tab` must be `Tab.Item`. `Tab.Item` renders both the tab
 | `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
 | `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
 
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
-
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
-
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
-
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
-
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
+## Props — `TabContextProps`
+
+| Prop            | Type                                       | Default | Description                                                                                                                                                                                                          |
+| --------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*   | `React.ReactNode`                          | —       | —                                                                                                                                                                                                                    |
+| `initialActive` | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                               |
+| `currentActive` | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes. |
+| `onTabClick`    | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                              |
+
+## Props — `TabListProps`
+
+| Prop                     | Type                       | Default | Description                                                                                                                                                                                                                            |
+| ------------------------ | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \*            | `React.ReactNode`          | —       | —                                                                                                                                                                                                                                      |
+| `fullWidthIndicatorLine` | `boolean`                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
+| `fadeColor`              | `string[] \| FadeColorSet` | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
+
+## Props — `TabListItemProps`
+
+| Prop         | Type              | Default | Description                                                                         |
+| ------------ | ----------------- | ------- | ----------------------------------------------------------------------------------- |
+| `title` \*   | `string`          | —       | Text label rendered in the tab link bar for this item.                              |
+| `titleAddon` | `TitleAddonProps` | —       | Optional addon element rendered alongside the tab title in the link bar.            |
+| `width`      | `string`          | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
+
+## Props — `TabPanelProps`
+
+| Prop          | Type              | Default | Description                                                              |
+| ------------- | ----------------- | ------- | ------------------------------------------------------------------------ |
+| `index` \*    | `number`          | —       | Zero-based index identifying which active tab this panel corresponds to. |
+| `children` \* | `React.ReactNode` | —       | —                                                                        |
+| `className`   | `string`          | —       | —                                                                        |
+| `id`          | `string`          | —       | —                                                                        |
 
 ## Rules
 
diff --git a/skills/fds-build/resources/v4/components/tag.md b/skills/fds-build/resources/v4/components/tag.md
index 875fb409c5..bd2baedf88 100644
--- a/skills/fds-build/resources/v4/components/tag.md
+++ b/skills/fds-build/resources/v4/components/tag.md
@@ -43,56 +43,6 @@ import { Tag } from "@lifesg/react-design-system/tag";
 </Tag>;
 ```
 
-## Props
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
-## Props
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
-## Props — `TagProps`
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
-## Props — `TagProps`
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
-## Props — `TagProps`
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
 ## Props — `TagProps`
 
 | Prop           | Type                | Default | Description                                                                                                                                          |
diff --git a/skills/fds-build/resources/v4/components/text-list.md b/skills/fds-build/resources/v4/components/text-list.md
index 6b13b0f169..cc8e8f826b 100644
--- a/skills/fds-build/resources/v4/components/text-list.md
+++ b/skills/fds-build/resources/v4/components/text-list.md
@@ -38,131 +38,6 @@ Use for semantic list content. For navigation links, use `LinkList` instead.
 | `id`           | `string`                         | —       | —                                                                                                                                                                |
 | `className`    | `string`                         | —       | —                                                                                                                                                                |
 
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
 ## Rules
 
 -   Children must be `<li>` elements.
diff --git a/skills/fds-build/resources/v4/components/time-slot-bar-week.md b/skills/fds-build/resources/v4/components/time-slot-bar-week.md
index 92ebaf1c1d..7a5318eafc 100644
--- a/skills/fds-build/resources/v4/components/time-slot-bar-week.md
+++ b/skills/fds-build/resources/v4/components/time-slot-bar-week.md
@@ -35,131 +35,6 @@ Import: `import { TimeSlotBarWeek } from "@lifesg/react-design-system/time-slot-
 | `styleType`          | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
 | `backgroundColor2`   | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
 
-## Props
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `TimeSlotBarWeekProps`
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `TimeSlotBarWeekProps`
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `TimeSlotBarWeekProps`
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
 ## Props — `TimeSlotBarWeekProps`
 
 | Prop                      | Type                                           | Default    | Description                                                                                           |
diff --git a/skills/fds-build/resources/v4/components/time-slot-bar.md b/skills/fds-build/resources/v4/components/time-slot-bar.md
index 75b26b7924..e8f366f749 100644
--- a/skills/fds-build/resources/v4/components/time-slot-bar.md
+++ b/skills/fds-build/resources/v4/components/time-slot-bar.md
@@ -55,168 +55,3 @@ Import: `import { TimeSlotBar } from "@lifesg/react-design-system/time-slot-bar"
 | `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
 | `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
 | `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
diff --git a/skills/fds-build/resources/v4/components/time-slot-week-view.md b/skills/fds-build/resources/v4/components/time-slot-week-view.md
index 69f44f97fe..9dc74a2177 100644
--- a/skills/fds-build/resources/v4/components/time-slot-week-view.md
+++ b/skills/fds-build/resources/v4/components/time-slot-week-view.md
@@ -63,146 +63,6 @@ Import: `import { TimeSlotWeekView } from "@lifesg/react-design-system/time-slot
 | `year` \*  | `number`                                            | —       | —                                                                         |
 | `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
 
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
 ## Rules
 
 -   `slots` is mandatory.
diff --git a/skills/fds-build/resources/v4/components/timeline.md b/skills/fds-build/resources/v4/components/timeline.md
index 824f16599f..5efdb5c83e 100644
--- a/skills/fds-build/resources/v4/components/timeline.md
+++ b/skills/fds-build/resources/v4/components/timeline.md
@@ -52,121 +52,6 @@ Use to communicate a process, application history, or sequence of steps. Use the
 | `id`                         | `string`              | —       | —                                                                                                   |
 | `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
 
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
 ## Rules
 
 -   The first item defaults to `variant="current"` and subsequent items default to `variant="upcoming-active"` when `variant` is not specified.
diff --git a/skills/fds-build/resources/v4/components/timetable.md b/skills/fds-build/resources/v4/components/timetable.md
index 8537344ad9..1a74d42025 100644
--- a/skills/fds-build/resources/v4/components/timetable.md
+++ b/skills/fds-build/resources/v4/components/timetable.md
@@ -30,15 +30,6 @@ Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
 | `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                  | —       | Custom style attributes; falls back to default row bar colors      |
 | `onClick`             | `(data: TimeTableRowCellData, e: React.MouseEvent) => void`     | —       | Called when the cell is clicked                                    |
 
-## TimeTablePopoverProps
-
-| Prop         | Type                                               | Default | Description                            |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------- |
-| `trigger` \* | `"click" \| "hover"`                               | —       | Interaction that triggers the popover  |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Popover content                        |
-| `delay`      | `{ open: number, close: number }`                  | —       | Hover delay in ms (hover trigger only) |
-| `offset`     | `number`                                           | —       | Offset in px for the popover           |
-
 ## TimeTableCellStyleAttributes
 
 | Prop                      | Type                                           | Description                                                                      |
@@ -127,396 +118,6 @@ Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
 | `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
 | `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
 
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
 ## Rules
 
 -   Do not combine `onClick` on a cell with a `trigger="click"` popover on the same cell — they conflict.
diff --git a/skills/fds-build/resources/v4/components/toast.md b/skills/fds-build/resources/v4/components/toast.md
index 6f264dd4b5..82c044c2a9 100644
--- a/skills/fds-build/resources/v4/components/toast.md
+++ b/skills/fds-build/resources/v4/components/toast.md
@@ -57,106 +57,6 @@ import { Toast } from "@lifesg/react-design-system/toast";
 | `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
 | `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
 
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
 ## Rules
 
 -   `autoDismissTime` only takes effect when `autoDismiss` is `true`.
diff --git a/skills/fds-build/resources/v4/components/toggle.md b/skills/fds-build/resources/v4/components/toggle.md
index cd26b36c98..73d1b055bb 100644
--- a/skills/fds-build/resources/v4/components/toggle.md
+++ b/skills/fds-build/resources/v4/components/toggle.md
@@ -76,175 +76,6 @@ import { Form } from "@lifesg/react-design-system/form";
 | `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
 | `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
 
-## CompositeSectionProps
-
-| Prop              | Type                      | Default | Description                                                      |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------- |
-| `children`        | `string \| JSX.Element`   | —       | Contents of the subsection — **required**                        |
-| `collapsible`     | `boolean`                 | `true`  | Whether the subsection is collapsible                            |
-| `initialExpanded` | `boolean`                 | —       | Initial expanded state — only applies when `collapsible` is true |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown when the subsection is collapsed                    |
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
 ## Rules
 
 -   `children` (main label) is mandatory.
diff --git a/skills/fds-build/resources/v4/components/typography.md b/skills/fds-build/resources/v4/components/typography.md
index e15951cda3..ef489dbe6f 100644
--- a/skills/fds-build/resources/v4/components/typography.md
+++ b/skills/fds-build/resources/v4/components/typography.md
@@ -47,76 +47,6 @@ import { Typography } from "@lifesg/react-design-system/typography";
 </>;
 ```
 
-## Props
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `TypographyLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `TypographyProps`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `TypographyLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `TypographyProps`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `TypographyLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `TypographyProps`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
 ## Props — `TypographyLinkProps`
 
 | Prop             | Type                       | Default     | Description                                                                                                   |
diff --git a/skills/fds-build/resources/v4/components/uneditable-section.md b/skills/fds-build/resources/v4/components/uneditable-section.md
index e6f316e63d..deb443a0e0 100644
--- a/skills/fds-build/resources/v4/components/uneditable-section.md
+++ b/skills/fds-build/resources/v4/components/uneditable-section.md
@@ -70,221 +70,6 @@ import { UneditableSection } from "@lifesg/react-design-system/uneditable-sectio
 | `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
 | `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
 
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
 ## Rules
 
 -   Always supply `items` with a `label` and `value` for each field.
diff --git a/skills/fds-build/resources/v4/patterns/states.md b/skills/fds-build/resources/v4/patterns/states.md
index 4073b5f04a..2418ae7f57 100644
--- a/skills/fds-build/resources/v4/patterns/states.md
+++ b/skills/fds-build/resources/v4/patterns/states.md
@@ -41,9 +41,9 @@ Render placeholder blocks matching the shape of real content. Use a CSS `pulse`
 ### Button loading (inline async)
 
 ```tsx
-<Button.Default type="submit" loading={isSubmitting} disabled={isSubmitting}>
+<Button type="submit" loading={isSubmitting} disabled={isSubmitting}>
     {isSubmitting ? "Submitting..." : "Submit"}
-</Button.Default>
+</Button>
 ```
 
 Always combine `loading` + `disabled` during async to prevent double-submission.
@@ -70,13 +70,13 @@ import { Spacing } from "@lifesg/react-design-system/theme";
     <Typography.BodyBL>
         Get started by creating your first item
     </Typography.BodyBL>
-    <Button.Default
+    <Button
         icon={<PlusIcon />}
         style={{ marginTop: Spacing["spacing-24"] }}
         onClick={handleCreate}
     >
         Create item
-    </Button.Default>
+    </Button>
 </Card>;
 ```
 
@@ -91,13 +91,13 @@ import { Spacing } from "@lifesg/react-design-system/theme";
 >
     <Typography.HeadingSM>No results found</Typography.HeadingSM>
     <Typography.BodyBL>Try adjusting your search or filters</Typography.BodyBL>
-    <Button.Default
+    <Button
         styleType="secondary"
         style={{ marginTop: Spacing["spacing-24"] }}
         onClick={handleClearFilters}
     >
         Clear filters
-    </Button.Default>
+    </Button>
 </Card>
 ```
 
@@ -164,12 +164,12 @@ import { Spacing } from "@lifesg/react-design-system/theme";
     <Typography.BodyBL>
         The page you're looking for doesn't exist or has been moved
     </Typography.BodyBL>
-    <Button.Default
+    <Button
         style={{ marginTop: Spacing["spacing-24"] }}
         onClick={() => navigate("/")}
     >
         Go to home
-    </Button.Default>
+    </Button>
 </Card>;
 ```
 
@@ -186,13 +186,13 @@ import { Spacing } from "@lifesg/react-design-system/theme";
     <Typography.BodyBL>
         You don't have permission to view this page
     </Typography.BodyBL>
-    <Button.Default
+    <Button
         styleType="secondary"
         style={{ marginTop: Spacing["spacing-24"] }}
         onClick={() => navigate("/")}
     >
         Go to home
-    </Button.Default>
+    </Button>
 </Card>
 ```
 
@@ -246,12 +246,12 @@ import { Spacing } from "@lifesg/react-design-system/theme";
             marginTop: Spacing["spacing-32"],
         }}
     >
-        <Button.Default onClick={() => navigate("/applications")}>
+        <Button onClick={() => navigate("/applications")}>
             View applications
-        </Button.Default>
-        <Button.Default styleType="secondary" onClick={() => navigate("/")}>
+        </Button>
+        <Button styleType="secondary" onClick={() => navigate("/")}>
             Go to home
-        </Button.Default>
+        </Button>
     </div>
 </Card>;
 ```
diff --git a/skills/fds-build/resources/v4/templates/form.md b/skills/fds-build/resources/v4/templates/form.md
index 4650d04ffb..0917fcc7eb 100644
--- a/skills/fds-build/resources/v4/templates/form.md
+++ b/skills/fds-build/resources/v4/templates/form.md
@@ -43,7 +43,7 @@ v4 uses **CSS Modules** — no `styled-components`.
 -   Design tokens are plain CSS variable strings (`var(--fds-spacing-32)`, `var(--fds-colour-text)`, etc.)
 -   Responsive styles use the breakpoint class selector: `:where(body.fds-breakpoint-lg-min) &`
 -   `ThemeProvider` adds breakpoint classes to `document.body` at runtime (e.g. `fds-breakpoint-lg-min`)
--   Pass `className={styles.x}` to `Layout.ColDiv`, `Button.Default`, and other DS components that accept it
+-   Pass `className={styles.x}` to `Layout.ColDiv`, `Button`, and other DS components that accept it
 
 ---
 
@@ -208,7 +208,7 @@ export default function FormNav({
     return (
         <div ref={navRef} className={styles.nav}>
             <div className={styles.primaryGroup}>
-                <Button.Default
+                <Button
                     styleType="default"
                     onClick={onNext}
                     loading={isSubmitting}
@@ -216,19 +216,19 @@ export default function FormNav({
                     className={styles.nextButton}
                 >
                     {nextLabel}
-                </Button.Default>
+                </Button>
                 {actions && (
                     <div className={styles.actionsGroup}>{actions}</div>
                 )}
             </div>
             {onBack && (
-                <Button.Default
+                <Button
                     styleType="secondary"
                     onClick={onBack}
                     className={styles.backButton}
                 >
                     Back
-                </Button.Default>
+                </Button>
             )}
         </div>
     );
diff --git a/skills/fds-build/resources/v4/templates/listing.md b/skills/fds-build/resources/v4/templates/listing.md
index 68e110ac05..ef05ab0d98 100644
--- a/skills/fds-build/resources/v4/templates/listing.md
+++ b/skills/fds-build/resources/v4/templates/listing.md
@@ -57,7 +57,7 @@ On mobile the filter sidebar should be hidden behind a modal — `Filter` handle
 | Results        | `Card` list/grid **or** `DataTable`       | Yes      |
 | Result count   | `Typography.BodyMD` — "X result(s) found" | Yes      |
 | Footer         | `Footer`                                  | Yes      |
-| Search bar     | `Form.Input` + `Button.Default`           | No\*     |
+| Search bar     | `Form.Input` + `Button`                   | No\*     |
 | Filter sidebar | `Filter` (~278px wide)                    | No\*     |
 | Pagination     | `Pagination showFirstAndLastNav`          | No       |
 
@@ -279,14 +279,13 @@ export default function ListingPage() {
                                         }))
                                     }
                                 />
-                                <Button.Default
-                                    styleType="default"
+                                <Button
                                     onClick={() =>
                                         setState((s) => ({ ...s, page: 1 }))
                                     }
                                 >
                                     Search
-                                </Button.Default>
+                                </Button>
                             </div>
 
                             {/* Loading */}
diff --git a/tools/shared/prop-extractor.ts b/tools/shared/prop-extractor.ts
new file mode 100644
index 0000000000..335d5c01e1
--- /dev/null
+++ b/tools/shared/prop-extractor.ts
@@ -0,0 +1,124 @@
+import {
+    type InterfaceDeclaration,
+    Node,
+    type TypeAliasDeclaration,
+} from "ts-morph";
+
+import { JsDocParser } from "./jsdoc-parser";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type PropEntry = {
+    name: string;
+    type: string;
+    required: boolean;
+    defaultVal: string;
+    description: string;
+};
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+const SKIP_PROP_NAMES = new Set([
+    "data-testid",
+    "data-error-testid",
+    "ref",
+    "key",
+]);
+
+function isFromReactOrHtmlBase(filePath: string): boolean {
+    return (
+        filePath.includes("node_modules/typescript") ||
+        filePath.includes("node_modules/@types/react") ||
+        filePath.includes("node_modules/@types/react-dom")
+    );
+}
+
+function formatType(raw: string): string {
+    return (
+        raw
+            // Remove trailing | undefined (optional marker)
+            .replace(/\s*\|\s*undefined/g, "")
+            // Collapse excessive whitespace
+            .replace(/\s+/g, " ")
+            .trim()
+    );
+}
+
+// =============================================================================
+// PropExtractor
+// =============================================================================
+
+/**
+ * Extracts a flat list of prop entries from a TypeScript interface or type alias.
+ *
+ * Handles Omit<>, intersections, extends chains, and union members via ts-morph's
+ * fully-resolved type system. Filters out HTML/React base props and internal
+ * symbols. Uses JsDocParser for description and @default extraction.
+ */
+export class PropExtractor {
+    private readonly parser = new JsDocParser();
+
+    public collectProps(
+        node: InterfaceDeclaration | TypeAliasDeclaration
+    ): PropEntry[] {
+        const result: PropEntry[] = [];
+
+        for (const sym of node.getType().getProperties()) {
+            const name = sym.getName();
+            if (SKIP_PROP_NAMES.has(name)) continue;
+            if (name.startsWith("__")) continue;
+
+            const decls = sym.getDeclarations();
+            const propDecl =
+                decls.find(Node.isPropertySignature) ??
+                decls.find(Node.isMethodSignature) ??
+                decls[0];
+
+            if (!propDecl) continue;
+
+            const declPath = propDecl.getSourceFile().getFilePath();
+            if (isFromReactOrHtmlBase(declPath)) continue;
+
+            let type = "unknown";
+            if (Node.isPropertySignature(propDecl)) {
+                const typeNode = propDecl.getTypeNode();
+                type = formatType(
+                    typeNode
+                        ? typeNode.getText()
+                        : propDecl.getType().getText(propDecl)
+                );
+            } else {
+                type = formatType(sym.getTypeAtLocation(node).getText());
+            }
+
+            const required = Node.isPropertySignature(propDecl)
+                ? !propDecl.hasQuestionToken()
+                : false;
+
+            let description = "";
+            let defaultVal = "";
+
+            if (Node.isPropertySignature(propDecl)) {
+                description =
+                    this.parser.getDescriptionFromNode(propDecl, {
+                        normalizeNewlinesToSpaces: true,
+                    }) ?? "";
+
+                for (const tag of this.parser.getTags(propDecl)) {
+                    if (tag.getTagName() === "default") {
+                        const comment = this.parser.getTagCommentText(tag);
+                        if (comment && !defaultVal) defaultVal = comment;
+                    }
+                }
+            }
+
+            result.push({ name, type, required, defaultVal, description });
+        }
+
+        return result;
+    }
+}

From 819740f62a0ae1a4995c718a22e4b234d69602ce Mon Sep 17 00:00:00 2001
From: Choo Chen Wei <chenwei.choo@ufinity.com>
Date: Wed, 9 Sep 2026 11:22:13 +0800
Subject: [PATCH 05/15] [MISC][CCW] fix v4 skills to fix broken root css

---
 skills/fds-build/SKILL-v4.md                 | 24 ++---
 skills/fds-build/resources/v4/setup/setup.md | 93 +++++++++++++++-----
 2 files changed, 83 insertions(+), 34 deletions(-)

diff --git a/skills/fds-build/SKILL-v4.md b/skills/fds-build/SKILL-v4.md
index daaa7cc94d..6689cb084a 100644
--- a/skills/fds-build/SKILL-v4.md
+++ b/skills/fds-build/SKILL-v4.md
@@ -176,13 +176,17 @@ This skill is self-contained — all resource files live under `./resources/` re
 
 ## Gotchas
 
-| Symptom                                                                    | Fix                                                                                                                                                                                      |
-| -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components throw errors                                                    | Add `ThemeProvider` from `@lifesg/react-design-system/theme`                                                                                                                             |
-| No styles / wrong fonts                                                    | Read `./resources/v4/setup/setup.md` — CSS imports are likely missing or mismatched                                                                                                      |
-| Font falls back to serif (Times)                                           | `body { font-family }` not set — add `font-family: var(--fds-font-family-body)` to `index.css`                                                                                           |
-| Navbar links have underline / user-agent margins on headings or paragraphs | CSS reset missing — v3 CDN `main.css` included a full reset; v4 npm CSS does not. Add the reset block from `./resources/v4/setup/setup.md` Step 2 to `index.css`                         |
-| Footer doesn't stick to bottom on short pages                              | v4 `ThemeProvider` renders a wrapper `<div>` as the only child of `#root`, breaking the flex column. Add `#root > div { display: flex; flex-direction: column; flex: 1 }` to `index.css` |
-| Responsive breakpoint rules don't fire                                     | Using `:where(body.fds-breakpoint-*)` — replace with `:global(body.fds-breakpoint-*)` so CSS Modules doesn't scope the class                                                             |
-| Theme CSS not loading                                                      | Vite resolves `node_modules` CSS automatically; other tools need CSS resolver config                                                                                                     |
-| `styled-components` import error                                           | Remove it — v4 uses CSS Modules; use `className={styles.x}` with a `.module.css` file                                                                                                    |
+| Symptom                                                                    | Fix                                                                                                                                                                                                                                                                 |
+| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Components throw errors                                                    | Add `ThemeProvider` from `@lifesg/react-design-system/theme`                                                                                                                                                                                                        |
+| No styles / wrong fonts                                                    | Read `./resources/v4/setup/setup.md` — CSS imports are likely missing or mismatched                                                                                                                                                                                 |
+| Font falls back to serif (Times)                                           | `body { font-family }` not set — add `font-family: var(--fds-font-family-body)` to `index.css`                                                                                                                                                                      |
+| `default.css` import fails / not found                                     | `default.css` does not exist in v4 — each theme CSS is self-contained. Import only `theme/styles/{theme}.css`                                                                                                                                                       |
+| `Layout.Container` has no horizontal padding / content flush to left edge  | CSS reset uses `* { padding: 0 }` — this is unlayered and overrides `@layer fds` component padding. Use only `body { margin: 0 }`. Never put `padding`/`margin` resets on `*`, `ul`, `li`, `h1`–`h6`, `p`, or any other element selector. See setup.md reset block |
+| Navbar items squished together / no space between nav links                | Same cause as above — `li { margin: 0 }` in an unlayered reset wipes the Navbar's `@layer fds` item margins. Use the minimal reset in setup.md                                                                                                                      |
+| Footer doesn't stick to bottom on short pages                              | v4 `ThemeProvider` renders a wrapper `<div>` as the only child of `#root`, breaking the flex column. Add `#root > div { display: flex; flex-direction: column; flex: 1 }` to `index.css` (or `body > div` for Next.js)                                             |
+| Responsive breakpoint rules don't fire                                     | Using `:where(body.fds-breakpoint-*)` — replace with `:global(body.fds-breakpoint-*)` so CSS Modules doesn't scope the class                                                                                                                                        |
+| Theme CSS not loading                                                      | Vite resolves `node_modules` CSS automatically; other tools need CSS resolver config                                                                                                                                                                                 |
+| `styled-components` import error                                           | Remove it — v4 uses CSS Modules; use `className={styles.x}` with a `.module.css` file                                                                                                                                                                               |
+| `RadioButton` with children throws in React 19                             | v4 `RadioButton` spreads all props (including `children`) onto `<input>` — React 19 rejects children on void elements. Wrap in `<label>` with text outside: `<label><RadioButton .../> Label text</label>`                                                          |
+| Next.js App Router: no `#root` element                                     | Next.js renders into `<body>` directly. Replace `#root { ... }` with those styles on `body`, and `#root > div` with `body > div`. See setup.md Next.js section                                                                                                     |
diff --git a/skills/fds-build/resources/v4/setup/setup.md b/skills/fds-build/resources/v4/setup/setup.md
index 611d47b198..8d2b2a09c7 100644
--- a/skills/fds-build/resources/v4/setup/setup.md
+++ b/skills/fds-build/resources/v4/setup/setup.md
@@ -16,18 +16,44 @@ Do NOT install `styled-components` — it is not used in v4.
 
 ## Step 2 — CSS (src/index.css)
 
-Three imports are required. Order matters.
+Two imports are required. Order matters.
 
 ```css
 /* 1. Font — CDN path is v3 but fonts are shared across versions */
 @import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
 
-/* 2. Base token sheet — defines every --fds-* CSS custom property */
-@import "@lifesg/react-design-system/theme/styles/default.css";
-
-/* 3. Theme overrides — brand/primary colour values for the chosen theme */
+/* 2. Theme CSS — defines ALL --fds-* custom properties AND component styles */
 @import "@lifesg/react-design-system/theme/styles/lifesg.css";
+```
+
+> **Note:** There is no `default.css` in v4. Each theme CSS file is self-contained and defines every `--fds-spacing-*`, `--fds-colour-*`, `--fds-radius-*`, etc. Do not import `default.css` — it does not exist.
+
+Replace `lifesg.css` with your chosen theme slug. Available slugs:
+`lifesg` · `bookingsg` · `ccube` · `mylegacy` · `oneservice` · `pa` · `supportgowhere` · `sgw-digital-lobby` · `careercompass` · `rbs` · `imda` · `spf` · `smgs` · `a11y-playground`
+
+> Vite resolves `node_modules` CSS `@import` automatically. Other build tools may need a CSS resolver configured.
+
+Font-to-theme mapping:
+
+| Font stylesheet                  | Themes                                             |
+| -------------------------------- | -------------------------------------------------- |
+| `open-sans.css`                  | `lifesg`, `ccube`, `mylegacy`, `oneservice`, `rbs` |
+| `plus-jakarta-sans.css`          | `bookingsg`, `careercompass`, `smgs`               |
+| `lato.css`                       | `pa`                                               |
+| `libre-franklin.css`             | `supportgowhere`, `sgw-digital-lobby`              |
+| `montserrat.css`                 | `imda`                                             |
+| `public-sans.css`                | `spf`                                              |
+| `atkinson-hyperlegible-next.css` | `a11y-playground`                                  |
+
+### Reset block
 
+> **CRITICAL — read before writing any CSS reset:**
+>
+> v4 wraps **all** component styles inside `@layer fds { }`. CSS cascade layers mean that **any unlayered rule beats all layered rules**, regardless of selector specificity. A `* { padding: 0; margin: 0 }` reset is unlayered and will silently override component padding, nav item margins, filter spacing, etc. — all of which live in `@layer fds`.
+>
+> **Use only the minimal reset below.** Never add broad element resets (`h1–h6`, `p`, `ul`, `ol`, `li`, `dl`, etc.) — FDS components render those elements internally and depend on their default or computed styles.
+
+```css
 html {
     -moz-text-size-adjust: none;
     -webkit-text-size-adjust: none;
@@ -39,19 +65,24 @@ html {
 *::before,
 *::after {
     box-sizing: inherit;
-    padding: 0;
-    margin: 0;
+    /* DO NOT add padding: 0 or margin: 0 here — it overrides @layer fds component styles */
 }
 
 body {
+    margin: 0;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-family: var(--fds-font-family-body, "Open Sans", sans-serif);
+    color: var(--fds-colour-text);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
 a {
     cursor: pointer;
     text-decoration: none;
+    color: inherit;
 }
 
 button,
@@ -63,6 +94,11 @@ input[type="reset"],
     color: inherit;
 }
 
+img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+}
+
 #root {
     min-height: 100vh;
     display: flex;
@@ -79,24 +115,32 @@ input[type="reset"],
 }
 ```
 
-**`default.css` is required.** It defines all `--fds-spacing-*`, `--fds-colour-*`, `--fds-radius-*` etc. Without it every CSS variable resolves to nothing and components are unstyled.
+### Next.js App Router adaptation
 
-Replace `lifesg.css` with your chosen theme slug. Available slugs:
-`lifesg` · `bookingsg` · `ccube` · `mylegacy` · `oneservice` · `pa` · `supportgowhere` · `sgw-digital-lobby` · `careercompass` · `rbs` · `imda` · `spf` · `smgs` · `a11y-playground`
+Next.js App Router renders into `<body>` directly — there is no `#root`. Replace the `#root` rules with:
 
-> Vite resolves `node_modules` CSS `@import` automatically. Other build tools may need a CSS resolver configured.
+```css
+/* Next.js: body is the mount point, not #root */
+body > div {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+```
 
-Font-to-theme mapping:
+And move `min-height: 100vh; display: flex; flex-direction: column` onto `body` (already shown above).
 
-| Font stylesheet                  | Themes                                             |
-| -------------------------------- | -------------------------------------------------- |
-| `open-sans.css`                  | `lifesg`, `ccube`, `mylegacy`, `oneservice`, `rbs` |
-| `plus-jakarta-sans.css`          | `bookingsg`, `careercompass`, `smgs`               |
-| `lato.css`                       | `pa`                                               |
-| `libre-franklin.css`             | `supportgowhere`, `sgw-digital-lobby`              |
-| `montserrat.css`                 | `imda`                                             |
-| `public-sans.css`                | `spf`                                              |
-| `atkinson-hyperlegible-next.css` | `a11y-playground`                                  |
+For `ThemeProvider`, create a client component wrapper (`providers.tsx`) since Next.js layouts are Server Components by default:
+
+```tsx
+// src/app/providers.tsx
+"use client";
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+    return <ThemeProvider theme="lifesg" mode="light">{children}</ThemeProvider>;
+}
+```
 
 ---
 
@@ -156,7 +200,8 @@ export default defineConfig({
 -   [ ] `@lifesg/react-design-system`, `@lifesg/react-icons`, `@floating-ui/react` installed
 -   [ ] `styled-components` NOT installed
 -   [ ] Font CDN stylesheet imported first in `index.css` and matches selected theme
--   [ ] `@lifesg/react-design-system/theme/styles/default.css` imported in `index.css` (before theme CSS)
--   [ ] `@lifesg/react-design-system/theme/styles/{theme}.css` imported in `index.css` (after default.css)
--   [ ] `body { margin: 0 }` and `#root { min-height: 100vh; display: flex; flex-direction: column }` in `index.css`
+-   [ ] `@lifesg/react-design-system/theme/styles/{theme}.css` imported in `index.css` (no `default.css` — it does not exist in v4)
+-   [ ] CSS reset uses ONLY `body { margin: 0 }` — no broad `* { padding: 0; margin: 0 }` or element-level resets
+-   [ ] `body { min-height: 100vh; display: flex; flex-direction: column }` in `index.css`
+-   [ ] `#root > div { display: flex; flex-direction: column; flex: 1 }` (or `body > div` for Next.js)
 -   [ ] `ThemeProvider` wraps app root with correct theme string

From dd6865b274a33b3112fc05111cda10c26272114d Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Tue, 15 Sep 2026 09:28:27 +0800
Subject: [PATCH 06/15] [MISC][XY] Add idempotency test and export helpers for
 generate-skill-props

- Export stripPropsSection and insertPropsSection for testability
- Guard main() behind require.main === module to prevent side effects on import
- Add 12-test suite covering strip, insert, and idempotency scenarios

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 scripts/generate-skill-props.ts            |  11 +-
 tests/scripts/generate-skill-props.spec.ts | 132 +++++++++++++++++++++
 2 files changed, 140 insertions(+), 3 deletions(-)
 create mode 100644 tests/scripts/generate-skill-props.spec.ts

diff --git a/scripts/generate-skill-props.ts b/scripts/generate-skill-props.ts
index a1aab89d6b..56667ed3d7 100644
--- a/scripts/generate-skill-props.ts
+++ b/scripts/generate-skill-props.ts
@@ -112,7 +112,7 @@ function buildPropsContent(
 // Resource file processing
 // =============================================================================
 
-function stripPropsSection(content: string): string {
+export function stripPropsSection(content: string): string {
     const lines = content.split("\n");
     const out: string[] = [];
     let inProps = false;
@@ -129,7 +129,10 @@ function stripPropsSection(content: string): string {
     return out.join("\n").replace(/\n{3,}/g, "\n\n");
 }
 
-function insertPropsSection(content: string, propsBlock: string): string {
+export function insertPropsSection(
+    content: string,
+    propsBlock: string
+): string {
     const stripped = stripPropsSection(content);
     const marker = "\n\n" + propsBlock;
 
@@ -278,4 +281,6 @@ function main() {
     console.log(`\nDone. Updated: ${updated}, Skipped: ${skipped}`);
 }
 
-main();
+if (require.main === module) {
+    main();
+}
diff --git a/tests/scripts/generate-skill-props.spec.ts b/tests/scripts/generate-skill-props.spec.ts
new file mode 100644
index 0000000000..740dd1496a
--- /dev/null
+++ b/tests/scripts/generate-skill-props.spec.ts
@@ -0,0 +1,132 @@
+import {
+    insertPropsSection,
+    stripPropsSection,
+} from "scripts/generate-skill-props";
+
+const PROPS_BLOCK = `## Props — \`FooProps\`
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| \`name\` | \`string\` | — | — |`;
+
+const BASE_WITH_RULES = `# Foo
+
+Some intro.
+
+## Rules
+
+- Rule one.`;
+
+const BASE_WITH_ANTIPATTERNS = `# Foo
+
+Some intro.
+
+## Anti-patterns
+
+- Do not do this.`;
+
+const BASE_NO_SECTIONS = `# Foo
+
+Some intro.`;
+
+// =============================================================================
+// stripPropsSection
+// =============================================================================
+
+describe("stripPropsSection", () => {
+    it("removes a single ## Props section", () => {
+        const input = `# Foo\n\n${PROPS_BLOCK}\n\n## Rules\n\n- Rule one.`;
+        const result = stripPropsSection(input);
+        expect(result).not.toContain("## Props");
+        expect(result).toContain("## Rules");
+    });
+
+    it("removes multiple ## Props sections", () => {
+        const block2 = `## Props — \`BarProps\`\n\n| Prop | Type |\n| ---- | ---- |\n| \`id\` | \`string\` |`;
+        const input = `# Foo\n\n${PROPS_BLOCK}\n\n${block2}\n\n## Rules\n\n- Rule one.`;
+        const result = stripPropsSection(input);
+        expect(result).not.toContain("## Props");
+        expect(result).toContain("## Rules");
+    });
+
+    it("is a no-op when no ## Props section is present", () => {
+        const result = stripPropsSection(BASE_WITH_RULES);
+        expect(result).toContain("## Rules");
+        expect(result).not.toContain("## Props");
+    });
+
+    it("collapses excess blank lines left by removal", () => {
+        const input = `# Foo\n\n\n\n${PROPS_BLOCK}\n\n\n\n## Rules\n\n- Rule one.`;
+        const result = stripPropsSection(input);
+        expect(result).not.toMatch(/\n{3,}/);
+    });
+});
+
+// =============================================================================
+// insertPropsSection
+// =============================================================================
+
+describe("insertPropsSection", () => {
+    it("inserts before ## Rules when present", () => {
+        const result = insertPropsSection(BASE_WITH_RULES, PROPS_BLOCK);
+        const propsIdx = result.indexOf("## Props");
+        const rulesIdx = result.indexOf("## Rules");
+        expect(propsIdx).toBeGreaterThan(-1);
+        expect(propsIdx).toBeLessThan(rulesIdx);
+    });
+
+    it("inserts before ## Anti-patterns when ## Rules is absent", () => {
+        const result = insertPropsSection(BASE_WITH_ANTIPATTERNS, PROPS_BLOCK);
+        const propsIdx = result.indexOf("## Props");
+        const apIdx = result.indexOf("## Anti-patterns");
+        expect(propsIdx).toBeGreaterThan(-1);
+        expect(propsIdx).toBeLessThan(apIdx);
+    });
+
+    it("appends at end when neither ## Rules nor ## Anti-patterns is present", () => {
+        const result = insertPropsSection(BASE_NO_SECTIONS, PROPS_BLOCK);
+        expect(result.trimEnd().endsWith(PROPS_BLOCK.trimEnd())).toBe(true);
+    });
+
+    it("strips an existing ## Props section before inserting", () => {
+        const withExisting = `# Foo\n\n## Props — \`OldProps\`\n\n| Prop | Type |\n| ---- | ---- |\n\n## Rules\n\n- Rule one.`;
+        const result = insertPropsSection(withExisting, PROPS_BLOCK);
+        expect(result).not.toContain("OldProps");
+        expect(result).toContain("FooProps");
+    });
+});
+
+// =============================================================================
+// idempotency
+// =============================================================================
+
+describe("idempotency", () => {
+    it("produces identical output when run twice on a file with ## Rules", () => {
+        const firstRun = insertPropsSection(BASE_WITH_RULES, PROPS_BLOCK);
+        const secondRun = insertPropsSection(firstRun, PROPS_BLOCK);
+        expect(secondRun).toBe(firstRun);
+    });
+
+    it("produces identical output when run twice on a file with ## Anti-patterns", () => {
+        const firstRun = insertPropsSection(
+            BASE_WITH_ANTIPATTERNS,
+            PROPS_BLOCK
+        );
+        const secondRun = insertPropsSection(firstRun, PROPS_BLOCK);
+        expect(secondRun).toBe(firstRun);
+    });
+
+    it("produces identical output when run twice on a file with no sections", () => {
+        const firstRun = insertPropsSection(BASE_NO_SECTIONS, PROPS_BLOCK);
+        const secondRun = insertPropsSection(firstRun, PROPS_BLOCK);
+        expect(secondRun).toBe(firstRun);
+    });
+
+    it("produces identical output when run twice on a file with multiple existing Props sections", () => {
+        const block2 = `## Props — \`BarProps\`\n\n| Prop | Type |\n| ---- | ---- |\n| \`id\` | \`string\` |`;
+        const multiProps = `# Foo\n\n${PROPS_BLOCK}\n\n${block2}\n\n## Rules\n\n- Rule one.`;
+        const firstRun = insertPropsSection(multiProps, PROPS_BLOCK);
+        const secondRun = insertPropsSection(firstRun, PROPS_BLOCK);
+        expect(secondRun).toBe(firstRun);
+    });
+});

From 6b2a1a460d17683ed21dc6878f464c3f0ce88560 Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Tue, 15 Sep 2026 09:37:37 +0800
Subject: [PATCH 07/15] [MISC][XY] Warn against styled-components and v3 tokens
 when falling back to v3 docs

---
 skills/fds-build/SKILL-v4.md | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/skills/fds-build/SKILL-v4.md b/skills/fds-build/SKILL-v4.md
index 6689cb084a..dfb4db1772 100644
--- a/skills/fds-build/SKILL-v4.md
+++ b/skills/fds-build/SKILL-v4.md
@@ -15,6 +15,11 @@ You are helping build web applications with **`@lifesg/react-design-system` v4**
 
 This file covers v4-specific setup and rules. For components not yet documented in `resources/v4/`, fall back to `resources/v3/` component docs — most component APIs are unchanged.
 
+> **⚠ When using v3 docs as a fallback:**
+>
+> -   **Do not copy styled-components patterns** — v4 uses CSS Modules. Any `styled-components` usage, theme props (`p.theme.color.*`), or `StyleSheetManager` from v3 examples will fail.
+> -   **v3 design tokens do not exist in v4** — `Color`, `FontSize`, `TextStyleUtils`, etc. are not exported. Use `var(--fds-colour-*)` / `var(--fds-font-*)` CSS variables or the `Colour`/`Spacing` helpers from `@lifesg/react-design-system/theme` instead.
+
 ---
 
 ## Install
@@ -176,17 +181,17 @@ This skill is self-contained — all resource files live under `./resources/` re
 
 ## Gotchas
 
-| Symptom                                                                    | Fix                                                                                                                                                                                                                                                                 |
-| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components throw errors                                                    | Add `ThemeProvider` from `@lifesg/react-design-system/theme`                                                                                                                                                                                                        |
-| No styles / wrong fonts                                                    | Read `./resources/v4/setup/setup.md` — CSS imports are likely missing or mismatched                                                                                                                                                                                 |
-| Font falls back to serif (Times)                                           | `body { font-family }` not set — add `font-family: var(--fds-font-family-body)` to `index.css`                                                                                                                                                                      |
-| `default.css` import fails / not found                                     | `default.css` does not exist in v4 — each theme CSS is self-contained. Import only `theme/styles/{theme}.css`                                                                                                                                                       |
-| `Layout.Container` has no horizontal padding / content flush to left edge  | CSS reset uses `* { padding: 0 }` — this is unlayered and overrides `@layer fds` component padding. Use only `body { margin: 0 }`. Never put `padding`/`margin` resets on `*`, `ul`, `li`, `h1`–`h6`, `p`, or any other element selector. See setup.md reset block |
-| Navbar items squished together / no space between nav links                | Same cause as above — `li { margin: 0 }` in an unlayered reset wipes the Navbar's `@layer fds` item margins. Use the minimal reset in setup.md                                                                                                                      |
-| Footer doesn't stick to bottom on short pages                              | v4 `ThemeProvider` renders a wrapper `<div>` as the only child of `#root`, breaking the flex column. Add `#root > div { display: flex; flex-direction: column; flex: 1 }` to `index.css` (or `body > div` for Next.js)                                             |
-| Responsive breakpoint rules don't fire                                     | Using `:where(body.fds-breakpoint-*)` — replace with `:global(body.fds-breakpoint-*)` so CSS Modules doesn't scope the class                                                                                                                                        |
-| Theme CSS not loading                                                      | Vite resolves `node_modules` CSS automatically; other tools need CSS resolver config                                                                                                                                                                                 |
-| `styled-components` import error                                           | Remove it — v4 uses CSS Modules; use `className={styles.x}` with a `.module.css` file                                                                                                                                                                               |
-| `RadioButton` with children throws in React 19                             | v4 `RadioButton` spreads all props (including `children`) onto `<input>` — React 19 rejects children on void elements. Wrap in `<label>` with text outside: `<label><RadioButton .../> Label text</label>`                                                          |
-| Next.js App Router: no `#root` element                                     | Next.js renders into `<body>` directly. Replace `#root { ... }` with those styles on `body`, and `#root > div` with `body > div`. See setup.md Next.js section                                                                                                     |
+| Symptom                                                                   | Fix                                                                                                                                                                                                                                                                |
+| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Components throw errors                                                   | Add `ThemeProvider` from `@lifesg/react-design-system/theme`                                                                                                                                                                                                       |
+| No styles / wrong fonts                                                   | Read `./resources/v4/setup/setup.md` — CSS imports are likely missing or mismatched                                                                                                                                                                                |
+| Font falls back to serif (Times)                                          | `body { font-family }` not set — add `font-family: var(--fds-font-family-body)` to `index.css`                                                                                                                                                                     |
+| `default.css` import fails / not found                                    | `default.css` does not exist in v4 — each theme CSS is self-contained. Import only `theme/styles/{theme}.css`                                                                                                                                                      |
+| `Layout.Container` has no horizontal padding / content flush to left edge | CSS reset uses `* { padding: 0 }` — this is unlayered and overrides `@layer fds` component padding. Use only `body { margin: 0 }`. Never put `padding`/`margin` resets on `*`, `ul`, `li`, `h1`–`h6`, `p`, or any other element selector. See setup.md reset block |
+| Navbar items squished together / no space between nav links               | Same cause as above — `li { margin: 0 }` in an unlayered reset wipes the Navbar's `@layer fds` item margins. Use the minimal reset in setup.md                                                                                                                     |
+| Footer doesn't stick to bottom on short pages                             | v4 `ThemeProvider` renders a wrapper `<div>` as the only child of `#root`, breaking the flex column. Add `#root > div { display: flex; flex-direction: column; flex: 1 }` to `index.css` (or `body > div` for Next.js)                                             |
+| Responsive breakpoint rules don't fire                                    | Using `:where(body.fds-breakpoint-*)` — replace with `:global(body.fds-breakpoint-*)` so CSS Modules doesn't scope the class                                                                                                                                       |
+| Theme CSS not loading                                                     | Vite resolves `node_modules` CSS automatically; other tools need CSS resolver config                                                                                                                                                                               |
+| `styled-components` import error                                          | Remove it — v4 uses CSS Modules; use `className={styles.x}` with a `.module.css` file                                                                                                                                                                              |
+| `RadioButton` with children throws in React 19                            | v4 `RadioButton` spreads all props (including `children`) onto `<input>` — React 19 rejects children on void elements. Wrap in `<label>` with text outside: `<label><RadioButton .../> Label text</label>`                                                         |
+| Next.js App Router: no `#root` element                                    | Next.js renders into `<body>` directly. Replace `#root { ... }` with those styles on `body`, and `#root > div` with `body > div`. See setup.md Next.js section                                                                                                     |

From c0bdf20e65268a691c25e484e11846dada34f4b7 Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Tue, 15 Sep 2026 09:41:30 +0800
Subject: [PATCH 08/15] [MISC][XY] Update skill install instruction to use npx
 flagship-skills bin

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index d82b616340..090d2ec349 100644
--- a/README.md
+++ b/README.md
@@ -98,10 +98,10 @@ To see the full suite of components available, visit our [Storybook documentatio
 Give your AI coding assistant accurate knowledge of FDS components, import patterns, and rules — works with Claude Code, Cursor, GitHub Copilot, Codex, and other agents.
 
 ```bash
-npx skills add lifesg/react-design-system
+npx flagship-skills
 ```
 
-The skill covers component selection, correct import paths, theming setup, layout patterns, and common mistakes to avoid. Keep it current when you upgrade the package by running `npx skills add` again.
+Run this after installing `@lifesg/react-design-system` — it registers the skill from your locally installed version so the agent always matches the version you have. The skill covers component selection, correct import paths, theming setup, layout patterns, and common mistakes to avoid. Re-run after upgrading the package.
 
 ## Migrations
 

From 6c3573e19642c3801ef89f159277e317463cd3ec Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Tue, 15 Sep 2026 10:01:59 +0800
Subject: [PATCH 09/15] [MISC][XY] Update skills bin to use
 lifesg-react-design-system skills subcommand

---
 README.md      | 12 ++++++++++--
 package.json   |  3 +--
 scripts/cli.js | 18 ++++++++++++++++++
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 scripts/cli.js

diff --git a/README.md b/README.md
index 090d2ec349..c7e9de74de 100644
--- a/README.md
+++ b/README.md
@@ -97,11 +97,19 @@ To see the full suite of components available, visit our [Storybook documentatio
 
 Give your AI coding assistant accurate knowledge of FDS components, import patterns, and rules — works with Claude Code, Cursor, GitHub Copilot, Codex, and other agents.
 
+**If you are starting fresh** — pull directly from GitHub:
+
+```bash
+npx skills add lifesg/react-design-system
+```
+
+**If `@lifesg/react-design-system` is already installed in your project** — use the bin command, which registers the skill from your locally installed version:
+
 ```bash
-npx flagship-skills
+npx lifesg-react-design-system skills
 ```
 
-Run this after installing `@lifesg/react-design-system` — it registers the skill from your locally installed version so the agent always matches the version you have. The skill covers component selection, correct import paths, theming setup, layout patterns, and common mistakes to avoid. Re-run after upgrading the package.
+The skill covers component selection, correct import paths, theming setup, layout patterns, and common mistakes to avoid. Re-run after upgrading the package.
 
 ## Migrations
 
diff --git a/package.json b/package.json
index d380302242..669ddc72ab 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,7 @@
         }
     },
     "bin": {
-        "lifesg-react-design-system": "./codemods/run-codemod.js",
-        "flagship-skills": "./scripts/init-skills.js"
+        "lifesg-react-design-system": "./scripts/cli.js"
     },
     "scripts": {
         "build": "npm run rollup",
diff --git a/scripts/cli.js b/scripts/cli.js
new file mode 100644
index 0000000000..73c567b083
--- /dev/null
+++ b/scripts/cli.js
@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+const { execSync, spawnSync } = require("child_process");
+const path = require("path");
+
+const [, , subcommand, ...rest] = process.argv;
+
+if (subcommand === "skills") {
+    const packageRoot = path.resolve(__dirname, "..");
+    execSync(`npx skills add ${packageRoot}`, { stdio: "inherit" });
+} else {
+    const codemodBin = path.resolve(__dirname, "../codemods/run-codemod.js");
+    const result = spawnSync(
+        process.execPath,
+        [codemodBin, subcommand, ...rest].filter(Boolean),
+        { stdio: "inherit" }
+    );
+    process.exit(result.status ?? 1);
+}

From ad8a673407a03163e0752eee22ad6e87c340240a Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Tue, 29 Sep 2026 16:57:43 +0800
Subject: [PATCH 10/15] [MISC][XY] Update rollup.config.js + remove redundant
 lines in skills

---
 .npmignore                                    |  2 +-
 rollup.config.js                              | 10 +++--
 scripts/generate-skill-props.ts               | 15 +++++++
 scripts/init-skills.js                        |  7 ---
 skills/fds-build/SKILL-v4.md                  | 12 ++---
 skills/fds-build/SKILL.md                     | 30 +++++--------
 .../resources/v4/foundations/tokens.md        | 44 ++++++++++++++++---
 7 files changed, 76 insertions(+), 44 deletions(-)
 delete mode 100644 scripts/init-skills.js

diff --git a/.npmignore b/.npmignore
index 9db7301658..0423fc5faa 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,7 +1,7 @@
 **/*
 !dist/**
 !skills/**
-!scripts/init-skills.js
+!scripts/cli.js
 !CHANGELOG.md
 !package-lock.json
 !package.json
diff --git a/rollup.config.js b/rollup.config.js
index f085319bbc..bec0ee58c0 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -113,9 +113,7 @@ const plugins = [
             main: "./cjs/index.js",
             module: "./index.js",
             types: "./index.d.ts",
-            bin: {
-                "lifesg-react-design-system": "./codemods/run-codemod.js",
-            },
+            bin: pkg.bin,
             exports: {
                 ".": {
                     types: "./index.d.ts",
@@ -306,7 +304,11 @@ const codemodBuildConfig = {
             tsconfig: "tsconfig.codemods.json",
         }),
         copy({
-            targets: [{ src: "codemods/**/*", dest: "dist/codemods" }],
+            targets: [
+                { src: "codemods/**/*", dest: "dist/codemods" },
+                { src: "scripts/cli.js", dest: "dist/scripts" },
+                { src: "skills/*", dest: "dist/skills" },
+            ],
         }),
     ],
 };
diff --git a/scripts/generate-skill-props.ts b/scripts/generate-skill-props.ts
index 56667ed3d7..f54e1b7ecc 100644
--- a/scripts/generate-skill-props.ts
+++ b/scripts/generate-skill-props.ts
@@ -249,6 +249,7 @@ function main() {
 
     let updated = 0;
     let skipped = 0;
+    const updatedPaths: string[] = [];
 
     for (const dir of resourceDirs) {
         if (!fs.existsSync(dir)) continue;
@@ -273,11 +274,25 @@ function main() {
                 }
             } else {
                 updated++;
+                updatedPaths.push(filePath);
                 console.log(`  props [${version}] ${file}`);
             }
         }
     }
 
+    if (updatedPaths.length > 0) {
+        const { execSync } = require("child_process");
+        execSync(
+            `npx prettier --write ${updatedPaths
+                .map((p) => `"${p}"`)
+                .join(" ")}`,
+            {
+                stdio: "inherit",
+                cwd: ROOT_DIR,
+            }
+        );
+    }
+
     console.log(`\nDone. Updated: ${updated}, Skipped: ${skipped}`);
 }
 
diff --git a/scripts/init-skills.js b/scripts/init-skills.js
deleted file mode 100644
index a07b5b9446..0000000000
--- a/scripts/init-skills.js
+++ /dev/null
@@ -1,7 +0,0 @@
-#!/usr/bin/env node
-const { execSync } = require("child_process");
-const path = require("path");
-
-const PACKAGE_ROOT = path.resolve(__dirname, "..");
-
-execSync(`npx skills add ${PACKAGE_ROOT}`, { stdio: "inherit" });
diff --git a/skills/fds-build/SKILL-v4.md b/skills/fds-build/SKILL-v4.md
index dfb4db1772..d0b702a3da 100644
--- a/skills/fds-build/SKILL-v4.md
+++ b/skills/fds-build/SKILL-v4.md
@@ -25,7 +25,7 @@ This file covers v4-specific setup and rules. For components not yet documented
 ## Install
 
 ```bash
-pnpm add @lifesg/react-design-system @lifesg/react-icons @floating-ui/react @mui/icons-material
+npm install @lifesg/react-design-system @lifesg/react-icons @floating-ui/react
 ```
 
 Do not install `styled-components` — v4 uses CSS Modules for custom styles.
@@ -142,7 +142,7 @@ import { Colour, Spacing } from "@lifesg/react-design-system/theme";
 ## Icons
 
 1. `@lifesg/react-icons` first — read `./resources/v3/components/icon.md` to discover available icon names.
-2. `@mui/icons-material` as fallback only.
+2. `material-symbols` as fallback only.
 3. Never guess icon names — verify the import exists before using.
 
 ---
@@ -168,12 +168,12 @@ This skill is self-contained — all resource files live under `./resources/` re
 | New project / missing setup                                           | `./resources/v4/setup/setup.md`                                                                     |
 | Find the right component                                              | `./catalogue.md` — search "Also known as" column by keyword                                         |
 | Use a component                                                       | Check `./resources/v4/components/{name}/` first; fall back to `./resources/v3/components/{name}.md` |
-| Grid system, breakpoints, column widths                               | `./resources/v3/components/layout.md`                                                               |
+| Grid system, breakpoints, column widths                               | `./resources/v4/components/layout.md`                                                               |
 | Build a form page (single or multi-step)                              | Check `./resources/v4/templates/form.md`; fall back to `./resources/v3/templates/form.md`           |
 | Build a listing / search results page                                 | `./resources/v4/templates/listing.md`                                                               |
-| Handle loading / error / empty states                                 | `./resources/v3/patterns/states.md`                                                                 |
-| Token question (Colour, Spacing, Radius, Typography)                  | `./resources/v3/foundations/tokens.md`                                                              |
-| Spacing rhythm, visual hierarchy, card rules, settings page structure | `./resources/v3/foundations/layout-composition-patterns.md`                                         |
+| Handle loading / error / empty states                                 | `./resources/v4/patterns/states.md`                                                                 |
+| Token question (Colour, Spacing, Radius, Typography)                  | `./resources/v4/foundations/tokens.md`                                                              |
+| Spacing rhythm, visual hierarchy, card rules, settings page structure | `./resources/v4/foundations/layout-composition-patterns.md`                                         |
 
 **Reading strategy:** read `catalogue.md` once for discovery, then fetch only the specific component `{name}.md` files you need. Do not pre-load all component files.
 
diff --git a/skills/fds-build/SKILL.md b/skills/fds-build/SKILL.md
index bcb1aa7554..42fec301cc 100644
--- a/skills/fds-build/SKILL.md
+++ b/skills/fds-build/SKILL.md
@@ -32,7 +32,7 @@ Read `@lifesg/react-design-system` version from the consumer's `package.json` be
 ## Install
 
 ```bash
-pnpm add @lifesg/react-design-system @lifesg/react-icons styled-components @floating-ui/react @mui/icons-material @emotion/is-prop-valid
+npm install @lifesg/react-design-system @lifesg/react-icons styled-components @floating-ui/react @emotion/is-prop-valid
 ```
 
 Peer deps: `react` + `react-dom` (^17, ^18, or ^19).
@@ -43,28 +43,19 @@ Peer deps: `react` + `react-dom` (^17, ^18, or ^19).
 
 ## ThemeProvider (required)
 
-Every app must wrap all components in `StyleSheetManager` (outer) + `ThemeProvider` (inner). Missing either causes errors or DOM warnings.
+Every app must wrap all components in `ThemeProvider`. Without it, components throw errors.
 
 ```tsx
-import { ThemeProvider, StyleSheetManager } from "styled-components";
-import isPropValid from "@emotion/is-prop-valid";
+import { ThemeProvider } from "styled-components";
 import { LifeSGTheme } from "@lifesg/react-design-system/theme";
 
 export default function App() {
-    return (
-        <StyleSheetManager shouldForwardProp={isPropValid}>
-            <ThemeProvider theme={LifeSGTheme}>{/* your app */}</ThemeProvider>
-        </StyleSheetManager>
-    );
+    return <ThemeProvider theme={LifeSGTheme}>{/* your app */}</ThemeProvider>;
 }
 ```
 
-`StyleSheetManager` with `isPropValid` stops styled-components forwarding DS-specific props (e.g. `weight`) to DOM elements.
-
 Theme is an **imported object** — not a string. Available themes: `LifeSGTheme` · `BookingSGTheme` · `CCubeTheme` · `MyLegacyTheme` · `OneServiceTheme` · `PATheme` · `SupportGoWhereTheme` · `SGWDigitalLobbyTheme` · `IMDATheme` · `SPFTheme` · `SMGSTheme` · `A11yPlaygroundTheme`
 
-For auto dark/light mode: swap `ThemeProvider` for `DSThemeProvider` (same import path). Force fixed mode: `LifeSGTheme.light` or `LifeSGTheme.dark`.
-
 ---
 
 ## Component imports
@@ -113,7 +104,7 @@ Never hardcode `px` values — always use `Spacing` tokens.
 ## Icons
 
 1. `@lifesg/react-icons` first — read `./resources/v3/components/icon.md` to discover available icon names.
-2. `@mui/icons-material` as fallback only.
+2. `material-symbols` as fallback only.
 3. Never guess icon names — verify the import exists before using.
 
 ---
@@ -180,12 +171,11 @@ This skill is self-contained — all resource files live under `./resources/` re
 
 ## Gotchas
 
-| Symptom                             | Fix                                                                             |
-| ----------------------------------- | ------------------------------------------------------------------------------- |
-| Components throw errors             | Add `StyleSheetManager` + `ThemeProvider` wrapping app root                     |
-| styled-components DOM prop warnings | `StyleSheetManager` is missing or not wrapping `ThemeProvider`                  |
-| No styles / wrong fonts             | Read `./resources/v3/setup/setup.md` — CSS imports likely missing or mismatched |
-| Token in inline `style={{}}`        | Tokens are functions — move to a `styled` template literal                      |
+| Symptom                      | Fix                                                                             |
+| ---------------------------- | ------------------------------------------------------------------------------- |
+| Components throw errors      | Add `ThemeProvider` wrapping app root                                           |
+| No styles / wrong fonts      | Read `./resources/v3/setup/setup.md` — CSS imports likely missing or mismatched |
+| Token in inline `style={{}}` | Tokens are functions — move to a `styled` template literal                      |
 
 ---
 
diff --git a/skills/fds-build/resources/v4/foundations/tokens.md b/skills/fds-build/resources/v4/foundations/tokens.md
index 51e57bb880..61e004bd2a 100644
--- a/skills/fds-build/resources/v4/foundations/tokens.md
+++ b/skills/fds-build/resources/v4/foundations/tokens.md
@@ -38,8 +38,6 @@ No `styled.d.ts` augmentation required. No `useTheme()` hook needed.
 | Hardcoding `var(--fds-*)` directly                                | FDS internal variable names may change                   | Use `Colour[...]` / `Spacing[...]` tokens   |
 | Hardcoding hex values                                             | Breaks theming                                           | Always use a Colour token                   |
 | Creating a local token proxy file                                 | Plain strings do not respond to theme changes at runtime | Use `Colour[...]` / `Spacing[...]` directly |
-| Using `SpacingValues`                                             | This export does not exist                               | Use `Spacing`                               |
-| Using `Theme` (named export)                                      | This export does not exist                               | Use a named preset: `LifeSGTheme`, etc.     |
 
 ---
 
@@ -394,12 +392,31 @@ In v4 there is no `MediaQuery` helper for CSS-in-JS. Use standard CSS media quer
 }
 ```
 
-`Breakpoint` can still be imported for JS conditional logic:
+For JS conditional logic, use the v4 media query hooks instead of `window.innerWidth`:
 
 ```tsx
-import { Breakpoint } from "@lifesg/react-design-system/theme";
+import {
+    Breakpoint,
+    useMaxWidthMediaQuery,
+    useMinWidthMediaQuery,
+    useMediaQuery,
+    useResolvedBreakpointToken,
+    parsePxOrRemValue,
+} from "@lifesg/react-design-system/theme";
+
+const ExampleComponent = () => {
+    // Simple max/min width checks
+    const isMobile = useMaxWidthMediaQuery("sm");
+    const isDesktop = useMinWidthMediaQuery("lg");
 
-const isDesktop = window.innerWidth > Breakpoint["lg-min"];
+    // Custom query
+    const isTablet = useMediaQuery({ maxWidth: Breakpoint["lg-max"] });
+
+    // When the actual pixel value is required (e.g. for a third-party library)
+    const tablet = parsePxOrRemValue(
+        useResolvedBreakpointToken(Breakpoint["lg-max"])
+    );
+};
 ```
 
 ### Breakpoint tiers
@@ -441,7 +458,7 @@ import { Shadow } from "@lifesg/react-design-system/theme";
 
 ## Border Tokens
 
-`Border` is a flat object of CSS variable strings. Import from `@lifesg/react-design-system/theme`.
+`Border` is a flat object of CSS variable strings.
 
 ```tsx
 import { Border } from "@lifesg/react-design-system/theme";
@@ -461,6 +478,21 @@ import { Border } from "@lifesg/react-design-system/theme";
 
 There is no `Border.Util` in v4 — compose border properties manually using the tokens above.
 
+For dashed border styling, use the `DashedBorder` component instead:
+
+```tsx
+import { DashedBorder } from "@lifesg/react-design-system/dashed-border";
+import { Border, Colour, Radius } from "@lifesg/react-design-system/theme";
+
+<DashedBorder
+    radius={Radius["sm"]}
+    thickness={Border["width-040"]}
+    colour={Colour["border"]}
+>
+    {/* children */}
+</DashedBorder>;
+```
+
 ### Token reference
 
 | Token key   | Value | Common use                  |

From 25fed220281de076136d8a5c4bec82b4a7496594 Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Thu, 1 Oct 2026 17:57:24 +0800
Subject: [PATCH 11/15] [MISC][XY] Remove v3 resource files

---
 scripts/generate-skill-props.ts               |  11 +-
 skills/fds-build/SKILL-v4.md                  | 197 ------
 skills/fds-build/SKILL.md                     | 177 +++--
 .../{v3 => }/components/accordion.md          |   0
 .../resources/{v3 => }/components/alert.md    |   0
 .../{v3 => }/components/animation.md          |   0
 .../resources/{v3 => }/components/avatar.md   |   0
 .../resources/{v3 => }/components/badge.md    |   0
 .../{v3 => }/components/box-container.md      |   0
 .../{v3 => }/components/breadcrumb.md         |   0
 .../resources/{v4 => }/components/button.md   |   0
 .../resources/{v3 => }/components/calendar.md |   0
 .../resources/{v4 => }/components/card.md     |   0
 .../resources/{v3 => }/components/checkbox.md |   0
 .../{v3 => }/components/countdown-timer.md    |   0
 .../{v3 => }/components/data-table.md         |   0
 .../{v3 => }/components/date-navigator.md     |   0
 .../resources/{v3 => }/components/divider.md  |   0
 .../resources/{v4 => }/components/drawer.md   |   0
 .../{v3 => }/components/error-display.md      |   0
 .../{v3 => }/components/feedback-rating.md    |   0
 .../{v3 => }/components/file-download.md      |   0
 .../{v3 => }/components/file-upload.md        |   0
 .../resources/{v4 => }/components/filter.md   |   0
 .../resources/{v3 => }/components/footer.md   |   0
 .../{v4 => }/components/form-date-input.md    |   0
 .../components/form-date-range-input.md       |   0
 .../{v3 => }/components/form-e-signature.md   |   0
 .../{v4 => }/components/form-input.md         |   0
 .../{v4 => }/components/form-masked-input.md  |   0
 .../{v4 => }/components/form-multi-select.md  |   0
 .../components/form-nested-multi-select.md    |   0
 .../{v4 => }/components/form-nested-select.md |   0
 .../components/form-otp-verification.md       |   0
 .../components/form-phone-number-input.md     |   0
 .../components/form-predictive-text-input.md  |   0
 .../{v4 => }/components/form-select.md        |   0
 .../{v3 => }/components/form-slider.md        |   0
 .../{v4 => }/components/form-textarea.md      |   0
 .../components/form-time-range-picker.md      |   0
 .../{v4 => }/components/form-timepicker.md    |   0
 .../components/form-unit-number-input.md      |   0
 .../components/fullscreen-image-carousel.md   |   0
 .../{v3 => }/components/histogram-slider.md   |   0
 .../resources/{v4 => }/components/icon.md     |   0
 .../{v3 => }/components/image-button.md       |   0
 .../resources/{v4 => }/components/input.md    |   0
 .../{v3 => }/components/language-switcher.md  |   0
 .../resources/{v4 => }/components/layout.md   |   0
 .../{v3 => }/components/link-list.md          |   0
 .../{v3 => }/components/local-nav.md          |   0
 .../resources/{v3 => }/components/masthead.md |   0
 .../resources/{v4 => }/components/menu.md     |   0
 .../resources/{v4 => }/components/modal.md    |   0
 .../resources/{v3 => }/components/navbar.md   |   0
 .../components/notification-banner.md         |   0
 .../{v3 => }/components/pagination.md         |   0
 .../resources/{v3 => }/components/pill.md     |   0
 .../resources/{v4 => }/components/popover.md  |   0
 .../{v3 => }/components/progress-indicator.md |   0
 .../{v3 => }/components/radio-button.md       |   0
 .../resources/{v3 => }/components/schedule.md |   0
 .../resources/{v3 => }/components/sidenav.md  |   0
 .../{v3 => }/components/singpass-button.md    |   0
 .../{v3 => }/components/smart-app-banner.md   |   0
 .../resources/{v3 => }/components/tab.md      |   0
 .../resources/{v3 => }/components/table.md    |   0
 .../resources/{v3 => }/components/tag.md      |   0
 .../{v3 => }/components/text-list.md          |   0
 .../{v3 => }/components/time-slot-bar-week.md |   0
 .../{v3 => }/components/time-slot-bar.md      |   0
 .../components/time-slot-week-view.md         |   0
 .../resources/{v3 => }/components/timeline.md |   0
 .../{v3 => }/components/timetable.md          |   0
 .../resources/{v3 => }/components/toast.md    |   0
 .../resources/{v3 => }/components/toggle.md   |   0
 .../{v3 => }/components/typography.md         |   0
 .../{v3 => }/components/uneditable-section.md |   0
 .../layout-composition-patterns.md            |   0
 .../resources/{v4 => }/foundations/tokens.md  |  11 +-
 .../resources/{v4 => }/patterns/states.md     |   6 +-
 skills/fds-build/resources/setup/setup.md     | 190 ++++++
 .../resources/{v4 => }/templates/form.md      | 124 +---
 .../resources/{v4 => }/templates/listing.md   |   1 -
 .../v3/components/button-with-icon.md         |  19 -
 .../resources/v3/components/button.md         |  76 ---
 .../fds-build/resources/v3/components/card.md |  41 --
 .../resources/v3/components/drawer.md         |  79 ---
 .../resources/v3/components/filter.md         | 227 -------
 .../v3/components/form-date-input.md          |  80 ---
 .../v3/components/form-date-range-input.md    | 141 ----
 .../resources/v3/components/form-input.md     |  65 --
 .../v3/components/form-masked-input.md        |  69 --
 .../v3/components/form-multi-select.md        | 100 ---
 .../v3/components/form-nested-multi-select.md | 159 -----
 .../v3/components/form-nested-select.md       | 151 -----
 .../v3/components/form-phone-number-input.md  |  82 ---
 .../resources/v3/components/form-select.md    | 103 ---
 .../resources/v3/components/form-textarea.md  | 116 ----
 .../v3/components/form-time-range-picker.md   |  93 ---
 .../v3/components/form-timepicker.md          |  72 --
 .../v3/components/form-unit-number-input.md   | 133 ----
 .../resources/v3/components/icon-button.md    |  14 -
 .../fds-build/resources/v3/components/icon.md | 167 -----
 .../resources/v3/components/input.md          |  51 --
 .../resources/v3/components/layout.md         | 153 -----
 .../fds-build/resources/v3/components/menu.md | 108 ---
 .../resources/v3/components/modal.md          | 114 ----
 .../resources/v3/components/popover.md        |  80 ---
 .../resources/v3/components/tooltip.md        |  37 --
 .../layout-composition-patterns.md            |  47 --
 .../resources/v3/foundations/tokens.md        | 628 ------------------
 .../fds-build/resources/v3/patterns/states.md | 305 ---------
 skills/fds-build/resources/v3/setup/setup.md  | 369 ----------
 .../fds-build/resources/v3/templates/form.md  | 558 ----------------
 .../resources/v3/templates/listing.md         | 579 ----------------
 .../resources/v4/components/accordion.md      | 128 ----
 .../resources/v4/components/alert.md          |  54 --
 .../resources/v4/components/animation.md      |  18 -
 .../resources/v4/components/avatar.md         |  10 -
 .../resources/v4/components/badge.md          |  18 -
 .../resources/v4/components/box-container.md  |  61 --
 .../resources/v4/components/breadcrumb.md     |  67 --
 .../resources/v4/components/calendar.md       | 113 ----
 .../resources/v4/components/checkbox.md       |  53 --
 .../v4/components/countdown-timer.md          |  20 -
 .../resources/v4/components/data-table.md     | 142 ----
 .../resources/v4/components/date-navigator.md |  25 -
 .../resources/v4/components/divider.md        |  23 -
 .../resources/v4/components/error-display.md  | 137 ----
 .../v4/components/feedback-rating.md          |  61 --
 .../resources/v4/components/file-download.md  |  52 --
 .../resources/v4/components/file-upload.md    | 105 ---
 .../resources/v4/components/footer.md         |  94 ---
 .../v4/components/form-e-signature.md         |  55 --
 .../v4/components/form-otp-verification.md    | 175 -----
 .../components/form-predictive-text-input.md  | 108 ---
 .../resources/v4/components/form-slider.md    | 116 ----
 .../components/fullscreen-image-carousel.md   | 146 ----
 .../v4/components/histogram-slider.md         |  41 --
 .../resources/v4/components/image-button.md   |  12 -
 .../v4/components/language-switcher.md        |  15 -
 .../resources/v4/components/link-list.md      | 120 ----
 .../resources/v4/components/local-nav.md      | 111 ----
 .../resources/v4/components/masthead.md       |  14 -
 .../resources/v4/components/navbar.md         | 269 --------
 .../v4/components/notification-banner.md      | 106 ---
 .../resources/v4/components/pagination.md     | 103 ---
 .../fds-build/resources/v4/components/pill.md |  55 --
 .../v4/components/progress-indicator.md       |  47 --
 .../resources/v4/components/radio-button.md   |  66 --
 .../resources/v4/components/schedule.md       |  78 ---
 .../resources/v4/components/sidenav.md        | 183 -----
 .../v4/components/singpass-button.md          |  14 -
 .../v4/components/smart-app-banner.md         |  28 -
 .../fds-build/resources/v4/components/tab.md  | 107 ---
 .../resources/v4/components/table.md          |  65 --
 .../fds-build/resources/v4/components/tag.md  |  68 --
 .../resources/v4/components/text-list.md      |  44 --
 .../v4/components/time-slot-bar-week.md       |  66 --
 .../resources/v4/components/time-slot-bar.md  |  57 --
 .../v4/components/time-slot-week-view.md      |  70 --
 .../resources/v4/components/timeline.md       |  69 --
 .../resources/v4/components/timetable.md      | 123 ----
 .../resources/v4/components/toast.md          |  72 --
 .../resources/v4/components/toggle.md         | 119 ----
 .../resources/v4/components/typography.md     |  86 ---
 .../v4/components/uneditable-section.md       |  84 ---
 skills/fds-build/resources/v4/setup/setup.md  | 207 ------
 169 files changed, 285 insertions(+), 9728 deletions(-)
 delete mode 100644 skills/fds-build/SKILL-v4.md
 rename skills/fds-build/resources/{v3 => }/components/accordion.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/alert.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/animation.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/avatar.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/badge.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/box-container.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/breadcrumb.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/button.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/calendar.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/card.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/checkbox.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/countdown-timer.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/data-table.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/date-navigator.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/divider.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/drawer.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/error-display.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/feedback-rating.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/file-download.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/file-upload.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/filter.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/footer.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-date-input.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-date-range-input.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/form-e-signature.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-input.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-masked-input.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-multi-select.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-nested-multi-select.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-nested-select.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/form-otp-verification.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-phone-number-input.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/form-predictive-text-input.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-select.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/form-slider.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-textarea.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-time-range-picker.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-timepicker.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/form-unit-number-input.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/fullscreen-image-carousel.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/histogram-slider.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/icon.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/image-button.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/input.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/language-switcher.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/layout.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/link-list.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/local-nav.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/masthead.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/menu.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/modal.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/navbar.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/notification-banner.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/pagination.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/pill.md (100%)
 rename skills/fds-build/resources/{v4 => }/components/popover.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/progress-indicator.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/radio-button.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/schedule.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/sidenav.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/singpass-button.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/smart-app-banner.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/tab.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/table.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/tag.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/text-list.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/time-slot-bar-week.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/time-slot-bar.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/time-slot-week-view.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/timeline.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/timetable.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/toast.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/toggle.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/typography.md (100%)
 rename skills/fds-build/resources/{v3 => }/components/uneditable-section.md (100%)
 rename skills/fds-build/resources/{v4 => }/foundations/layout-composition-patterns.md (100%)
 rename skills/fds-build/resources/{v4 => }/foundations/tokens.md (97%)
 rename skills/fds-build/resources/{v4 => }/patterns/states.md (98%)
 create mode 100644 skills/fds-build/resources/setup/setup.md
 rename skills/fds-build/resources/{v4 => }/templates/form.md (81%)
 rename skills/fds-build/resources/{v4 => }/templates/listing.md (99%)
 delete mode 100644 skills/fds-build/resources/v3/components/button-with-icon.md
 delete mode 100644 skills/fds-build/resources/v3/components/button.md
 delete mode 100644 skills/fds-build/resources/v3/components/card.md
 delete mode 100644 skills/fds-build/resources/v3/components/drawer.md
 delete mode 100644 skills/fds-build/resources/v3/components/filter.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-date-input.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-date-range-input.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-input.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-masked-input.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-multi-select.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-nested-multi-select.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-nested-select.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-phone-number-input.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-select.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-textarea.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-time-range-picker.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-timepicker.md
 delete mode 100644 skills/fds-build/resources/v3/components/form-unit-number-input.md
 delete mode 100644 skills/fds-build/resources/v3/components/icon-button.md
 delete mode 100644 skills/fds-build/resources/v3/components/icon.md
 delete mode 100644 skills/fds-build/resources/v3/components/input.md
 delete mode 100644 skills/fds-build/resources/v3/components/layout.md
 delete mode 100644 skills/fds-build/resources/v3/components/menu.md
 delete mode 100644 skills/fds-build/resources/v3/components/modal.md
 delete mode 100644 skills/fds-build/resources/v3/components/popover.md
 delete mode 100644 skills/fds-build/resources/v3/components/tooltip.md
 delete mode 100644 skills/fds-build/resources/v3/foundations/layout-composition-patterns.md
 delete mode 100644 skills/fds-build/resources/v3/foundations/tokens.md
 delete mode 100644 skills/fds-build/resources/v3/patterns/states.md
 delete mode 100644 skills/fds-build/resources/v3/setup/setup.md
 delete mode 100644 skills/fds-build/resources/v3/templates/form.md
 delete mode 100644 skills/fds-build/resources/v3/templates/listing.md
 delete mode 100644 skills/fds-build/resources/v4/components/accordion.md
 delete mode 100644 skills/fds-build/resources/v4/components/alert.md
 delete mode 100644 skills/fds-build/resources/v4/components/animation.md
 delete mode 100644 skills/fds-build/resources/v4/components/avatar.md
 delete mode 100644 skills/fds-build/resources/v4/components/badge.md
 delete mode 100644 skills/fds-build/resources/v4/components/box-container.md
 delete mode 100644 skills/fds-build/resources/v4/components/breadcrumb.md
 delete mode 100644 skills/fds-build/resources/v4/components/calendar.md
 delete mode 100644 skills/fds-build/resources/v4/components/checkbox.md
 delete mode 100644 skills/fds-build/resources/v4/components/countdown-timer.md
 delete mode 100644 skills/fds-build/resources/v4/components/data-table.md
 delete mode 100644 skills/fds-build/resources/v4/components/date-navigator.md
 delete mode 100644 skills/fds-build/resources/v4/components/divider.md
 delete mode 100644 skills/fds-build/resources/v4/components/error-display.md
 delete mode 100644 skills/fds-build/resources/v4/components/feedback-rating.md
 delete mode 100644 skills/fds-build/resources/v4/components/file-download.md
 delete mode 100644 skills/fds-build/resources/v4/components/file-upload.md
 delete mode 100644 skills/fds-build/resources/v4/components/footer.md
 delete mode 100644 skills/fds-build/resources/v4/components/form-e-signature.md
 delete mode 100644 skills/fds-build/resources/v4/components/form-otp-verification.md
 delete mode 100644 skills/fds-build/resources/v4/components/form-predictive-text-input.md
 delete mode 100644 skills/fds-build/resources/v4/components/form-slider.md
 delete mode 100644 skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
 delete mode 100644 skills/fds-build/resources/v4/components/histogram-slider.md
 delete mode 100644 skills/fds-build/resources/v4/components/image-button.md
 delete mode 100644 skills/fds-build/resources/v4/components/language-switcher.md
 delete mode 100644 skills/fds-build/resources/v4/components/link-list.md
 delete mode 100644 skills/fds-build/resources/v4/components/local-nav.md
 delete mode 100644 skills/fds-build/resources/v4/components/masthead.md
 delete mode 100644 skills/fds-build/resources/v4/components/navbar.md
 delete mode 100644 skills/fds-build/resources/v4/components/notification-banner.md
 delete mode 100644 skills/fds-build/resources/v4/components/pagination.md
 delete mode 100644 skills/fds-build/resources/v4/components/pill.md
 delete mode 100644 skills/fds-build/resources/v4/components/progress-indicator.md
 delete mode 100644 skills/fds-build/resources/v4/components/radio-button.md
 delete mode 100644 skills/fds-build/resources/v4/components/schedule.md
 delete mode 100644 skills/fds-build/resources/v4/components/sidenav.md
 delete mode 100644 skills/fds-build/resources/v4/components/singpass-button.md
 delete mode 100644 skills/fds-build/resources/v4/components/smart-app-banner.md
 delete mode 100644 skills/fds-build/resources/v4/components/tab.md
 delete mode 100644 skills/fds-build/resources/v4/components/table.md
 delete mode 100644 skills/fds-build/resources/v4/components/tag.md
 delete mode 100644 skills/fds-build/resources/v4/components/text-list.md
 delete mode 100644 skills/fds-build/resources/v4/components/time-slot-bar-week.md
 delete mode 100644 skills/fds-build/resources/v4/components/time-slot-bar.md
 delete mode 100644 skills/fds-build/resources/v4/components/time-slot-week-view.md
 delete mode 100644 skills/fds-build/resources/v4/components/timeline.md
 delete mode 100644 skills/fds-build/resources/v4/components/timetable.md
 delete mode 100644 skills/fds-build/resources/v4/components/toast.md
 delete mode 100644 skills/fds-build/resources/v4/components/toggle.md
 delete mode 100644 skills/fds-build/resources/v4/components/typography.md
 delete mode 100644 skills/fds-build/resources/v4/components/uneditable-section.md
 delete mode 100644 skills/fds-build/resources/v4/setup/setup.md

diff --git a/scripts/generate-skill-props.ts b/scripts/generate-skill-props.ts
index f54e1b7ecc..581b2a139c 100644
--- a/scripts/generate-skill-props.ts
+++ b/scripts/generate-skill-props.ts
@@ -243,9 +243,7 @@ function main() {
         skipAddingFilesFromTsConfig: true,
     });
 
-    const resourceDirs = ["v3", "v4"].map((v) =>
-        path.join(SKILLS_RESOURCES_DIR, v, "components")
-    );
+    const resourceDirs = [path.join(SKILLS_RESOURCES_DIR, "components")];
 
     let updated = 0;
     let skipped = 0;
@@ -253,7 +251,6 @@ function main() {
 
     for (const dir of resourceDirs) {
         if (!fs.existsSync(dir)) continue;
-        const version = path.basename(path.dirname(dir));
 
         for (const file of fs.readdirSync(dir).sort()) {
             if (!file.endsWith(".md")) continue;
@@ -267,15 +264,13 @@ function main() {
                 skipped++;
                 if (process.env.VERBOSE) {
                     console.log(
-                        `  skip  [${version}] ${file}${
-                            reason ? ` (${reason})` : ""
-                        }`
+                        `  skip  ${file}${reason ? ` (${reason})` : ""}`
                     );
                 }
             } else {
                 updated++;
                 updatedPaths.push(filePath);
-                console.log(`  props [${version}] ${file}`);
+                console.log(`  props ${file}`);
             }
         }
     }
diff --git a/skills/fds-build/SKILL-v4.md b/skills/fds-build/SKILL-v4.md
deleted file mode 100644
index d0b702a3da..0000000000
--- a/skills/fds-build/SKILL-v4.md
+++ /dev/null
@@ -1,197 +0,0 @@
----
-name: "fds-build-v4"
-description: "Use when building with @lifesg/react-design-system v4 (alpha). Covers composition rules, correct import patterns, token usage, and component discovery. Apply whenever the user's package.json has @lifesg/react-design-system ^4.x."
-metadata:
-    version: "4.0.0-alpha"
-    audience: external
-    category: design-system
----
-
-# Flagship Design System v4 — Agent Skill
-
-You are helping build web applications with **`@lifesg/react-design-system` v4** for government digital products.
-
-> **Pre-release:** v4 is in alpha. ThemeProvider API and token shapes are locked; CSS URLs still reference v3 CDN paths for fonts.
-
-This file covers v4-specific setup and rules. For components not yet documented in `resources/v4/`, fall back to `resources/v3/` component docs — most component APIs are unchanged.
-
-> **⚠ When using v3 docs as a fallback:**
->
-> -   **Do not copy styled-components patterns** — v4 uses CSS Modules. Any `styled-components` usage, theme props (`p.theme.color.*`), or `StyleSheetManager` from v3 examples will fail.
-> -   **v3 design tokens do not exist in v4** — `Color`, `FontSize`, `TextStyleUtils`, etc. are not exported. Use `var(--fds-colour-*)` / `var(--fds-font-*)` CSS variables or the `Colour`/`Spacing` helpers from `@lifesg/react-design-system/theme` instead.
-
----
-
-## Install
-
-```bash
-npm install @lifesg/react-design-system @lifesg/react-icons @floating-ui/react
-```
-
-Do not install `styled-components` — v4 uses CSS Modules for custom styles.
-
-Peer deps: `react` + `react-dom` (^17, ^18, or ^19).
-
-**If the project is new or missing setup** — read `./resources/v4/setup/setup.md` for the full CSS/ThemeProvider/Vite walkthrough before writing any component code.
-
----
-
-## Migrating from v3
-
-If the codebase has v3 patterns, do not carry them into v4:
-
-| v3 pattern                                                              | v4 replacement                                                                                      |
-| ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `import { Color } from "@lifesg/react-design-system/color"`             | `import { Colour } from "@lifesg/react-design-system/theme"` or `var(--fds-colour-*)` CSS variables |
-| `import { TextStyleUtils } from "@lifesg/react-design-system/text"`     | `var(--fds-font-*)` CSS variables                                                                   |
-| `import { FontSize } from "@lifesg/react-design-system/spec/text-spec"` | `var(--fds-font-size-*)` CSS variables                                                              |
-| `styled-components` theme (`${(p) => p.theme.color...}`)                | CSS Modules with `var(--fds-colour-*)`                                                              |
-| `StyleSheetManager` / `ThemeProvider` from `styled-components`          | `ThemeProvider` from `@lifesg/react-design-system/theme`                                            |
-
-v3 design tokens (`Color`, `FontSize`, `TextStyleUtils`, etc.) are **not exported** from v4 — using them will cause import errors. Use CSS variables or the `Colour` / `Spacing` / `Typography` helpers from `@lifesg/react-design-system/theme` instead.
-
----
-
-## ThemeProvider (required)
-
-Every app must wrap all components in `ThemeProvider`. Without it, components throw errors.
-
-```tsx
-import { ThemeProvider } from "@lifesg/react-design-system/theme";
-import "@lifesg/react-design-system/theme/styles/lifesg.css";
-
-export default function App() {
-    return <ThemeProvider theme="lifesg">{/* your app */}</ThemeProvider>;
-}
-```
-
-Theme is a **string**: `"lifesg"` · `"bookingsg"` · `"ccube"` · `"mylegacy"` · `"oneservice"` · `"pa"` · `"supportgowhere"` · `"sgw-digital-lobby"` · `"careercompass"` · `"rbs"` · `"imda"` · `"spf"` · `"smgs"` · `"a11y-playground"`
-
-Dark/light mode: `mode` prop defaults to `"auto"` (OS preference). Override with `mode="light"` or `mode="dark"`.
-
----
-
-## Component imports
-
-Always use subpath imports:
-
-```tsx
-import { Button } from "@lifesg/react-design-system/button";
-import { Form } from "@lifesg/react-design-system/form";
-```
-
----
-
-## Page structure
-
-Every page must have `Navbar` at the top and `Footer` at the bottom.
-
-```tsx
-import { Navbar } from "@lifesg/react-design-system/navbar";
-import { Footer } from "@lifesg/react-design-system/footer";
-
-<Navbar
-    resources={{ primary: { brandName: "MyService", logoSrc: "/logo.svg" } }}
-    items={{ desktop: [{ id: "home", children: "Home", href: "/" }] }}
-/>;
-{
-    /* page content */
-}
-<Footer />;
-```
-
----
-
-## Design tokens
-
-Tokens are **plain CSS variable strings** — use directly in CSS Modules or inline styles.
-
-Prefer CSS Modules for layout and responsive styles:
-
-```css
-/* Component.module.css */
-.card {
-    background: var(--fds-colour-bg-strong);
-    padding: var(--fds-spacing-24);
-    border-radius: var(--fds-radius-md);
-
-    :global(body.fds-breakpoint-lg-min) & {
-        padding: var(--fds-spacing-32);
-    }
-}
-```
-
-> **CSS Modules gotcha:** always use `:global(body.fds-breakpoint-lg-min)` — never `:where(body.fds-breakpoint-lg-min)`. CSS Modules scopes every class selector it finds; `:global()` opts the breakpoint class out of scoping so it matches the runtime class `ThemeProvider` adds to `document.body`.
-
-Inline styles work for simple one-off values:
-
-```tsx
-import { Colour, Spacing } from "@lifesg/react-design-system/theme";
-
-<div style={{ color: Colour.text, padding: Spacing["spacing-24"] }} />;
-```
-
-**Responsive breakpoints** use body class selectors added by `ThemeProvider`:
-
--   `body.fds-breakpoint-lg-min` — viewport ≥ lg (769px)
--   `body.fds-breakpoint-md-min` — viewport ≥ md (481px)
--   `body.fds-breakpoint-xl-min` — viewport ≥ xl (1201px)
-
----
-
-## Icons
-
-1. `@lifesg/react-icons` first — read `./resources/v3/components/icon.md` to discover available icon names.
-2. `material-symbols` as fallback only.
-3. Never guess icon names — verify the import exists before using.
-
----
-
-## Rules
-
--   Sentence case for all UI text — "Save changes" not "Save Changes"
--   DS components over raw HTML — `Button` not `<button>`, `Form.Input` not `<input>`
--   `Form.*` fields: `label` always required; `errorMessage` only after validation fails; `readOnly` on review screens, not `disabled`
--   Never hardcode `px` values — always use `Spacing` tokens
--   All `Form.*` components import from `@lifesg/react-design-system/form`
-
----
-
-## For AI agents — task → resource map
-
-This skill is self-contained — all resource files live under `./resources/` relative to this file. No npm install or external lookup needed.
-
-**Do not write component code without reading its resource file first.**
-
-| Task                                                                  | What to read                                                                                        |
-| --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| New project / missing setup                                           | `./resources/v4/setup/setup.md`                                                                     |
-| Find the right component                                              | `./catalogue.md` — search "Also known as" column by keyword                                         |
-| Use a component                                                       | Check `./resources/v4/components/{name}/` first; fall back to `./resources/v3/components/{name}.md` |
-| Grid system, breakpoints, column widths                               | `./resources/v4/components/layout.md`                                                               |
-| Build a form page (single or multi-step)                              | Check `./resources/v4/templates/form.md`; fall back to `./resources/v3/templates/form.md`           |
-| Build a listing / search results page                                 | `./resources/v4/templates/listing.md`                                                               |
-| Handle loading / error / empty states                                 | `./resources/v4/patterns/states.md`                                                                 |
-| Token question (Colour, Spacing, Radius, Typography)                  | `./resources/v4/foundations/tokens.md`                                                              |
-| Spacing rhythm, visual hierarchy, card rules, settings page structure | `./resources/v4/foundations/layout-composition-patterns.md`                                         |
-
-**Reading strategy:** read `catalogue.md` once for discovery, then fetch only the specific component `{name}.md` files you need. Do not pre-load all component files.
-
----
-
-## Gotchas
-
-| Symptom                                                                   | Fix                                                                                                                                                                                                                                                                |
-| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Components throw errors                                                   | Add `ThemeProvider` from `@lifesg/react-design-system/theme`                                                                                                                                                                                                       |
-| No styles / wrong fonts                                                   | Read `./resources/v4/setup/setup.md` — CSS imports are likely missing or mismatched                                                                                                                                                                                |
-| Font falls back to serif (Times)                                          | `body { font-family }` not set — add `font-family: var(--fds-font-family-body)` to `index.css`                                                                                                                                                                     |
-| `default.css` import fails / not found                                    | `default.css` does not exist in v4 — each theme CSS is self-contained. Import only `theme/styles/{theme}.css`                                                                                                                                                      |
-| `Layout.Container` has no horizontal padding / content flush to left edge | CSS reset uses `* { padding: 0 }` — this is unlayered and overrides `@layer fds` component padding. Use only `body { margin: 0 }`. Never put `padding`/`margin` resets on `*`, `ul`, `li`, `h1`–`h6`, `p`, or any other element selector. See setup.md reset block |
-| Navbar items squished together / no space between nav links               | Same cause as above — `li { margin: 0 }` in an unlayered reset wipes the Navbar's `@layer fds` item margins. Use the minimal reset in setup.md                                                                                                                     |
-| Footer doesn't stick to bottom on short pages                             | v4 `ThemeProvider` renders a wrapper `<div>` as the only child of `#root`, breaking the flex column. Add `#root > div { display: flex; flex-direction: column; flex: 1 }` to `index.css` (or `body > div` for Next.js)                                             |
-| Responsive breakpoint rules don't fire                                    | Using `:where(body.fds-breakpoint-*)` — replace with `:global(body.fds-breakpoint-*)` so CSS Modules doesn't scope the class                                                                                                                                       |
-| Theme CSS not loading                                                     | Vite resolves `node_modules` CSS automatically; other tools need CSS resolver config                                                                                                                                                                               |
-| `styled-components` import error                                          | Remove it — v4 uses CSS Modules; use `className={styles.x}` with a `.module.css` file                                                                                                                                                                              |
-| `RadioButton` with children throws in React 19                            | v4 `RadioButton` spreads all props (including `children`) onto `<input>` — React 19 rejects children on void elements. Wrap in `<label>` with text outside: `<label><RadioButton .../> Label text</label>`                                                         |
-| Next.js App Router: no `#root` element                                    | Next.js renders into `<body>` directly. Replace `#root { ... }` with those styles on `body`, and `#root > div` with `body > div`. See setup.md Next.js section                                                                                                     |
diff --git a/skills/fds-build/SKILL.md b/skills/fds-build/SKILL.md
index 42fec301cc..650f1be8f3 100644
--- a/skills/fds-build/SKILL.md
+++ b/skills/fds-build/SKILL.md
@@ -1,8 +1,8 @@
 ---
 name: "fds-build"
-description: "Use when building with @lifesg/react-design-system v3. Covers composition rules, correct import patterns, styled-components token usage, and component discovery. Apply whenever the user's package.json has @lifesg/react-design-system ^3.x (or no version). If package.json shows ^4.x, load SKILL-v4.md instead."
+description: "Use when building with @lifesg/react-design-system v4. Covers composition rules, correct import patterns, token usage, and component discovery."
 metadata:
-    version: "3.x"
+    version: "4.0.0-alpha"
     audience: external
     category: design-system
 ---
@@ -11,50 +11,38 @@ metadata:
 
 You are helping build web applications with **`@lifesg/react-design-system`** for government digital products.
 
-## Version check
-
-Read `@lifesg/react-design-system` version from the consumer's `package.json` before doing anything else:
-
--   `^4.x` → stop here, load **`SKILL-v4.md`** instead
--   `^3.x` or not found → continue with this file (v3)
-
-**Key differences if you need to compare:**
-
-|               | v3                                                          | v4                                                                |
-| ------------- | ----------------------------------------------------------- | ----------------------------------------------------------------- |
-| Styling       | `styled-components` peer dep required                       | No `styled-components` — CSS Modules / inline styles              |
-| ThemeProvider | `StyleSheetManager` + `ThemeProvider` with theme **object** | `ThemeProvider` with theme **string**, no wrapper needed          |
-| CSS setup     | CDN `main.css` only                                         | CDN font + `theme/styles/{theme}.css` from package                |
-| Design tokens | Interpolation functions — template literals only            | Plain CSS variable strings — inline styles, CSS Modules, anywhere |
-
 ---
 
 ## Install
 
 ```bash
-npm install @lifesg/react-design-system @lifesg/react-icons styled-components @floating-ui/react @emotion/is-prop-valid
+npm install @lifesg/react-design-system @lifesg/react-icons @floating-ui/react
 ```
 
+Do not install `styled-components` — v4 uses CSS Modules for custom styles.
+
 Peer deps: `react` + `react-dom` (^17, ^18, or ^19).
 
-**If the project is new or missing setup** — read `./resources/v3/setup/setup.md` for the full CSS/ThemeProvider/Vite walkthrough before writing any component code.
+**If the project is new or missing setup** — read `./resources/setup/setup.md` for the full CSS/ThemeProvider/Vite walkthrough before writing any component code.
 
 ---
 
-## ThemeProvider (required)
+## ThemeProvider
 
-Every app must wrap all components in `ThemeProvider`. Without it, components throw errors.
+Wrap your app in `ThemeProvider` to apply the correct theme CSS variables and enable dark/light mode.
 
 ```tsx
-import { ThemeProvider } from "styled-components";
-import { LifeSGTheme } from "@lifesg/react-design-system/theme";
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+import "@lifesg/react-design-system/theme/styles/lifesg.css";
 
 export default function App() {
-    return <ThemeProvider theme={LifeSGTheme}>{/* your app */}</ThemeProvider>;
+    return <ThemeProvider theme="lifesg">{/* your app */}</ThemeProvider>;
 }
 ```
 
-Theme is an **imported object** — not a string. Available themes: `LifeSGTheme` · `BookingSGTheme` · `CCubeTheme` · `MyLegacyTheme` · `OneServiceTheme` · `PATheme` · `SupportGoWhereTheme` · `SGWDigitalLobbyTheme` · `IMDATheme` · `SPFTheme` · `SMGSTheme` · `A11yPlaygroundTheme`
+Theme is a **string**: `"lifesg"` · `"bookingsg"` · `"ccube"` · `"mylegacy"` · `"oneservice"` · `"pa"` · `"supportgowhere"` · `"sgw-digital-lobby"` · `"careercompass"` · `"rbs"` · `"imda"` · `"spf"` · `"smgs"` · `"a11y-playground"`
+
+Dark/light mode: `mode` prop defaults to `"auto"` (OS preference). Override with `mode="light"` or `mode="dark"`.
 
 ---
 
@@ -71,39 +59,64 @@ import { Form } from "@lifesg/react-design-system/form";
 
 ## Page structure
 
-Every page must have `Navbar` at the top and `Footer` at the bottom. Page shells are defined in their respective pattern/template files — see the task map below.
+Every page must have `Navbar` at the top and `Footer` at the bottom.
+
+```tsx
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+
+<Navbar
+    resources={{ primary: { brandName: "MyService", logoSrc: "/logo.svg" } }}
+    items={{ desktop: [{ id: "home", children: "Home", href: "/" }] }}
+/>;
+{
+    /* page content */
+}
+<Footer />;
+```
 
 ---
 
 ## Design tokens
 
-Tokens are **styled-components interpolation functions** — use only inside `styled` template literals, never in inline `style={{}}` props.
+Tokens are **plain CSS variable strings** — use directly in CSS Modules or inline styles.
+
+Prefer CSS Modules for layout and responsive styles:
+
+```css
+/* Component.module.css */
+.card {
+    background: var(--fds-colour-bg-strong);
+    padding: var(--fds-spacing-24);
+    border-radius: var(--fds-radius-md);
+
+    :global(body.fds-breakpoint-lg-min) & {
+        padding: var(--fds-spacing-32);
+    }
+}
+```
+
+> **CSS Modules gotcha:** always use `:global(body.fds-breakpoint-lg-min)` — never `:where(body.fds-breakpoint-lg-min)`. CSS Modules scopes every class selector it finds; `:global()` opts the breakpoint class out of scoping so it matches the runtime class `ThemeProvider` adds to `document.body`.
+
+Inline styles work for simple one-off values:
 
 ```tsx
-import styled from "styled-components";
-import {
-    Colour,
-    Font,
-    Spacing,
-    Radius,
-} from "@lifesg/react-design-system/theme";
-
-const Card = styled.div`
-    background: ${Colour["bg-strong"]};
-    color: ${Colour.text};
-    padding: ${Spacing["spacing-24"]};
-    border-radius: ${Radius.md};
-    ${Font["body-baseline-regular"]}
-`;
+import { Colour, Spacing } from "@lifesg/react-design-system/theme";
+
+<div style={{ color: Colour.text, padding: Spacing["spacing-24"] }} />;
 ```
 
-Never hardcode `px` values — always use `Spacing` tokens.
+**Responsive breakpoints** use body class selectors added by `ThemeProvider`:
+
+-   `body.fds-breakpoint-lg-min` — viewport ≥ lg (769px)
+-   `body.fds-breakpoint-md-min` — viewport ≥ md (481px)
+-   `body.fds-breakpoint-xl-min` — viewport ≥ xl (1201px)
 
 ---
 
 ## Icons
 
-1. `@lifesg/react-icons` first — read `./resources/v3/components/icon.md` to discover available icon names.
+1. `@lifesg/react-icons` first — read `./resources/components/icon.md` to discover available icon names.
 2. `material-symbols` as fallback only.
 3. Never guess icon names — verify the import exists before using.
 
@@ -112,58 +125,30 @@ Never hardcode `px` values — always use `Spacing` tokens.
 ## Rules
 
 -   Sentence case for all UI text — "Save changes" not "Save Changes"
--   DS components over raw HTML — `Button.Default` not `<button>`, `Form.Input` not `<input>`
+-   DS components over raw HTML — `Button` not `<button>`, `Form.Input` not `<input>`
 -   `Form.*` fields: `label` always required; `errorMessage` only after validation fails; `readOnly` on review screens, not `disabled`
 -   Never hardcode `px` values — always use `Spacing` tokens
 -   All `Form.*` components import from `@lifesg/react-design-system/form`
 
 ---
 
-## Component selection — ambiguous pairs
-
-Consult this before picking a component. Do not read individual component files to compare — use this table.
-
-| UI need                                           | Use                                      | Not                           |
-| ------------------------------------------------- | ---------------------------------------- | ----------------------------- |
-| Form input needing a visible card-style label     | `Toggle`                                 | `Checkbox`, `RadioButton`     |
-| Table row selection or filter list tick-box       | `Checkbox`                               | `Toggle`                      |
-| Binary yes / no question in a form                | `Toggle type="yes"` + `Toggle type="no"` | `RadioButton`                 |
-| Compact single-choice in a filter panel           | `RadioButton`                            | `Toggle`                      |
-| Block user with a focused action / confirmation   | `Modal`                                  | `Drawer`, `Popover`           |
-| Slide-in panel, filter sheet, side tray           | `Drawer`                                 | `Modal`                       |
-| Anchored floating panel with interactive content  | `Popover`                                | `Tooltip`                     |
-| Short non-interactive hover / focus hint          | `Tooltip`                                | `Popover`                     |
-| Multiple independently collapsible panels         | `Accordion`                              | `BoxContainer`                |
-| Single collapsible section with optional Edit CTA | `BoxContainer`                           | `Accordion`                   |
-| Static status label (1–2 words, no interaction)   | `Pill`                                   | `Tag`, `Badge`                |
-| Removable or interactive filter / category chip   | `Tag`                                    | `Pill`                        |
-| Numeric count overlaid on an icon or element      | `Badge`                                  | `Pill`, `Tag`                 |
-| Inline contextual message within page content     | `Alert`                                  | `NotificationBanner`, `Toast` |
-| Persistent announcement banner below Navbar       | `NotificationBanner`                     | `Alert`, `Toast`              |
-| Transient auto-dismissing feedback message        | `Toast`                                  | `Alert`, `NotificationBanner` |
-| Admin / internal table with 4+ structured columns | `DataTable`                              | `Table`, card list            |
-| Citizen-facing record listing or search results   | card list                                | `DataTable`                   |
-| Basic read-only table, no sorting or selection    | `Table`                                  | `DataTable`                   |
-
----
-
 ## For AI agents — task → resource map
 
 This skill is self-contained — all resource files live under `./resources/` relative to this file. No npm install or external lookup needed.
 
 **Do not write component code without reading its resource file first.**
 
-| Task                                                                  | What to read                                                           |
-| --------------------------------------------------------------------- | ---------------------------------------------------------------------- |
-| New project / missing setup                                           | `./resources/v3/setup/setup.md`                                        |
-| Find the right component                                              | `./catalogue.md` — search "Also known as" column by keyword            |
-| Use a component                                                       | `./resources/v3/components/{name}.md` — contains props AND usage rules |
-| Grid system, breakpoints, column widths                               | `./resources/v3/components/layout.md`                                  |
-| Build a form page (single or multi-step)                              | `./resources/v3/templates/form.md`                                     |
-| Build a listing / search results page                                 | `./resources/v3/templates/listing.md`                                  |
-| Handle loading / error / empty states                                 | `./resources/v3/patterns/states.md`                                    |
-| Token question (Colour, Spacing, Radius, Typography)                  | `./resources/v3/foundations/tokens.md`                                 |
-| Spacing rhythm, visual hierarchy, card rules, settings page structure | `./resources/v3/foundations/layout-composition-patterns.md`            |
+| Task                                                                  | What to read                                                |
+| --------------------------------------------------------------------- | ----------------------------------------------------------- |
+| New project / missing setup                                           | `./resources/setup/setup.md`                                |
+| Find the right component                                              | `./catalogue.md` — search "Also known as" column by keyword |
+| Use a component                                                       | `./resources/components/{name}.md`                          |
+| Grid system, breakpoints, column widths                               | `./resources/components/layout.md`                          |
+| Build a form page (single or multi-step)                              | `./resources/templates/form.md`                             |
+| Build a listing / search results page                                 | `./resources/templates/listing.md`                          |
+| Handle loading / error / empty states                                 | `./resources/patterns/states.md`                            |
+| Token question (Colour, Spacing, Radius, Typography)                  | `./resources/foundations/tokens.md`                         |
+| Spacing rhythm, visual hierarchy, card rules, settings page structure | `./resources/foundations/layout-composition-patterns.md`    |
 
 **Reading strategy:** read `catalogue.md` once for discovery, then fetch only the specific component `{name}.md` files you need. Do not pre-load all component files.
 
@@ -171,16 +156,12 @@ This skill is self-contained — all resource files live under `./resources/` re
 
 ## Gotchas
 
-| Symptom                      | Fix                                                                             |
-| ---------------------------- | ------------------------------------------------------------------------------- |
-| Components throw errors      | Add `ThemeProvider` wrapping app root                                           |
-| No styles / wrong fonts      | Read `./resources/v3/setup/setup.md` — CSS imports likely missing or mismatched |
-| Token in inline `style={{}}` | Tokens are functions — move to a `styled` template literal                      |
-
----
-
-<!-- dev note -->
-
-## Keeping props up to date
-
-Run `npm run generate:skill-props` from the repo root after upgrading `@lifesg/react-design-system` or modifying types in `src/`. The script reads each component's `types.ts` via ts-morph and regenerates the `## Props` tables in all resource files under `./resources/`.
+| Symptom                                        | Fix                                                                                                                                                                                                        |
+| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| No styles / wrong fonts                        | Read `./resources/setup/setup.md` — `main.css` CDN link or theme CSS import is likely missing                                                                                                              |
+| Footer doesn't stick to bottom on short pages  | Apply a `className` to `ThemeProvider` and target that selector with `display: flex; flex-direction: column; flex: 1`                                                                                      |
+| Responsive breakpoint rules don't fire         | Using `:where(body.fds-breakpoint-*)` — replace with `:global(body.fds-breakpoint-*)` so CSS Modules doesn't scope the class                                                                               |
+| Theme CSS not loading                          | Vite resolves `node_modules` CSS automatically; other tools need CSS resolver config                                                                                                                       |
+| `styled-components` import error               | Remove it — v4 uses CSS Modules; use `className={styles.x}` with a `.module.css` file                                                                                                                      |
+| `RadioButton` with children throws in React 19 | v4 `RadioButton` spreads all props (including `children`) onto `<input>` — React 19 rejects children on void elements. Wrap in `<label>` with text outside: `<label><RadioButton .../> Label text</label>` |
+| Next.js App Router: no `#root` element         | Next.js renders into `<body>` directly. Replace `#root { ... }` with those styles on `body`, and `#root > div` with `body > div`. See setup.md Next.js section                                             |
diff --git a/skills/fds-build/resources/v3/components/accordion.md b/skills/fds-build/resources/components/accordion.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/accordion.md
rename to skills/fds-build/resources/components/accordion.md
diff --git a/skills/fds-build/resources/v3/components/alert.md b/skills/fds-build/resources/components/alert.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/alert.md
rename to skills/fds-build/resources/components/alert.md
diff --git a/skills/fds-build/resources/v3/components/animation.md b/skills/fds-build/resources/components/animation.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/animation.md
rename to skills/fds-build/resources/components/animation.md
diff --git a/skills/fds-build/resources/v3/components/avatar.md b/skills/fds-build/resources/components/avatar.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/avatar.md
rename to skills/fds-build/resources/components/avatar.md
diff --git a/skills/fds-build/resources/v3/components/badge.md b/skills/fds-build/resources/components/badge.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/badge.md
rename to skills/fds-build/resources/components/badge.md
diff --git a/skills/fds-build/resources/v3/components/box-container.md b/skills/fds-build/resources/components/box-container.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/box-container.md
rename to skills/fds-build/resources/components/box-container.md
diff --git a/skills/fds-build/resources/v3/components/breadcrumb.md b/skills/fds-build/resources/components/breadcrumb.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/breadcrumb.md
rename to skills/fds-build/resources/components/breadcrumb.md
diff --git a/skills/fds-build/resources/v4/components/button.md b/skills/fds-build/resources/components/button.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/button.md
rename to skills/fds-build/resources/components/button.md
diff --git a/skills/fds-build/resources/v3/components/calendar.md b/skills/fds-build/resources/components/calendar.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/calendar.md
rename to skills/fds-build/resources/components/calendar.md
diff --git a/skills/fds-build/resources/v4/components/card.md b/skills/fds-build/resources/components/card.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/card.md
rename to skills/fds-build/resources/components/card.md
diff --git a/skills/fds-build/resources/v3/components/checkbox.md b/skills/fds-build/resources/components/checkbox.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/checkbox.md
rename to skills/fds-build/resources/components/checkbox.md
diff --git a/skills/fds-build/resources/v3/components/countdown-timer.md b/skills/fds-build/resources/components/countdown-timer.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/countdown-timer.md
rename to skills/fds-build/resources/components/countdown-timer.md
diff --git a/skills/fds-build/resources/v3/components/data-table.md b/skills/fds-build/resources/components/data-table.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/data-table.md
rename to skills/fds-build/resources/components/data-table.md
diff --git a/skills/fds-build/resources/v3/components/date-navigator.md b/skills/fds-build/resources/components/date-navigator.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/date-navigator.md
rename to skills/fds-build/resources/components/date-navigator.md
diff --git a/skills/fds-build/resources/v3/components/divider.md b/skills/fds-build/resources/components/divider.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/divider.md
rename to skills/fds-build/resources/components/divider.md
diff --git a/skills/fds-build/resources/v4/components/drawer.md b/skills/fds-build/resources/components/drawer.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/drawer.md
rename to skills/fds-build/resources/components/drawer.md
diff --git a/skills/fds-build/resources/v3/components/error-display.md b/skills/fds-build/resources/components/error-display.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/error-display.md
rename to skills/fds-build/resources/components/error-display.md
diff --git a/skills/fds-build/resources/v3/components/feedback-rating.md b/skills/fds-build/resources/components/feedback-rating.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/feedback-rating.md
rename to skills/fds-build/resources/components/feedback-rating.md
diff --git a/skills/fds-build/resources/v3/components/file-download.md b/skills/fds-build/resources/components/file-download.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/file-download.md
rename to skills/fds-build/resources/components/file-download.md
diff --git a/skills/fds-build/resources/v3/components/file-upload.md b/skills/fds-build/resources/components/file-upload.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/file-upload.md
rename to skills/fds-build/resources/components/file-upload.md
diff --git a/skills/fds-build/resources/v4/components/filter.md b/skills/fds-build/resources/components/filter.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/filter.md
rename to skills/fds-build/resources/components/filter.md
diff --git a/skills/fds-build/resources/v3/components/footer.md b/skills/fds-build/resources/components/footer.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/footer.md
rename to skills/fds-build/resources/components/footer.md
diff --git a/skills/fds-build/resources/v4/components/form-date-input.md b/skills/fds-build/resources/components/form-date-input.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-date-input.md
rename to skills/fds-build/resources/components/form-date-input.md
diff --git a/skills/fds-build/resources/v4/components/form-date-range-input.md b/skills/fds-build/resources/components/form-date-range-input.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-date-range-input.md
rename to skills/fds-build/resources/components/form-date-range-input.md
diff --git a/skills/fds-build/resources/v3/components/form-e-signature.md b/skills/fds-build/resources/components/form-e-signature.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/form-e-signature.md
rename to skills/fds-build/resources/components/form-e-signature.md
diff --git a/skills/fds-build/resources/v4/components/form-input.md b/skills/fds-build/resources/components/form-input.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-input.md
rename to skills/fds-build/resources/components/form-input.md
diff --git a/skills/fds-build/resources/v4/components/form-masked-input.md b/skills/fds-build/resources/components/form-masked-input.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-masked-input.md
rename to skills/fds-build/resources/components/form-masked-input.md
diff --git a/skills/fds-build/resources/v4/components/form-multi-select.md b/skills/fds-build/resources/components/form-multi-select.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-multi-select.md
rename to skills/fds-build/resources/components/form-multi-select.md
diff --git a/skills/fds-build/resources/v4/components/form-nested-multi-select.md b/skills/fds-build/resources/components/form-nested-multi-select.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-nested-multi-select.md
rename to skills/fds-build/resources/components/form-nested-multi-select.md
diff --git a/skills/fds-build/resources/v4/components/form-nested-select.md b/skills/fds-build/resources/components/form-nested-select.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-nested-select.md
rename to skills/fds-build/resources/components/form-nested-select.md
diff --git a/skills/fds-build/resources/v3/components/form-otp-verification.md b/skills/fds-build/resources/components/form-otp-verification.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/form-otp-verification.md
rename to skills/fds-build/resources/components/form-otp-verification.md
diff --git a/skills/fds-build/resources/v4/components/form-phone-number-input.md b/skills/fds-build/resources/components/form-phone-number-input.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-phone-number-input.md
rename to skills/fds-build/resources/components/form-phone-number-input.md
diff --git a/skills/fds-build/resources/v3/components/form-predictive-text-input.md b/skills/fds-build/resources/components/form-predictive-text-input.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/form-predictive-text-input.md
rename to skills/fds-build/resources/components/form-predictive-text-input.md
diff --git a/skills/fds-build/resources/v4/components/form-select.md b/skills/fds-build/resources/components/form-select.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-select.md
rename to skills/fds-build/resources/components/form-select.md
diff --git a/skills/fds-build/resources/v3/components/form-slider.md b/skills/fds-build/resources/components/form-slider.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/form-slider.md
rename to skills/fds-build/resources/components/form-slider.md
diff --git a/skills/fds-build/resources/v4/components/form-textarea.md b/skills/fds-build/resources/components/form-textarea.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-textarea.md
rename to skills/fds-build/resources/components/form-textarea.md
diff --git a/skills/fds-build/resources/v4/components/form-time-range-picker.md b/skills/fds-build/resources/components/form-time-range-picker.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-time-range-picker.md
rename to skills/fds-build/resources/components/form-time-range-picker.md
diff --git a/skills/fds-build/resources/v4/components/form-timepicker.md b/skills/fds-build/resources/components/form-timepicker.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-timepicker.md
rename to skills/fds-build/resources/components/form-timepicker.md
diff --git a/skills/fds-build/resources/v4/components/form-unit-number-input.md b/skills/fds-build/resources/components/form-unit-number-input.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/form-unit-number-input.md
rename to skills/fds-build/resources/components/form-unit-number-input.md
diff --git a/skills/fds-build/resources/v3/components/fullscreen-image-carousel.md b/skills/fds-build/resources/components/fullscreen-image-carousel.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/fullscreen-image-carousel.md
rename to skills/fds-build/resources/components/fullscreen-image-carousel.md
diff --git a/skills/fds-build/resources/v3/components/histogram-slider.md b/skills/fds-build/resources/components/histogram-slider.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/histogram-slider.md
rename to skills/fds-build/resources/components/histogram-slider.md
diff --git a/skills/fds-build/resources/v4/components/icon.md b/skills/fds-build/resources/components/icon.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/icon.md
rename to skills/fds-build/resources/components/icon.md
diff --git a/skills/fds-build/resources/v3/components/image-button.md b/skills/fds-build/resources/components/image-button.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/image-button.md
rename to skills/fds-build/resources/components/image-button.md
diff --git a/skills/fds-build/resources/v4/components/input.md b/skills/fds-build/resources/components/input.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/input.md
rename to skills/fds-build/resources/components/input.md
diff --git a/skills/fds-build/resources/v3/components/language-switcher.md b/skills/fds-build/resources/components/language-switcher.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/language-switcher.md
rename to skills/fds-build/resources/components/language-switcher.md
diff --git a/skills/fds-build/resources/v4/components/layout.md b/skills/fds-build/resources/components/layout.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/layout.md
rename to skills/fds-build/resources/components/layout.md
diff --git a/skills/fds-build/resources/v3/components/link-list.md b/skills/fds-build/resources/components/link-list.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/link-list.md
rename to skills/fds-build/resources/components/link-list.md
diff --git a/skills/fds-build/resources/v3/components/local-nav.md b/skills/fds-build/resources/components/local-nav.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/local-nav.md
rename to skills/fds-build/resources/components/local-nav.md
diff --git a/skills/fds-build/resources/v3/components/masthead.md b/skills/fds-build/resources/components/masthead.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/masthead.md
rename to skills/fds-build/resources/components/masthead.md
diff --git a/skills/fds-build/resources/v4/components/menu.md b/skills/fds-build/resources/components/menu.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/menu.md
rename to skills/fds-build/resources/components/menu.md
diff --git a/skills/fds-build/resources/v4/components/modal.md b/skills/fds-build/resources/components/modal.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/modal.md
rename to skills/fds-build/resources/components/modal.md
diff --git a/skills/fds-build/resources/v3/components/navbar.md b/skills/fds-build/resources/components/navbar.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/navbar.md
rename to skills/fds-build/resources/components/navbar.md
diff --git a/skills/fds-build/resources/v3/components/notification-banner.md b/skills/fds-build/resources/components/notification-banner.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/notification-banner.md
rename to skills/fds-build/resources/components/notification-banner.md
diff --git a/skills/fds-build/resources/v3/components/pagination.md b/skills/fds-build/resources/components/pagination.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/pagination.md
rename to skills/fds-build/resources/components/pagination.md
diff --git a/skills/fds-build/resources/v3/components/pill.md b/skills/fds-build/resources/components/pill.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/pill.md
rename to skills/fds-build/resources/components/pill.md
diff --git a/skills/fds-build/resources/v4/components/popover.md b/skills/fds-build/resources/components/popover.md
similarity index 100%
rename from skills/fds-build/resources/v4/components/popover.md
rename to skills/fds-build/resources/components/popover.md
diff --git a/skills/fds-build/resources/v3/components/progress-indicator.md b/skills/fds-build/resources/components/progress-indicator.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/progress-indicator.md
rename to skills/fds-build/resources/components/progress-indicator.md
diff --git a/skills/fds-build/resources/v3/components/radio-button.md b/skills/fds-build/resources/components/radio-button.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/radio-button.md
rename to skills/fds-build/resources/components/radio-button.md
diff --git a/skills/fds-build/resources/v3/components/schedule.md b/skills/fds-build/resources/components/schedule.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/schedule.md
rename to skills/fds-build/resources/components/schedule.md
diff --git a/skills/fds-build/resources/v3/components/sidenav.md b/skills/fds-build/resources/components/sidenav.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/sidenav.md
rename to skills/fds-build/resources/components/sidenav.md
diff --git a/skills/fds-build/resources/v3/components/singpass-button.md b/skills/fds-build/resources/components/singpass-button.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/singpass-button.md
rename to skills/fds-build/resources/components/singpass-button.md
diff --git a/skills/fds-build/resources/v3/components/smart-app-banner.md b/skills/fds-build/resources/components/smart-app-banner.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/smart-app-banner.md
rename to skills/fds-build/resources/components/smart-app-banner.md
diff --git a/skills/fds-build/resources/v3/components/tab.md b/skills/fds-build/resources/components/tab.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/tab.md
rename to skills/fds-build/resources/components/tab.md
diff --git a/skills/fds-build/resources/v3/components/table.md b/skills/fds-build/resources/components/table.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/table.md
rename to skills/fds-build/resources/components/table.md
diff --git a/skills/fds-build/resources/v3/components/tag.md b/skills/fds-build/resources/components/tag.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/tag.md
rename to skills/fds-build/resources/components/tag.md
diff --git a/skills/fds-build/resources/v3/components/text-list.md b/skills/fds-build/resources/components/text-list.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/text-list.md
rename to skills/fds-build/resources/components/text-list.md
diff --git a/skills/fds-build/resources/v3/components/time-slot-bar-week.md b/skills/fds-build/resources/components/time-slot-bar-week.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/time-slot-bar-week.md
rename to skills/fds-build/resources/components/time-slot-bar-week.md
diff --git a/skills/fds-build/resources/v3/components/time-slot-bar.md b/skills/fds-build/resources/components/time-slot-bar.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/time-slot-bar.md
rename to skills/fds-build/resources/components/time-slot-bar.md
diff --git a/skills/fds-build/resources/v3/components/time-slot-week-view.md b/skills/fds-build/resources/components/time-slot-week-view.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/time-slot-week-view.md
rename to skills/fds-build/resources/components/time-slot-week-view.md
diff --git a/skills/fds-build/resources/v3/components/timeline.md b/skills/fds-build/resources/components/timeline.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/timeline.md
rename to skills/fds-build/resources/components/timeline.md
diff --git a/skills/fds-build/resources/v3/components/timetable.md b/skills/fds-build/resources/components/timetable.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/timetable.md
rename to skills/fds-build/resources/components/timetable.md
diff --git a/skills/fds-build/resources/v3/components/toast.md b/skills/fds-build/resources/components/toast.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/toast.md
rename to skills/fds-build/resources/components/toast.md
diff --git a/skills/fds-build/resources/v3/components/toggle.md b/skills/fds-build/resources/components/toggle.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/toggle.md
rename to skills/fds-build/resources/components/toggle.md
diff --git a/skills/fds-build/resources/v3/components/typography.md b/skills/fds-build/resources/components/typography.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/typography.md
rename to skills/fds-build/resources/components/typography.md
diff --git a/skills/fds-build/resources/v3/components/uneditable-section.md b/skills/fds-build/resources/components/uneditable-section.md
similarity index 100%
rename from skills/fds-build/resources/v3/components/uneditable-section.md
rename to skills/fds-build/resources/components/uneditable-section.md
diff --git a/skills/fds-build/resources/v4/foundations/layout-composition-patterns.md b/skills/fds-build/resources/foundations/layout-composition-patterns.md
similarity index 100%
rename from skills/fds-build/resources/v4/foundations/layout-composition-patterns.md
rename to skills/fds-build/resources/foundations/layout-composition-patterns.md
diff --git a/skills/fds-build/resources/v4/foundations/tokens.md b/skills/fds-build/resources/foundations/tokens.md
similarity index 97%
rename from skills/fds-build/resources/v4/foundations/tokens.md
rename to skills/fds-build/resources/foundations/tokens.md
index 61e004bd2a..0a09e5006e 100644
--- a/skills/fds-build/resources/v4/foundations/tokens.md
+++ b/skills/fds-build/resources/foundations/tokens.md
@@ -32,12 +32,11 @@ No `styled.d.ts` augmentation required. No `useTheme()` hook needed.
 
 ## Anti-patterns
 
-| Anti-pattern                                                      | Why it fails                                             | Correct alternative                         |
-| ----------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------- |
-| Using `Colour[...]` inside a `styled-components` template literal | `styled-components` is not installed in v4               | Use in `style={{}}` or CSS Modules          |
-| Hardcoding `var(--fds-*)` directly                                | FDS internal variable names may change                   | Use `Colour[...]` / `Spacing[...]` tokens   |
-| Hardcoding hex values                                             | Breaks theming                                           | Always use a Colour token                   |
-| Creating a local token proxy file                                 | Plain strings do not respond to theme changes at runtime | Use `Colour[...]` / `Spacing[...]` directly |
+| Anti-pattern                                                      | Why it fails                               | Correct alternative                       |
+| ----------------------------------------------------------------- | ------------------------------------------ | ----------------------------------------- |
+| Using `Colour[...]` inside a `styled-components` template literal | `styled-components` is not installed in v4 | Use in `style={{}}` or CSS Modules        |
+| Hardcoding `var(--fds-*)` directly                                | FDS internal variable names may change     | Use `Colour[...]` / `Spacing[...]` tokens |
+| Hardcoding hex values                                             | Breaks theming                             | Always use a Colour token                 |
 
 ---
 
diff --git a/skills/fds-build/resources/v4/patterns/states.md b/skills/fds-build/resources/patterns/states.md
similarity index 98%
rename from skills/fds-build/resources/v4/patterns/states.md
rename to skills/fds-build/resources/patterns/states.md
index 2418ae7f57..dd16fdfbaa 100644
--- a/skills/fds-build/resources/v4/patterns/states.md
+++ b/skills/fds-build/resources/patterns/states.md
@@ -214,8 +214,10 @@ import { Spacing } from "@lifesg/react-design-system/theme";
 ### Toast notification
 
 ```tsx
-Toast.success("Changes saved successfully"); // auto-dismisses
-Toast.error("Failed to save changes");
+import { Toast } from "@lifesg/react-design-system/toast";
+
+<Toast type="success">Changes saved successfully</Toast>
+<Toast type="error">Failed to save changes</Toast>
 ```
 
 Use `Toast` for non-critical feedback. Use `Alert` for errors requiring action.
diff --git a/skills/fds-build/resources/setup/setup.md b/skills/fds-build/resources/setup/setup.md
new file mode 100644
index 0000000000..fd3f25c68e
--- /dev/null
+++ b/skills/fds-build/resources/setup/setup.md
@@ -0,0 +1,190 @@
+# App Setup — Flagship v4
+
+Full project setup for `@lifesg/react-design-system` v4. Work through all four steps before writing any component code.
+
+---
+
+## Step 1 — Install packages
+
+```bash
+npm install @lifesg/react-design-system @lifesg/react-icons @floating-ui/react
+```
+
+Do NOT install `styled-components` — it is not used in v4.
+
+---
+
+## Step 2 — CSS
+
+### 2a — CDN stylesheet (index.html `<head>`)
+
+Add `main.css` from the v4 CDN. This handles fonts, base reset, and cascade layer ordering.
+
+```html
+<link
+    rel="stylesheet"
+    type="text/css"
+    href="https://assets.life.gov.sg/react-design-system/v4/css/main.css"
+/>
+```
+
+For Next.js App Router, add it in `layout.tsx`:
+
+```tsx
+// src/app/layout.tsx
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en">
+            <head>
+                <link
+                    rel="stylesheet"
+                    type="text/css"
+                    href="https://assets.life.gov.sg/react-design-system/v4/css/main.css"
+                />
+            </head>
+            <body>{children}</body>
+        </html>
+    );
+}
+```
+
+### 2b — Theme CSS (src/index.css)
+
+```css
+@import "@lifesg/react-design-system/theme/styles/lifesg.css";
+```
+
+Replace `lifesg` with your chosen theme slug: `lifesg` · `bookingsg` · `ccube` · `mylegacy` · `oneservice` · `pa` · `supportgowhere` · `sgw-digital-lobby` · `careercompass` · `rbs` · `imda` · `spf` · `smgs` · `a11y-playground`
+
+> Vite resolves `node_modules` CSS `@import` automatically. Other build tools may need a CSS resolver configured.
+
+### Next.js App Router adaptation
+
+Next.js App Router renders into `<body>` directly — there is no `#root`. Replace the `#root` rules with:
+
+```css
+/* Next.js: body is the mount point, not #root */
+body > div {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+```
+
+And move `min-height: 100vh; display: flex; flex-direction: column` onto `body` (already shown above).
+
+For `ThemeProvider`, create a client component wrapper and use it in `layout.tsx`:
+
+```tsx
+// src/app/providers.tsx
+"use client";
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+    return (
+        <ThemeProvider theme="lifesg" mode="light">
+            {children}
+        </ThemeProvider>
+    );
+}
+```
+
+```tsx
+// src/app/layout.tsx
+import Providers from "./providers";
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en">
+            <body>
+                <Providers>{children}</Providers>
+            </body>
+        </html>
+    );
+}
+```
+
+```tsx
+// src/app/page.tsx
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+
+export default function Page() {
+    return (
+        <>
+            <Navbar masthead items={{ desktop: [] }} />
+            <main style={{ flex: 1 }}>{/* page content */}</main>
+            <Footer />
+        </>
+    );
+}
+```
+
+---
+
+## Step 3 — ThemeProvider (src/App.tsx)
+
+Wrap your app root. Theme is a string matching the slug used in Step 2. Do NOT re-import the CSS here — it is already imported via `index.css`.
+
+```tsx
+// src/App.tsx
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+import { Navbar } from "@lifesg/react-design-system/navbar";
+import { Footer } from "@lifesg/react-design-system/footer";
+
+export default function App() {
+    return (
+        <ThemeProvider theme="lifesg" mode="light">
+            <Navbar
+                masthead
+                items={{
+                    desktop: [{ id: "home", children: "Home", href: "/" }],
+                }}
+            />
+            <main style={{ flex: 1 }}>{/* page content */}</main>
+            <Footer />
+        </ThemeProvider>
+    );
+}
+```
+
+**Dark/light mode:** `mode` prop defaults to `"auto"` (OS preference).
+
+```tsx
+<ThemeProvider theme="lifesg" mode="light">  {/* force light */}
+<ThemeProvider theme="lifesg" mode="dark">   {/* force dark */}
+```
+
+---
+
+## Step 4 — Vite config
+
+No special configuration needed for the design system. Standard React setup:
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+    plugins: [react()],
+});
+```
+
+---
+
+## Verification checklist
+
+-   [ ] `@lifesg/react-design-system`, `@lifesg/react-icons`, `@floating-ui/react` installed
+-   [ ] `styled-components` NOT installed
+-   [ ] `main.css` CDN link in `index.html` (or `layout.tsx` for Next.js)
+-   [ ] `@lifesg/react-design-system/theme/styles/{theme}.css` imported in `index.css`
+-   [ ] `ThemeProvider` wraps app root with correct theme string
diff --git a/skills/fds-build/resources/v4/templates/form.md b/skills/fds-build/resources/templates/form.md
similarity index 81%
rename from skills/fds-build/resources/v4/templates/form.md
rename to skills/fds-build/resources/templates/form.md
index 0917fcc7eb..28c4052b00 100644
--- a/skills/fds-build/resources/v4/templates/form.md
+++ b/skills/fds-build/resources/templates/form.md
@@ -18,9 +18,9 @@ Single or multi-step form page built with `@lifesg/react-design-system` v4.
 │  <main>                                                  │
 │  └─ pageWrapper (padding: spacing-32 0; lg: spacing-64) │
 │     └─ Layout.Container type="grid"                     │
-│        ├─ Layout.ColDiv xsCols={12} lgCols={12}         │
+│        ├─ Layout.ColDiv xxsCols={[1, -1]}               │
 │        │  └─ ProgressIndicator  (multi-step only)       │
-│        └─ Layout.ColDiv xsCols={12} lgCols={9} xlCols={8}│
+│        └─ Layout.ColDiv xxsCols={12} lgCols={8}         │
 │           │  flex column · gap: spacing-32               │
 │           ├─ pageHeadingBlock (flex column · gap: 16)   │
 │           │  ├─ h1                                       │
@@ -36,132 +36,18 @@ Single or multi-step form page built with `@lifesg/react-design-system` v4.
 
 ---
 
-## Styling approach
-
-v4 uses **CSS Modules** — no `styled-components`.
-
--   Design tokens are plain CSS variable strings (`var(--fds-spacing-32)`, `var(--fds-colour-text)`, etc.)
--   Responsive styles use the breakpoint class selector: `:where(body.fds-breakpoint-lg-min) &`
--   `ThemeProvider` adds breakpoint classes to `document.body` at runtime (e.g. `fds-breakpoint-lg-min`)
--   Pass `className={styles.x}` to `Layout.ColDiv`, `Button`, and other DS components that accept it
-
----
-
 ## Rules
 
 |                          | Wrong                | Correct                                                                                                                                                                                  |
 | ------------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Column width             | `lgCols={12}`        | `lgCols={9} xlCols={8}`                                                                                                                                                                  |
+| Column width             | `lgCols={12}`        | `xxsCols={12} lgCols={8}`                                                                                                                                                                |
 | Progress indicator       | Inside 8-col div     | Separate `lgCols={12}` ColDiv; `currentIndex` is zero-based                                                                                                                              |
 | Page heading             | Static string        | Defaults to `{STEPS[step]}`; override per step as needed                                                                                                                                 |
 | Field spacing            | `gap` on wrapper div | Rely on component built-in `margin-bottom: 32`; add `margin-bottom: var(--fds-spacing-32)` via CSS Module class for components without it (BoxContainer, Toggle, FileUpload, ESignature) |
 | Constrained-width inputs | `width` on element   | `max-width` — works alongside internal `width: 100%`                                                                                                                                     |
 | Review step              | Omitting             | Required as last step — one `BoxContainer` per preceding step                                                                                                                            |
 
----
-
-## CSS setup (index.css)
-
-```css
-@import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
-@import "@lifesg/react-design-system/theme/styles/default.css";
-@import "@lifesg/react-design-system/theme/styles/lifesg.css";
-
-html {
-    -moz-text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    text-size-adjust: none;
-    box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: inherit;
-    padding: 0;
-    margin: 0;
-}
-
-body {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: var(--fds-font-family-body, "Open Sans", sans-serif);
-}
-
-a {
-    cursor: pointer;
-    text-decoration: none;
-}
-
-button,
-select,
-input[type="button"],
-input[type="submit"],
-input[type="reset"],
-::file-selector-button {
-    color: inherit;
-}
-
-#root {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-#root > div {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-```
-
-> `default.css` defines all `--fds-*` tokens. `lifesg.css` overrides brand/primary colours. Font CDN path is still v3 — fonts are shared across versions.
-
----
-
-## App setup
-
-```tsx
-// App.tsx
-import { ThemeProvider } from "@lifesg/react-design-system/theme";
-import { Navbar } from "@lifesg/react-design-system/navbar";
-import { Footer } from "@lifesg/react-design-system/footer";
-import { Layout } from "@lifesg/react-design-system/layout";
-import FormPage from "./FormPage";
-import styles from "./App.module.css";
-
-function App() {
-    return (
-        <ThemeProvider theme="lifesg" mode="light">
-            <Navbar
-                masthead
-                items={{
-                    desktop: [{ id: "home", children: "Home", href: "/" }],
-                }}
-            />
-            <main style={{ flex: 1 }}>
-                <div className={styles.pageWrapper}>
-                    <Layout.Container type="grid">
-                        <FormPage />
-                    </Layout.Container>
-                </div>
-            </main>
-            <Footer />
-        </ThemeProvider>
-    );
-}
-```
-
-```css
-/* App.module.css */
-.pageWrapper {
-    padding: var(--fds-spacing-32) 0;
-
-    :global(body.fds-breakpoint-lg-min) & {
-        padding: var(--fds-spacing-64) 0;
-    }
-}
-```
+> **Setup:** If the project is not yet set up, read `../setup/setup.md` first before writing any code here.
 
 ---
 
@@ -541,5 +427,3 @@ export default function FormPage() {
 
 -   Single-step: omit `ProgressIndicator` and pass no `onBack` to `FormNav`
 -   Pass `actions` to `FormNav` for secondary actions like Save draft
--   `ThemeProvider` accepts `theme` (string from `THEME_TYPES`) and `mode` (`"light" | "dark" | "auto"`)
--   CSS variables (`--fds-*`) are scoped to the `ThemeProvider` div — they are not global
diff --git a/skills/fds-build/resources/v4/templates/listing.md b/skills/fds-build/resources/templates/listing.md
similarity index 99%
rename from skills/fds-build/resources/v4/templates/listing.md
rename to skills/fds-build/resources/templates/listing.md
index ef05ab0d98..e0b86c9e00 100644
--- a/skills/fds-build/resources/v4/templates/listing.md
+++ b/skills/fds-build/resources/templates/listing.md
@@ -441,4 +441,3 @@ export default function ListingPage() {
 -   Do not use pagination AND lazy loading together
 -   Do not leave stale `page` values pointing past the end of a newly-filtered result set
 -   Do not split filtering and sorting into separate `useEffect` calls — derive from a single `useMemo`
--   Do not use `styled-components` — use CSS Module classes with `var(--fds-*)` tokens
diff --git a/skills/fds-build/resources/v3/components/button-with-icon.md b/skills/fds-build/resources/v3/components/button-with-icon.md
deleted file mode 100644
index 8feb5f2a5f..0000000000
--- a/skills/fds-build/resources/v3/components/button-with-icon.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# ButtonWithIcon
-
-> **Not available in v4.** If you are building for v4, do not use this component.
-
-Import: `import { ButtonWithIcon } from "@lifesg/react-design-system/button-with-icon"`
-
-## Sub-components
-
-| Sub-component            | When to use                    |
-| ------------------------ | ------------------------------ |
-| `ButtonWithIcon.Default` | Standard size                  |
-| `ButtonWithIcon.Small`   | Dense layouts, toolbars        |
-| `ButtonWithIcon.Large`   | Only when explicitly specified |
-
-## Rules
-
--   `styleType` is mandatory.
--   Use `iconPosition="right"` only for directional actions (next, continue, external link).
--   Combine `loading` and `disabled` during async operations to prevent double-submission.
diff --git a/skills/fds-build/resources/v3/components/button.md b/skills/fds-build/resources/v3/components/button.md
deleted file mode 100644
index b7e34d9687..0000000000
--- a/skills/fds-build/resources/v3/components/button.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# Button
-
-Import: `import { Button } from "@lifesg/react-design-system/button"`
-
-## When to use
-
-```
-┌─ "Which button component?"
-│
-├─ Icon only (no text)?
-│  └─ IconButton — aria-label required
-│
-├─ Text + icon together?
-│  └─ ButtonWithIcon — icon left (default) or right for directional actions
-│
-└─ Text only?
-   └─ Button
-```
-
-## Sub-components
-
-| Sub-component    | When to use                                             |
-| ---------------- | ------------------------------------------------------- |
-| `Button.Default` | Standard size — use for all buttons including hero CTAs |
-| `Button.Small`   | Dense layouts, toolbars                                 |
-| `Button.Large`   | Only when explicitly specified — do not use by default  |
-
-## Variants
-
-| `styleType`   | When to use                           |
-| ------------- | ------------------------------------- |
-| `"default"`   | Main action on the page               |
-| `"secondary"` | Cancel, go back, alternative option   |
-| `"light"`     | On colored or dark backgrounds        |
-| `"link"`      | Tertiary, de-emphasized inline action |
-
-Add `danger` for destructive actions (delete, remove) — applies to any `styleType`.
-
-## Usage
-
-```tsx
-import { Button } from "@lifesg/react-design-system/button";
-
-<Button.Default styleType="default" onClick={() => {}}>
-    Save changes
-</Button.Default>;
-```
-
-## Props
-
-| Prop                    | Type                 | Default   | Description                                                                                                                                                                                                                                       |
-| ----------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `styleType`             | `ButtonStyleType`    | "default" | Visual style variant of the button.                                                                                                                                                                                                               |
-| `sizeType`              | `ButtonSizeType`     | "default" | Controls the button's size.                                                                                                                                                                                                                       |
-| `danger`                | `boolean`            | false     | Applies a red color scheme for destructive actions.                                                                                                                                                                                               |
-| `loading`               | `boolean`            | false     | Displays a loading spinner and sets `aria-busy` on the button. The spinner replaces the icon (if present); children continue to render.                                                                                                           |
-| `focusableWhenDisabled` | `boolean`            | false     | Keeps the button keyboard-focusable when disabled. When true, the HTML `disabled` attribute is not set, but `aria-disabled` remains true and the click handler is suppressed.                                                                     |
-| `icon`                  | `JSX.Element`        | —         | Icon element rendered inside the button. The icon receives `aria-hidden` automatically. When provided without children, the button renders in icon-only mode (square layout) — provide `aria-label` on the button for accessibility in that case. |
-| `iconPosition`          | `ButtonIconPosition` | "left"    | Position of the icon relative to the button label.                                                                                                                                                                                                |
-
-## Rules
-
--   `styleType` is mandatory.
--   Use sentence case for all labels — "Save changes" not "Save Changes".
--   Use concise verb + noun labels — avoid "OK", "Yes", "Click here".
--   Do not use `Button.Large` unless explicitly required — `Button.Default` is correct for hero CTAs.
--   Combine `loading` and `disabled` during async operations to prevent double-submission.
--   Never use raw `<button>` elements — always use design system button components.
--   Do not nest buttons inside buttons or links.
--   `danger` applies to any `styleType`.
-
-## Anti-patterns
-
--   Do not use `Button.Large` as a default choice — it is a special case only.
--   Do not use vague labels like "OK" or "Yes" — labels must describe the action.
--   Do not use `loading` alone without also setting `disabled`.
diff --git a/skills/fds-build/resources/v3/components/card.md b/skills/fds-build/resources/v3/components/card.md
deleted file mode 100644
index 5eb6a44b93..0000000000
--- a/skills/fds-build/resources/v3/components/card.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Card
-
-Import: `import { Card } from "@lifesg/react-design-system/card"`
-
-## When to use
-
-Use to visually group related content — information panels, form sections, list items, or grid tiles.
-
-## Usage
-
-```tsx
-import styled from "styled-components";
-import { Card } from "@lifesg/react-design-system/card";
-import { Spacing } from "@lifesg/react-design-system/theme";
-import { Typography } from "@lifesg/react-design-system/typography";
-
-const CardBody = styled.div`
-    padding: ${Spacing["spacing-24"]};
-`;
-
-<Card>
-    <CardBody>
-        <Typography.HeadingSM>Card title</Typography.HeadingSM>
-        <Typography.BodyMD>Card content goes here.</Typography.BodyMD>
-    </CardBody>
-</Card>;
-```
-
-## Rules
-
--   Card has no default padding — use `spacing-24` internal padding and `spacing-16` gap between content items as the standard.
--   Shadow (`Shadow["md-subtle"]`) is applied automatically — do not add `box-shadow` manually.
--   Do not nest cards inside cards.
--   Use Typography components for all text inside Card — not raw HTML elements.
--   Combine with `Layout.Container` and `Layout.ColDiv` for responsive card grids.
-
-## Anti-patterns
-
--   Adding `box-shadow` via CSS — the Card component already applies the correct elevation shadow.
--   Using raw `<div>` with custom styling instead of Card when the DS Card fits the use case.
--   Nesting `<Card>` inside another `<Card>`.
diff --git a/skills/fds-build/resources/v3/components/drawer.md b/skills/fds-build/resources/v3/components/drawer.md
deleted file mode 100644
index c5e06ce402..0000000000
--- a/skills/fds-build/resources/v3/components/drawer.md
+++ /dev/null
@@ -1,79 +0,0 @@
-# Drawer
-
-Import: `import { Drawer } from "@lifesg/react-design-system/drawer"`
-
-## When to use
-
-Use to show supplementary content or actions without navigating away from the current page — for example, filter panels or detail views.
-
-Do not use for:
-
--   Primary forms that require focused attention
--   Flows that need the full viewport
-
-## Usage
-
-```tsx
-import { useState } from "react";
-import { Drawer } from "@lifesg/react-design-system/drawer";
-import { Button } from "@lifesg/react-design-system/button";
-import { Text } from "@lifesg/react-design-system/text";
-
-const FilterDrawer = () => {
-    const [show, setShow] = useState(false);
-
-    const handleClose = () => setShow(false);
-
-    return (
-        <>
-            <Button.Default onClick={() => setShow(true)}>
-                Open filters
-            </Button.Default>
-
-            <Drawer
-                show={show}
-                heading="Filter options"
-                onClose={handleClose}
-                onOverlayClick={handleClose}
-            >
-                <div style={{ padding: "1.5rem" }}>
-                    <Text.H4 style={{ marginBottom: "0.75rem" }}>
-                        Category
-                    </Text.H4>
-                    <Text.Body style={{ marginBottom: "2rem" }}>
-                        Filter content goes here.
-                    </Text.Body>
-                    <Button.Default styleType="secondary" onClick={handleClose}>
-                        Close
-                    </Button.Default>
-                </div>
-            </Drawer>
-        </>
-    );
-};
-```
-
-## Props
-
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
-
-## Rules
-
--   Always provide `onClose` so users can dismiss the panel via the close button.
--   Provide `onOverlayClick` to allow dismissal by clicking outside the panel; set it to the same handler as `onClose` unless the overlay should not close the panel.
--   Use `heading` to give the drawer a descriptive title for the user and for screen readers.
--   The drawer slides in from the right edge of the viewport.
--   Content scrolls independently within the panel when it exceeds the panel height.
-
-## Anti-patterns
-
--   Do not use the Drawer for full forms — use a dedicated page or Modal instead.
--   Do not omit `onClose` — users must have a way to dismiss the panel.
diff --git a/skills/fds-build/resources/v3/components/filter.md b/skills/fds-build/resources/v3/components/filter.md
deleted file mode 100644
index 85e7561193..0000000000
--- a/skills/fds-build/resources/v3/components/filter.md
+++ /dev/null
@@ -1,227 +0,0 @@
-# Filter
-
-Import: `import { Filter } from "@lifesg/react-design-system/filter"`
-
-## When to use
-
-Use on listing pages to narrow a result set. `Filter` automatically switches between a desktop sidebar and a mobile modal at the `lg-max` breakpoint.
-
-## Composition
-
-```
-Filter                                  ← recommended: auto-switches sidebar ↔ modal at lg breakpoint
-├── Filter.Item title="Sort by"         ← section header + collapsible wrapper
-│   └── {RadioButton group}             ← sort options use RadioButton, not Filter.Checkbox
-├── Filter.Item title="Category"
-│   └── Filter.Checkbox                 ← multi-select filter options
-└── Filter.Item title="..."
-    └── Filter.Checkbox
-```
-
-Manual variants (bypass auto-responsive):
-
-```
-Filter.Sidebar                          ← desktop sidebar only
-Filter.Modal                            ← mobile modal only
-Filter.Page                             ← full-page filter (mobile-only flows)
-```
-
-`Filter.Item` is the only valid direct child of `Filter`, `Filter.Sidebar`, or `Filter.Modal`. Use `RadioButton` for sort (single-select); use `Filter.Checkbox` for multi-select filters.
-
-## Variants
-
-| Variant                  | When to use                                                     |
-| ------------------------ | --------------------------------------------------------------- |
-| `<Filter>` (recommended) | Auto-responsive — desktop sidebar + mobile modal                |
-| `<Filter.Sidebar>`       | Desktop sidebar only — when bypassing auto-responsive behaviour |
-| `<Filter.Modal>`         | Mobile modal only — when bypassing auto-responsive behaviour    |
-
-## Usage
-
-### Auto-responsive Filter (recommended)
-
-`Filter` renders a sidebar on desktop and a modal on mobile automatically. Pass children as a function to receive `mode` (`"desktop" | "mobile"`) when you need to render differently per viewport.
-
-```tsx
-import { useState } from "react";
-import { Filter } from "@lifesg/react-design-system/filter";
-import { RadioButton } from "@lifesg/react-design-system/radio-button";
-
-const ListingFilter = () => {
-    const [category, setCategory] = useState("all");
-    const [activeCount, setActiveCount] = useState(0);
-
-    const handleClear = () => {
-        setCategory("all");
-        setActiveCount(0);
-    };
-
-    return (
-        <Filter
-            count={activeCount}
-            onClear={handleClear}
-            onDone={() => {
-                /* commit draft state */
-            }}
-            onDismiss={() => {
-                /* discard draft state */
-            }}
-        >
-            {(mode) => (
-                <>
-                    <Filter.Item title="Category">
-                        <RadioButton
-                            name="category"
-                            value="all"
-                            checked={category === "all"}
-                            onChange={() => setCategory("all")}
-                        >
-                            All
-                        </RadioButton>
-                        <RadioButton
-                            name="category"
-                            value="news"
-                            checked={category === "news"}
-                            onChange={() => setCategory("news")}
-                        >
-                            News
-                        </RadioButton>
-                    </Filter.Item>
-                    <Filter.Item title="Sort by" collapsible={false}>
-                        <RadioButton name="sort" value="newest" defaultChecked>
-                            Newest first
-                        </RadioButton>
-                        <RadioButton name="sort" value="oldest">
-                            Oldest first
-                        </RadioButton>
-                    </Filter.Item>
-                </>
-            )}
-        </Filter>
-    );
-};
-```
-
-Key points:
-
--   `onDone` and `onDismiss` are mobile-only callbacks; they are ignored on desktop.
--   `collapsible={false}` on sort sections keeps them always expanded.
--   `count` drives the active-filter badge in the header.
-
-## Props — `FilterBaseProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterSidebarProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `FilterSidebarCustomLabelProps`            | —       | Overrides default labels used by the sidebar variant.                                                                                                                                        |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterModalProps`
-
-| Prop                      | Type                                       | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `onDismiss`               | `(() => void)`                             | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                             | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                               | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                          | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `customLabels`            | `FilterModalCustomLabelProps`              | —       | Overrides default labels used by the modal variant.                                                                                                                                          |
-| `insets`                  | `Insets`                                   | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-| `id`                      | `string`                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                   | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                            | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                   | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                  | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                             | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)` | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                   | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                   | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                   | —       | —                                                                                                                                                                                            |
-
-## Props — `FilterProps`
-
-| Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
-| ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
-| `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
-| `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
-| `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `onDismiss`               | `(() => void)`                                                    | —       | Called when the dismiss (close) button is pressed in the modal overlay.                                                                                                                      |
-| `onDone`                  | `(() => void)`                                                    | —       | Called when the done button is pressed in the modal overlay.                                                                                                                                 |
-| `onModalOpen`             | `() => void`                                                      | —       | Called when the modal overlay is opened by the toggle button.                                                                                                                                |
-| `toggleFilterButtonStyle` | `ButtonStyleType`                                                 | "light" | Visual style of the toggle button that opens the modal.                                                                                                                                      |
-| `insets`                  | `Insets`                                                          | —       | Safe-area insets applied to the modal header and footer, useful for notch or home-indicator offsets on mobile devices.                                                                       |
-
-## Props — `FilterItemProps`
-
-| Prop                | Type                                                                                     | Default | Description                                                                                                                                                                       |
-| ------------------- | ---------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `\| React.ReactNode \| ((mode: Mode, state: { minimised: boolean }) => React.ReactNode)` | —       | Content rendered inside the filter item. Pass a render function to receive the current `Mode` and minimised state, enabling content to adapt between desktop and mobile contexts. |
-| `showDivider`       | `boolean`                                                                                | true    | Whether a divider line is shown above the item in desktop mode.                                                                                                                   |
-| `showMobileDivider` | `boolean`                                                                                | true    | Whether a divider line is shown above the item in mobile mode.                                                                                                                    |
-| `title`             | `string`                                                                                 | —       | Label rendered in the item header.                                                                                                                                                |
-| `addon`             | `FormLabelAddonProps`                                                                    | —       | Optional popover addon displayed inline with the title.                                                                                                                           |
-| `className`         | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `id`                | `string`                                                                                 | —       | —                                                                                                                                                                                 |
-| `collapsible`       | `boolean`                                                                                | true    | Whether the item can be expanded or collapsed in desktop mode. Items are always expanded in mobile mode regardless of this setting.                                               |
-| `initialExpanded`   | `boolean`                                                                                | false   | Initial expanded state for the uncontrolled component. Has no effect when `expanded` is provided.                                                                                 |
-| `expanded`          | `boolean`                                                                                | —       | Controls the expanded state. When provided, the component is controlled and `onExpandChange` must be used to update the value.                                                    |
-| `onExpandChange`    | `((expanded: boolean) => void)`                                                          | —       | Called when the user toggles the expand/collapse state.                                                                                                                           |
-| `minimisable`       | `boolean`                                                                                | false   | Whether the item content can be minimised to show a truncated height with a "View more" button.                                                                                   |
-| `minimisedHeight`   | `number`                                                                                 | —       | Height in pixels to clip the content when minimised. Defaults to 50% of content height, capped at 216 px.                                                                         |
-| `style`             | `React.CSSProperties`                                                                    | —       | —                                                                                                                                                                                 |
-
-## Props — `FilterPageProps`
-
-| Prop          | Type              | Default | Description                                       |
-| ------------- | ----------------- | ------- | ------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                 |
-| `onDismiss`   | `(() => void)`    | —       | Called when the back (dismiss) button is pressed. |
-| `onDone`      | `(() => void)`    | —       | Called when the done button is pressed.           |
-
-## Rules
-
--   `Filter` is the recommended entry point — it automatically renders `Filter.Sidebar` on desktop and `Filter.Modal` on mobile.
--   Always provide `onClear` to reset all filter state in a single handler.
--   Set `collapsible={false}` on sort sections — sort options should always be visible.
--   Pass children as a function `(mode) => ReactNode` to render different content on desktop vs mobile.
--   `Filter.Modal` has a built-in Done button — do not add an external Apply button; use `onDone` to react to it.
--   Add a keyword search input (`Form.Input`) above the `Filter` component — search is not built into `Filter`.
--   Use `count` to show the number of active filters in the header.
--   Use `Filter.Sidebar` or `Filter.Modal` directly only when overriding the responsive behaviour.
--   `Filter.Page` is used inside `Filter.Modal` only, for drill-down sub-pages.
-
-## Anti-patterns
-
--   Do not pass `viewport`, `showSearch`, or `searchText` — these props do not exist.
--   Do not add an external Apply button when using `Filter.Modal` — the built-in Done button handles it.
--   Do not use `Filter.Sidebar` and `Filter.Modal` separately unless you need to override responsive behaviour — use `Filter` instead.
diff --git a/skills/fds-build/resources/v3/components/form-date-input.md b/skills/fds-build/resources/v3/components/form-date-input.md
deleted file mode 100644
index e96e23b75f..0000000000
--- a/skills/fds-build/resources/v3/components/form-date-input.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Form.DateInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a single date from the user (e.g. date of birth, appointment date, submission deadline).
--   Any form field that requires calendar-based date selection.
-
-## Usage
-
-```tsx
-const StyledDateInput = styled(Form.DateInput)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper — `max-width` constrains the component without conflicting with its internal `width: 100%`.
-
-## YearMonthDisplay
-
-| Prop    | Type     | Description                       |
-| ------- | -------- | --------------------------------- |
-| `year`  | `number` | Currently displayed year (`YYYY`) |
-| `month` | `number` | Currently displayed month (1–12)  |
-
-## Props
-
-| Prop                       | Type                                  | Default       | Description                                                                                                                                             |
-| -------------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —             | —                                                                                                                                                       |
-| `id`                       | `string`                              | —             | —                                                                                                                                                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`              | document.body | The root element that contains the dropdown element.                                                                                                    |
-| `readOnly`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                             | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                               |
-| `value`                    | `string`                              | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                 |
-| `error`                    | `boolean`                             | —             | Renders the input in an error state.                                                                                                                    |
-| `disabled`                 | `boolean`                             | —             | —                                                                                                                                                       |
-| `withButton`               | `boolean`                             | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar. |
-| `zIndex`                   | `number`                              | —             | The z-index of the calendar dropdown.                                                                                                                   |
-| `onChange`                 | `((value: string) => void)`           | —             | Called when the user commits a date selection. Receives the selected date as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared. |
-| `onFocus`                  | `(() => void)`                        | —             | Called when the input receives focus.                                                                                                                   |
-| `onBlur`                   | `(() => void)`                        | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —             | Called when the visible month or year in the calendar changes.                                                                                          |
-| `minDate`                  | `string`                              | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `maxDate`                  | `string`                              | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                               |
-| `disabledDates`            | `string[]`                            | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                      |
-| `allowDisabledSelection`   | `boolean`                             | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —             | Specifies if the calendar should display only dates for the selected month                                                                              |
-| `label`                    | `FormLabelProps \| string`            | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                |
-| `errorMessage`             | `string \| React.ReactNode`           | —             | Inline error text rendered below the input.                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`               | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                            |
-| `xxlCols`                  | `ColSpan`                             | —             | Column span at the `xxl` breakpoint.                                                                                                                    |
-| `xlCols`                   | `ColSpan`                             | —             | Column span at the `xl` breakpoint.                                                                                                                     |
-| `lgCols`                   | `ColSpan`                             | —             | Column span at the `lg` breakpoint.                                                                                                                     |
-| `mdCols`                   | `ColSpan`                             | —             | Column span at the `md` breakpoint.                                                                                                                     |
-| `smCols`                   | `ColSpan`                             | —             | Column span at the `sm` breakpoint.                                                                                                                     |
-| `xsCols`                   | `ColSpan`                             | —             | Column span at the `xs` breakpoint.                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                             | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.        |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `YYYY-MM-DD` string.
--   Use `minDate`/`maxDate` to constrain selectable dates to valid business ranges.
--   Use `disabledDates` for known blackout dates (e.g. public holidays).
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
--   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
--   Use `readOnly` on review or summary screens where the value should be visible but not editable.
--   Specify `dropdownRootNode` if the component is inside a scrollable container to prevent the calendar from clipping.
--   Date strings use `YYYY-MM-DD` format throughout (value, minDate, maxDate, disabledDates, onChange return).
-
-## Anti-patterns
-
--   Do not use a plain text input for date collection — the picker enforces valid date formats automatically.
--   Do not set `allowDisabledSelection` unless there is a specific UX reason to allow out-of-range dates.
--   Do not rely on `error` prop alone without an `errorMessage`; users need descriptive feedback.
--   Do not use for date-range selection — use `Form.DateRangeInput` instead.
diff --git a/skills/fds-build/resources/v3/components/form-date-range-input.md b/skills/fds-build/resources/v3/components/form-date-range-input.md
deleted file mode 100644
index 2d4a01d925..0000000000
--- a/skills/fds-build/resources/v3/components/form-date-range-input.md
+++ /dev/null
@@ -1,141 +0,0 @@
-# Form.DateRangeInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a start and end date from the user (e.g. leave period, booking period, date range filter).
--   Use `variant="week"` when the selection must always be a full calendar week.
--   Use `variant="fixed-range"` when the duration is predetermined (e.g. always 7 days).
-
-## Usage
-
-`onChange` always receives both start and end as `YYYY-MM-DD` strings, even for week and fixed-range variants.
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const LeavePeriodField = () => {
-    const [start, setStart] = useState("");
-    const [end, setEnd] = useState("");
-
-    return (
-        <Form.DateRangeInput
-            label="Leave period"
-            value={start}
-            valueEnd={end}
-            minDate="2024-01-01"
-            maxDate="2024-12-31"
-            onChange={(s, e) => {
-                setStart(s);
-                setEnd(e);
-            }}
-        />
-    );
-};
-```
-
-```tsx
-{
-    /* variant="week" — whole-week selection */
-}
-<Form.DateRangeInput
-    label="Select week"
-    variant="week"
-    value={start}
-    valueEnd={end}
-    onChange={(s, e) => {
-        setStart(s);
-        setEnd(e);
-    }}
-/>;
-
-{
-    /* variant="fixed-range" — valueEnd derived automatically; only store start */
-}
-<Form.DateRangeInput
-    label="14-day quarantine period"
-    variant="fixed-range"
-    numberOfDays={14}
-    value={start}
-    valueEnd={end}
-    onChange={(s, e) => {
-        setStart(s);
-        setEnd(e);
-    }}
-/>;
-```
-
-Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper:
-
-```tsx
-const StyledDateRangeInput = styled(Form.DateRangeInput)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-## YearMonthDisplay
-
-| Prop    | Type     | Description                       |
-| ------- | -------- | --------------------------------- |
-| `year`  | `number` | Currently displayed year (`YYYY`) |
-| `month` | `number` | Currently displayed month (1–12)  |
-
-## Props
-
-| Prop                       | Type                                             | Default       | Description                                                                                                                                                                                                                                                                                                             |
-| -------------------------- | ------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `id`                       | `string`                                         | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `hideInputKeyboard`        | `boolean`                                        | —             | When `true`, suppresses the native on-screen keyboard on mobile devices while still allowing the calendar picker to open.                                                                                                                                                                                               |
-| `value`                    | `string`                                         | —             | The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                                 |
-| `valueEnd`                 | `string`                                         | —             | The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.                                                                                                                                                                                                                             |
-| `error`                    | `boolean`                                        | —             | Renders the input in an error state.                                                                                                                                                                                                                                                                                    |
-| `disabled`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `readOnly`                 | `boolean`                                        | —             | —                                                                                                                                                                                                                                                                                                                       |
-| `variant`                  | `Exclude<Variant, "single" \| "multi">`          | "range"       | Selection model used by the calendar. - `"range"` — user picks a free-form start and end date independently. - `"week"` — selecting any day automatically expands the selection to the full calendar week. - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later. |
-| `numberOfDays`             | `number`                                         | 7             | Number of days in the selection window when `variant` is `"fixed-range"`. The end date is calculated as the selected start date plus `numberOfDays - 1` days.                                                                                                                                                           |
-| `withButton`               | `boolean`                                        | true          | Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown. When `false`, a selection immediately commits and closes the calendar.                                                                                                                                                                 |
-| `zIndex`                   | `number`                                         | —             | The z-index of the calendar dropdown                                                                                                                                                                                                                                                                                    |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                         | document.body | The root element that contains the dropdown element.                                                                                                                                                                                                                                                                    |
-| `onChange`                 | `((startDate: string, endDate: string) => void)` | —             | Called when the user completes a valid date range selection. Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed for either date when the selection is cleared.                                                                                                                                 |
-| `onFocus`                  | `(() => void)`                                   | —             | Called when the input receives focus.                                                                                                                                                                                                                                                                                   |
-| `onBlur`                   | `(() => void)`                                   | —             | Called when focus leaves both the input and the calendar dropdown.                                                                                                                                                                                                                                                      |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)`            | —             | Called when the visible month or year in the calendar changes.                                                                                                                                                                                                                                                          |
-| `minDate`                  | `string`                                         | —             | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `maxDate`                  | `string`                                         | —             | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                                                                                                                                                                                                                                               |
-| `disabledDates`            | `string[]`                                       | —             | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                                                                                                                                                                                                                                      |
-| `allowDisabledSelection`   | `boolean`                                        | —             | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable                                                                                                                                                                                                                   |
-| `showActiveMonthDaysOnly`  | `boolean`                                        | —             | Specifies if the calendar should display only dates for the selected month                                                                                                                                                                                                                                              |
-| `label`                    | `FormLabelProps \| string`                       | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                                                                                                                                                |
-| `errorMessage`             | `string \| React.ReactNode`                      | —             | Inline error text rendered below the input.                                                                                                                                                                                                                                                                             |
-| `layoutType`               | `FormElementLayoutType`                          | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                                                                                                                                            |
-| `xxlCols`                  | `ColSpan`                                        | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                                                                                    |
-| `xlCols`                   | `ColSpan`                                        | —             | Column span at the `xl` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `lgCols`                   | `ColSpan`                                        | —             | Column span at the `lg` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `mdCols`                   | `ColSpan`                                        | —             | Column span at the `md` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `smCols`                   | `ColSpan`                                        | —             | Column span at the `sm` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xsCols`                   | `ColSpan`                                        | —             | Column span at the `xs` breakpoint.                                                                                                                                                                                                                                                                                     |
-| `xxsCols`                  | `ColSpan`                                        | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                                                                        |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` (start) and `valueEnd` (end) for controlled usage; `onChange` receives both as `YYYY-MM-DD` strings.
--   Use `minDate`/`maxDate` to restrict selection to valid business date ranges.
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
--   Use `withButton` (default `true`) to require explicit confirmation before the value is committed.
--   Use `readOnly` on review screens where the range should be visible but not editable.
--   Specify `dropdownRootNode` if the component is inside a scrollable container.
--   `valueEnd` is only relevant for `variant="range"` and `variant="fixed-range"`.
--   `numberOfDays` only applies when `variant="fixed-range"`.
-
-## Anti-patterns
-
--   Do not use for single-date selection — use `Form.DateInput` instead.
--   Do not set `numberOfDays` unless `variant="fixed-range"` is also set.
--   Do not rely on `error` alone without an `errorMessage`.
--   Do not allow end date before start date — validate in `onChange` before updating state.
diff --git a/skills/fds-build/resources/v3/components/form-input.md b/skills/fds-build/resources/v3/components/form-input.md
deleted file mode 100644
index 0c64781046..0000000000
--- a/skills/fds-build/resources/v3/components/form-input.md
+++ /dev/null
@@ -1,65 +0,0 @@
-# Form.Input
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use for any single-line text entry inside a form. Always prefer `Form.Input` over the bare `Input` component when a label or error message is required.
-
-## Variants
-
-| `styleType`            | When to use                                                                                 |
-| ---------------------- | ------------------------------------------------------------------------------------------- |
-| `"bordered"` (default) | Standard form fields — provides clear affordance                                            |
-| `"no-border"`          | Inline editing or contexts where a surrounding container already provides visual separation |
-
-## Usage
-
-```tsx
-import { Form } from "@lifesg/react-design-system/form";
-
-<Form.Input
-    label="Full name"
-    placeholder="Enter your name"
-    value={value}
-    onChange={(e) => {}}
-/>;
-```
-
-## Props
-
-| Prop           | Type                        | Default    | Description                                                                                                                                      |
-| -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
-| `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
-| `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
-| `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`     | —          | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                   | —          | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                   | —          | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                   | —          | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                   | —          | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                   | —          | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                   | —          | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                   | —          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Set `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
--   Use `readOnly` on review or summary screens — not `disabled`. Disabled implies interaction is unavailable; read-only implies the field is intentionally non-editable in context.
--   Use `allowClear` for optional fields and search-like inputs; pair with `onClear` to reset controlled value.
--   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
--   Provide `errorMessage` rather than `error` alone — the string drives both the visual state and the accessible error text.
--   Use `label` as a plain string for simple labels; use `FormLabelProps` (with `subtitle` or `addon`) only when additional context is needed.
--   `error` is redundant when `errorMessage` is provided — `errorMessage` implies the error state automatically.
--   `spacing` only has effect when `type="tel"`.
--   `styleType="no-border"` removes the visible border — use only in contexts with a background that provides visual separation.
-
-## Anti-patterns
-
--   Do not use `disabled` on review screens — use `readOnly`.
--   Do not set both `error` and `errorMessage` — `errorMessage` is sufficient.
--   Do not use `spacing` with input types other than `"tel"`.
--   Do not use `styleType="no-border"` in a form context without a containing element that visually distinguishes the field.
diff --git a/skills/fds-build/resources/v3/components/form-masked-input.md b/skills/fds-build/resources/v3/components/form-masked-input.md
deleted file mode 100644
index e69faac3fa..0000000000
--- a/skills/fds-build/resources/v3/components/form-masked-input.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# Form.MaskedInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Displaying sensitive data that should be partially hidden by default with a user-controlled reveal toggle (e.g. NRIC, FIN, passport number, bank account number).
--   Read-only fields that are loaded asynchronously and should show a loading / error state.
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Props
-
-| Prop                | Type                          | Default          | Description                                                                                                                                         |
-| ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
-| `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
-| `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
-| `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
-| `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
-| `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
-| `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
-| `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
-| `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
-| `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)` | —                | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                      | "•"              | Character used to replace each masked character in the displayed value.                                                                             |
-| `label`             | `FormLabelProps \| string`    | —                | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                            |
-| `errorMessage`      | `string \| React.ReactNode`   | —                | Inline error text rendered below the input.                                                                                                         |
-| `layoutType`        | `FormElementLayoutType`       | —                | Controls whether the container uses flex layout or a responsive column grid.                                                                        |
-| `xxlCols`           | `ColSpan`                     | —                | Column span at the `xxl` breakpoint.                                                                                                                |
-| `xlCols`            | `ColSpan`                     | —                | Column span at the `xl` breakpoint.                                                                                                                 |
-| `lgCols`            | `ColSpan`                     | —                | Column span at the `lg` breakpoint.                                                                                                                 |
-| `mdCols`            | `ColSpan`                     | —                | Column span at the `md` breakpoint.                                                                                                                 |
-| `smCols`            | `ColSpan`                     | —                | Column span at the `sm` breakpoint.                                                                                                                 |
-| `xsCols`            | `ColSpan`                     | —                | Column span at the `xs` breakpoint.                                                                                                                 |
-| `xxsCols`           | `ColSpan`                     | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.    |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Choose one masking strategy per instance: `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer`.
--   Use `maskRange` for fixed-position sensitive segments (e.g. `[1, 4]` for NRIC middle characters).
--   Use `maskRegex` when the characters to mask follow a pattern rather than a fixed range.
--   Use `transformInput="uppercase"` for identifiers that are conventionally uppercase (e.g. NRIC, passport).
--   Use `loadState` only when `readOnly` is also `true` — for fields that are fetched asynchronously.
--   Provide `onTryAgain` when `loadState="fail"` so users can retry the fetch.
--   `loadState` only takes effect when `readOnly` is also `true`.
--   Provide only one of `maskRange`, `unmaskRange`, `maskRegex`, or `maskTransformer` per instance.
-
-## Anti-patterns
-
--   Do not use for non-sensitive fields — masking adds friction and should be reserved for data that genuinely requires it.
--   Do not set `loadState` without `readOnly` — it has no effect in editable mode.
--   Do not combine multiple masking strategies (`maskRange` + `maskRegex`) on the same instance.
diff --git a/skills/fds-build/resources/v3/components/form-multi-select.md b/skills/fds-build/resources/v3/components/form-multi-select.md
deleted file mode 100644
index e6f11df87c..0000000000
--- a/skills/fds-build/resources/v3/components/form-multi-select.md
+++ /dev/null
@@ -1,100 +0,0 @@
-# Form.MultiSelect
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when users can select more than one option from a predefined list. For single selections use `Form.Select`. For hierarchical options use `Form.NestedMultiSelect`.
-
-## Variants
-
-| `variant`   | When to use                                              |
-| ----------- | -------------------------------------------------------- |
-| `"default"` | Standard form context                                    |
-| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
-
-## Usage
-
-```tsx
-import { Form } from "@lifesg/react-design-system/form";
-
-const options = [
-    { value: "doc", label: "Document" },
-    { value: "img", label: "Image" },
-    { value: "pdf", label: "PDF" },
-];
-
-<Form.MultiSelect
-    label="File types"
-    options={options}
-    selectedOptions={selected}
-    valueExtractor={(opt) => opt.value}
-    listExtractor={(opt) => opt.label}
-    displayValueExtractor={(opt) => opt.label}
-    onSelectOptions={(opts) => {}}
-/>;
-```
-
-## Props
-
-| Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
-| -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
-| `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
-| `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`        | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`           | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                 | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                    | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`             | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`               | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                  | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                   | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                   | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                   | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                   | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                   | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                  | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Always provide `options` — the component has no meaning without it.
--   Provide `valueExtractor` and `listExtractor` for typed option arrays — treat as required.
--   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing raw values instead of labels in the closed selector.
--   Use `maxSelectable` when there is a business rule limiting how many options can be chosen; the component enforces it automatically.
--   Use `enableSearch` when the list exceeds ~10 items.
--   Provide `customLabels` to localise or contextualise "Select all", "Clear all", and count labels.
--   Use `optionsLoadState` to communicate async loading states.
--   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
--   `onSelectOptions` receives the complete updated selection array — not a delta.
--   Unlike `Form.Select`, there is no `readOnly` prop — use `disabled` for non-editable states.
-
-## Anti-patterns
-
--   Do not use `Form.MultiSelect` when only one option can be selected — use `Form.Select`.
--   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
--   Do not set both `error` and `errorMessage`.
--   Do not manage selection capping manually in `onSelectOptions` — use `maxSelectable` instead.
diff --git a/skills/fds-build/resources/v3/components/form-nested-multi-select.md b/skills/fds-build/resources/v3/components/form-nested-multi-select.md
deleted file mode 100644
index 2f0e066332..0000000000
--- a/skills/fds-build/resources/v3/components/form-nested-multi-select.md
+++ /dev/null
@@ -1,159 +0,0 @@
-# Form.NestedMultiSelect
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when users can select multiple options from a hierarchically organised list of up to 3 levels. For hierarchical single-select use `Form.NestedSelect`. For flat multi-select use `Form.MultiSelect`.
-
-## Variants
-
-| `variant`   | When to use           |
-| ----------- | --------------------- |
-| `"default"` | Standard form context |
-| `"small"`   | Compact layouts       |
-
-| `mode`       | When to use                                                                              |
-| ------------ | ---------------------------------------------------------------------------------------- |
-| `"default"`  | System decides initial expand state                                                      |
-| `"expand"`   | Expand all categories on open — for short, browsable lists                               |
-| `"collapse"` | Collapse all categories on open — for long lists where search is the primary interaction |
-
-## Usage
-
-### Multi-select with parallel keyPaths / values arrays
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
-
-interface SkillValue {
-    id: string;
-    name: string;
-}
-
-const options: L1OptionProps<SkillValue, SkillValue, SkillValue>[] = [
-    {
-        key: "design",
-        label: "Design",
-        subItems: [
-            {
-                key: "design-ux",
-                label: "UX Design",
-                value: { id: "ux", name: "UX Design" },
-            },
-            {
-                key: "design-ui",
-                label: "UI Design",
-                value: { id: "ui", name: "UI Design" },
-            },
-        ],
-    },
-    {
-        key: "engineering",
-        label: "Engineering",
-        subItems: [
-            {
-                key: "eng-fe",
-                label: "Frontend",
-                value: { id: "fe", name: "Frontend" },
-            },
-            {
-                key: "eng-be",
-                label: "Backend",
-                value: { id: "be", name: "Backend" },
-            },
-        ],
-    },
-];
-
-const NestedMultiSelectExample = () => {
-    // keyPaths[i] and values[i] always refer to the same selection — keep them in sync
-    const [keyPaths, setKeyPaths] = useState<string[][]>([
-        ["design", "design-ux"], // pre-selected: UX Design
-    ]);
-    const [values, setValues] = useState<SkillValue[]>([
-        { id: "ux", name: "UX Design" },
-    ]);
-
-    return (
-        <Form.NestedMultiSelect<SkillValue, SkillValue, SkillValue>
-            label="Skills"
-            options={options}
-            selectedKeyPaths={keyPaths}
-            // onSelectOptions provides the NEXT full selection state — replace, don't merge
-            onSelectOptions={(nextKeyPaths, nextValues) => {
-                setKeyPaths(nextKeyPaths);
-                setValues(nextValues as SkillValue[]);
-            }}
-            valueToStringFunction={(val) => val.name}
-            enableSearch
-        />
-    );
-};
-```
-
-**The parallel-array contract:** index `i` in `keyPaths` and index `i` in `values` always describe the same selected item. `onSelectOptions` delivers the complete next state — replace both arrays together, never splice one independently. Initialise both arrays with matching entries when pre-populating selections.
-
-## Props
-
-| Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
-| ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
-| `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
-| `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
-| `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
-| `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
-| `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
-| `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
-| `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
-| `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
-| `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
-| `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
-| `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
-| `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
-| `xxlCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                  |
-| `xlCols`                | `ColSpan`                                                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                   |
-| `lgCols`                | `ColSpan`                                                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                   |
-| `mdCols`                | `ColSpan`                                                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                   |
-| `smCols`                | `ColSpan`                                                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                   |
-| `xsCols`                | `ColSpan`                                                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                   |
-| `xxsCols`               | `ColSpan`                                                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                      |
-
-## Rules
-
--   Every option node must have a unique `key` string — key paths are used for controlled state.
--   Provide `valueToStringFunction` when values are not plain strings. The same function is applied to values at all nesting levels — ensure values are homogeneous across levels, or that the function handles all types.
--   Use `enableSearch` when the total option count across all levels is large.
--   Use `readOnly` on review screens — not `disabled`.
--   Provide `customLabels` to localise "Select all", "Clear all", and count labels.
--   `options` is the only mandatory component-specific prop.
--   Options follow the same nested structure as `Form.NestedSelect`: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
--   `selectedKeyPaths` is an array of key-path arrays — one per selected item.
--   `onSelectOptions` receives the complete updated `keyPaths` and `values` arrays on every change.
--   `valueToStringFunction` uses a single callback for all nesting levels — values across levels must be the same type or handled uniformly.
-
-## Anti-patterns
-
--   Do not use `Form.NestedMultiSelect` for flat option lists — use `Form.MultiSelect`.
--   Do not use when only one option can be selected — use `Form.NestedSelect`.
--   Do not use duplicate `key` values across options — selection state will break.
--   Do not set both `error` and `errorMessage`.
--   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
diff --git a/skills/fds-build/resources/v3/components/form-nested-select.md b/skills/fds-build/resources/v3/components/form-nested-select.md
deleted file mode 100644
index 0b2c118659..0000000000
--- a/skills/fds-build/resources/v3/components/form-nested-select.md
+++ /dev/null
@@ -1,151 +0,0 @@
-# Form.NestedSelect
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when options are organised in a hierarchy of up to 3 levels — e.g. industry → sector → role, or country → state → city. For flat single-select use `Form.Select`. For hierarchical multi-select use `Form.NestedMultiSelect`.
-
-## Variants
-
-| `variant`   | When to use           |
-| ----------- | --------------------- |
-| `"default"` | Standard form context |
-| `"small"`   | Compact layouts       |
-
-| `mode`       | When to use                                                                            |
-| ------------ | -------------------------------------------------------------------------------------- |
-| `"default"`  | System decides initial expand state based on selected path                             |
-| `"expand"`   | Expand all categories on open — useful when the list is short and browsing is expected |
-| `"collapse"` | Collapse all categories on open — useful for long lists where search is primary        |
-
-## Usage
-
-### Three-level hierarchy with controlled keyPath
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { L1OptionProps } from "@lifesg/react-design-system/input-nested-select";
-
-interface RoleValue {
-    id: string;
-    label: string;
-}
-
-const options: L1OptionProps<RoleValue, RoleValue, RoleValue>[] = [
-    {
-        key: "engineering",
-        label: "Engineering",
-        subItems: [
-            {
-                key: "engineering-frontend",
-                label: "Frontend",
-                subItems: [
-                    {
-                        key: "engineering-frontend-react",
-                        label: "React Developer",
-                        value: { id: "fe-react", label: "React Developer" },
-                    },
-                    {
-                        key: "engineering-frontend-vue",
-                        label: "Vue Developer",
-                        value: { id: "fe-vue", label: "Vue Developer" },
-                    },
-                ],
-            },
-            {
-                key: "engineering-backend",
-                label: "Backend",
-                value: { id: "be", label: "Backend Developer" },
-            },
-        ],
-    },
-];
-
-const NestedSelectExample = () => {
-    // keyPath is the path of keys from root to selected node
-    const [keyPath, setKeyPath] = useState<string[]>([]);
-    const [value, setValue] = useState<RoleValue | undefined>();
-
-    return (
-        <Form.NestedSelect<RoleValue, RoleValue, RoleValue>
-            label="Job role"
-            options={options}
-            selectedKeyPath={keyPath}
-            // onChange receives the full key path and the node's value
-            onChange={(path, val) => {
-                setKeyPath(path);
-                setValue(val);
-            }}
-            valueToStringFunction={(val) => val.label}
-            selectableCategory // intermediate nodes (e.g. "Backend") are also selectable
-            enableSearch
-        />
-    );
-};
-```
-
-**keyPath explains the selection:** `["engineering", "engineering-frontend", "engineering-frontend-react"]` means the user drilled through Engineering → Frontend → React Developer. An empty array means nothing is selected.
-
-## Props
-
-| Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
-| ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
-| `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
-| `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
-| `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
-| `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
-| `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
-| `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
-| `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
-| `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
-| `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
-| `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
-| `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
-| `xxlCols`               | `ColSpan`                                                 | —             | Column span at the `xxl` breakpoint.                                                                                                                                                                |
-| `xlCols`                | `ColSpan`                                                 | —             | Column span at the `xl` breakpoint.                                                                                                                                                                 |
-| `lgCols`                | `ColSpan`                                                 | —             | Column span at the `lg` breakpoint.                                                                                                                                                                 |
-| `mdCols`                | `ColSpan`                                                 | —             | Column span at the `md` breakpoint.                                                                                                                                                                 |
-| `smCols`                | `ColSpan`                                                 | —             | Column span at the `sm` breakpoint.                                                                                                                                                                 |
-| `xsCols`                | `ColSpan`                                                 | —             | Column span at the `xs` breakpoint.                                                                                                                                                                 |
-| `xxsCols`               | `ColSpan`                                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                    |
-
-## Rules
-
--   Every option node must have a unique `key` string — the key path is used for controlled state.
--   Provide `valueToStringFunction` when values are not plain strings and the selected display needs to be derived from the value.
--   Enable `selectableCategory` only when selecting a parent category is a valid business outcome — otherwise category nodes serve as navigational groupings only.
--   Use `enableSearch` when the total option count across all levels is large.
--   Use `readOnly` on review screens — not `disabled`.
--   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
--   `options` is the only mandatory component-specific prop.
--   Options follow a nested structure: `{ key: string, label: string, value: V, subItems?: L2OptionProps[] }`. Every option must have a unique `key`.
--   `selectedKeyPath` is an array of keys tracing the path to the selected leaf (e.g. `["parent-key", "child-key"]`).
--   `selectableCategory` enables selection of non-leaf (parent category) nodes.
-
-## Anti-patterns
-
--   Do not use `Form.NestedSelect` for flat option lists — use `Form.Select`.
--   Do not use when multiple selections are needed — use `Form.NestedMultiSelect`.
--   Do not use duplicate `key` values across options — selection state will break.
--   Do not set both `error` and `errorMessage`.
diff --git a/skills/fds-build/resources/v3/components/form-phone-number-input.md b/skills/fds-build/resources/v3/components/form-phone-number-input.md
deleted file mode 100644
index d150bc005c..0000000000
--- a/skills/fds-build/resources/v3/components/form-phone-number-input.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# Form.PhoneNumberInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-Type import: `import type { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input"`
-
-## When to use
-
--   Collecting a phone number that requires a country code prefix.
--   International forms where users may have numbers from different countries.
--   Use `fixedCountry` when the service only accepts numbers from one country (e.g. Singapore-only services).
-
-## Usage
-
-```tsx
-const StyledPhoneNumberInput = styled(Form.PhoneNumberInput)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
-
-## PhoneNumberInputValue
-
-| Prop          | Type     | Description                                                                                                             |
-| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `number`      | `string` | The phone number                                                                                                        |
-| `countryCode` | `string` | The country code (e.g. `"+65"`). The `+` prefix is optional on input but always included in the `onChange` return value |
-
-## Props
-
-| Prop                      | Type                                       | Default  | Description                                                                                                                                      |
-| ------------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                   | `PhoneNumberInputValue`                    | —        | Controlled value containing the selected country code and phone number.                                                                          |
-| `error`                   | `boolean`                                  | —        | Renders the input in an error state when `true`.                                                                                                 |
-| `allowClear`              | `boolean`                                  | —        | Shows a clear button inside the input when `true` and the field has a value.                                                                     |
-| `className`               | `string`                                   | —        | —                                                                                                                                                |
-| `noBorder`                | `boolean`                                  | false    | Removes the visible border from the input group when `true`.                                                                                     |
-| `fixedCountry`            | `boolean`                                  | false    | When `true`, the country code is displayed as a static label and the user cannot change it. When `false`, a searchable dropdown is rendered.     |
-| `onChange`                | `((value: PhoneNumberInputValue) => void)` | —        | Called whenever the country or phone number changes.                                                                                             |
-| `onClear`                 | `() => void`                               | —        | Called when the clear button is activated.                                                                                                       |
-| `onBlur`                  | `(() => void)`                             | —        | Called when the input loses focus.                                                                                                               |
-| `optionPlaceholder`       | `string`                                   | "Select" | Placeholder text shown in the country code dropdown when no country is selected.                                                                 |
-| `optionSearchPlaceholder` | `string`                                   | —        | Placeholder text shown inside the search field of the country code dropdown. Only relevant when `enableSearch` is `true`.                        |
-| `enableSearch`            | `boolean`                                  | —        | Enables a search field inside the country code dropdown.                                                                                         |
-| `onHideOptions`           | `(() => void)`                             | —        | Called when the country code dropdown closes.                                                                                                    |
-| `onShowOptions`           | `(() => void)`                             | —        | Called when the country code dropdown opens.                                                                                                     |
-| `disabled`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `name`                    | `string`                                   | —        | —                                                                                                                                                |
-| `pattern`                 | `string`                                   | —        | —                                                                                                                                                |
-| `placeholder`             | `string`                                   | —        | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                  | —        | —                                                                                                                                                |
-| `id`                      | `string`                                   | —        | —                                                                                                                                                |
-| `autoComplete`            | `string`                                   | —        | —                                                                                                                                                |
-| `getAriaLabel`            | `((country?: CountryValue) => string)`     | —        | Returns the accessible label for the phone number input.                                                                                         |
-| `label`                   | `FormLabelProps \| string`                 | —        | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`            | `string \| React.ReactNode`                | —        | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`              | `FormElementLayoutType`                    | —        | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                  | —        | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                  | —        | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                  | —        | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                  | —        | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                  | —        | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                  | —        | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                  | —        | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; `onChange` returns `{ countryCode, number }`.
--   Use `enableSearch` when the country list is long and users need to find their country quickly.
--   Use `fixedCountry` together with a pre-set `value.countryCode` so the locked code is visible.
--   Use `allowClear` when the field can be optionally cleared by the user.
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
-
-## Anti-patterns
-
--   Do not use a plain text input for international phone numbers — formatting and country code handling must be consistent.
--   Do not use without `fixedCountry` when only one country is supported — it creates unnecessary friction.
--   Do not omit `value.countryCode` when `fixedCountry` is true — the locked code won't render without it.
diff --git a/skills/fds-build/resources/v3/components/form-select.md b/skills/fds-build/resources/v3/components/form-select.md
deleted file mode 100644
index f5f29bfb32..0000000000
--- a/skills/fds-build/resources/v3/components/form-select.md
+++ /dev/null
@@ -1,103 +0,0 @@
-# Form.Select
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use when users must select exactly one option from a predefined list. For multiple selections use `Form.MultiSelect`. For hierarchical options use `Form.NestedSelect`.
-
-## Variants
-
-| `variant`   | When to use                                              |
-| ----------- | -------------------------------------------------------- |
-| `"default"` | Standard form context                                    |
-| `"small"`   | Compact layouts — inline filters, dense data-entry forms |
-
-## Usage
-
-```tsx
-import { Form } from "@lifesg/react-design-system/form";
-
-const options = [
-    { value: "sg", label: "Singapore" },
-    { value: "my", label: "Malaysia" },
-];
-
-<Form.Select
-    label="Country"
-    options={options}
-    selectedOption={selected}
-    valueExtractor={(opt) => opt.value}
-    listExtractor={(opt) => opt.label}
-    displayValueExtractor={(opt) => opt.label}
-    onSelectOption={(opt) => {}}
-/>;
-```
-
-## Props
-
-| Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
-| ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
-| `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
-| `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
-| `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
-| `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
-| `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `isOptionDisabled`           | `((item: T) => boolean)`                                      | —             | Returns `true` if the given option should be shown but not selectable.                                                                           |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
-| `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
-| `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
-| `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
-| `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
-| `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
-| `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                    | `ColSpan`                                                     | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                     | `ColSpan`                                                     | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                     | `ColSpan`                                                     | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                     | `ColSpan`                                                     | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                     | `ColSpan`                                                     | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                     | `ColSpan`                                                     | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                    | `ColSpan`                                                     | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Always provide `options` — the component has no meaning without it.
--   Provide `valueExtractor` and `listExtractor` when the option objects are not plain strings — these are effectively required for typed option arrays.
--   Always provide `displayValueExtractor` alongside `valueExtractor` when option objects have separate label/value fields. Without it, the component falls back to `valueExtractor`, showing the raw value (e.g. "sg") in the closed selector instead of the label (e.g. "Singapore").
--   Use `optionsLoadState` to communicate async loading states — set to `"loading"` while fetching, `"failed"` on error (triggers retry UI).
--   Use `enableSearch` when the list exceeds ~10 items.
--   Provide `customLabels.searchPlaceholder` instead of the deprecated `searchPlaceholder` prop.
--   Use `readOnly` on review screens — not `disabled`.
--   Only override `dropdownZIndex` or `dropdownRootNode` when there are confirmed z-index or scroll conflicts.
--   Use `dropdownWidth` when the dropdown must be wider than the trigger (e.g. long option text).
--   `options` is the only mandatory component-specific prop.
--   Only specify `dropdownRootNode` when the default `body` rendering causes scroll or z-index conflicts.
-
-## Anti-patterns
-
--   Do not use `Form.Select` when users can choose more than one option — use `Form.MultiSelect`.
--   Do not use the deprecated `searchPlaceholder` or `noResultsDescription` props directly — use `customLabels`.
--   Do not set both `error` and `errorMessage`.
--   Do not use `disabled` on review screens — use `readOnly`.
diff --git a/skills/fds-build/resources/v3/components/form-textarea.md b/skills/fds-build/resources/v3/components/form-textarea.md
deleted file mode 100644
index 2f6097f0b3..0000000000
--- a/skills/fds-build/resources/v3/components/form-textarea.md
+++ /dev/null
@@ -1,116 +0,0 @@
-# Form.Textarea
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
-Use for freeform long-text entry — descriptions, comments, reasons, or any field where users need more than one line. Use `Form.Input` for single-line text.
-
-## Usage
-
-### 1. Basic controlled textarea
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const [value, setValue] = useState("");
-
-<Form.Textarea
-    label="Description"
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    placeholder="Enter a description..."
-    rows={4}
-/>;
-```
-
-### 2. With `maxLength` — auto-renders a character counter
-
-```tsx
-<Form.Textarea
-    label="Comments"
-    maxLength={200}
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-/>;
-{
-    /* A counter "0 / 200" appears below automatically — no extra code needed */
-}
-```
-
-### 3. With `renderCustomCounter`
-
-The prop signature is `(maxLength: number, currentValueLength: number) => JSX.Element`. Note the argument order: `maxLength` first, then `currentValueLength`.
-
-```tsx
-<Form.Textarea
-    label="Comments"
-    maxLength={200}
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    renderCustomCounter={(maxLength, currentValueLength) => (
-        <span
-            style={{
-                color: currentValueLength > maxLength * 0.9 ? "red" : "inherit",
-            }}
-        >
-            {currentValueLength} of {maxLength} characters used
-        </span>
-    )}
-/>
-```
-
-### 4. With `transformValue`
-
-`transformValue` runs on every input event and replaces the raw value before it is applied. Do not duplicate this logic in `onChange`.
-
-```tsx
-<Form.Textarea
-    label="Reference code"
-    value={value}
-    onChange={(e) => setValue(e.target.value)}
-    transformValue={(raw) => raw.toUpperCase()}
-    maxLength={50}
-/>;
-{
-    /* User types "abc" → stored value becomes "ABC" */
-}
-```
-
-## Props
-
-| Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
-| --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
-| `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
-| `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
-| `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`             | `ColSpan`                                                             | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`              | `ColSpan`                                                             | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`              | `ColSpan`                                                             | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`              | `ColSpan`                                                             | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`              | `ColSpan`                                                             | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`              | `ColSpan`                                                             | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`             | `ColSpan`                                                             | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Set `rows` to match the expected content length — a short reason field needs fewer rows than a free-text description.
--   Set `resize="none"` when the textarea height is fixed by design to prevent layout disruption.
--   Provide `maxLength` when a character limit must be enforced — the built-in counter appears automatically.
--   Use `renderCustomCounter` only when the default counter format does not meet content requirements.
--   Use `transformValue` for on-the-fly normalisation (e.g. forced capitalisation) — do not replicate this in `onChange`.
--   Provide `errorMessage` rather than `error` alone.
--   Setting native `maxLength` renders a character counter below the textarea automatically.
--   `renderCustomCounter` overrides the default counter UI when `maxLength` is set.
--   `error` is redundant when `errorMessage` is provided.
--   `transformValue` runs on every input event — use for normalisation (e.g. uppercase conversion).
-
-## Anti-patterns
-
--   Do not use `Form.Textarea` for single-line inputs — use `Form.Input`.
--   Do not implement a manual character counter in consumer code when `maxLength` is set — the built-in counter handles it.
--   Do not set both `error` and `errorMessage`.
diff --git a/skills/fds-build/resources/v3/components/form-time-range-picker.md b/skills/fds-build/resources/v3/components/form-time-range-picker.md
deleted file mode 100644
index e05b3e60b3..0000000000
--- a/skills/fds-build/resources/v3/components/form-time-range-picker.md
+++ /dev/null
@@ -1,93 +0,0 @@
-# Form.TimeRangePicker
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a start and end time from the user (e.g. operating hours, meeting slot, booking window).
--   Use `variant="combobox"` with `interval` when users should pick from fixed time slots (e.g. every 30 minutes).
--   Use `variant="dial"` (default) for freeform time selection.
-
-## Usage
-
-```tsx
-const StyledTimeRangePicker = styled(Form.TimeRangePicker)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
-
-## Combobox-variant-specific props
-
-| Prop                     | Type     | Default | Description                                                  |
-| ------------------------ | -------- | ------- | ------------------------------------------------------------ |
-| `interval`               | `number` | `15`    | Minutes between each dropdown option                         |
-| `startLimit`             | `string` | —       | Earliest time shown in the dropdown                          |
-| `endLimit`               | `string` | —       | Latest time shown in the dropdown                            |
-| `initialScrollStartTime` | `string` | —       | Time the start dropdown scrolls to when start field is empty |
-| `initialScrollEndTime`   | `string` | —       | Time the end dropdown scrolls to when end field is empty     |
-
-## TimeRangePickerValue
-
-| Prop    | Type     | Description                                                                                                 |
-| ------- | -------- | ----------------------------------------------------------------------------------------------------------- |
-| `start` | `string` | Start time. Dial 24hr: `"HH:mm"`, dial 12hr: `"hh:mmA"`. Combobox 24hr: `"HH:mm"`, combobox 12hr: `"h:mma"` |
-| `end`   | `string` | End time, same format as `start`                                                                            |
-
-## Props
-
-| Prop                     | Type                                      | Default       | Description                                                                                                                                      |
-| ------------------------ | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                                  | —             | —                                                                                                                                                |
-| `id`                     | `string`                                  | —             | —                                                                                                                                                |
-| `style`                  | `React.CSSProperties`                     | —             | —                                                                                                                                                |
-| `aria-labelledby`        | `string`                                  | —             | ID of an element that labels both start and end time inputs.                                                                                     |
-| `aria-describedby`       | `string`                                  | —             | ID of an element that describes both start and end time inputs.                                                                                  |
-| `aria-invalid`           | `boolean`                                 | —             | —                                                                                                                                                |
-| `value`                  | `TimeRangePickerValue`                    | —             | An object with `start` and `end` values as an empty string or a string based format.                                                             |
-| `format`                 | `TimeRangePickerFormat`                   | "24hr"        | The time display and input format.                                                                                                               |
-| `disabled`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `readOnly`               | `boolean`                                 | —             | —                                                                                                                                                |
-| `error`                  | `boolean`                                 | —             | —                                                                                                                                                |
-| `variant`                | `TimeRangePickerVariant`                  | "dial"        | The picker interaction style.                                                                                                                    |
-| `interval`               | `number`                                  | —             | Minute interval between each option in the combobox dropdowns.                                                                                   |
-| `startLimit`             | `string`                                  | —             | Earliest selectable time shown in the combobox dropdowns.                                                                                        |
-| `endLimit`               | `string`                                  | —             | Latest selectable time shown in the combobox dropdowns.                                                                                          |
-| `initialScrollStartTime` | `string`                                  | —             | The time that the start field dropdown scrolls to on open..                                                                                      |
-| `initialScrollEndTime`   | `string`                                  | —             | The time that the end field dropdown scrolls to on open.                                                                                         |
-| `alignment`              | `DropdownAlignmentType`                   | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
-| `dropdownZIndex`         | `number`                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`                  | document.body | The root element that contains the dropdown element.                                                                                             |
-| `onChange`               | `((value: TimeRangePickerValue) => void)` | —             | Called when the selected time range changes.                                                                                                     |
-| `onFocus`                | `(() => void)`                            | —             | Called when the field receives focus.                                                                                                            |
-| `onBlur`                 | `(() => void)`                            | —             | Called when the field loses focus.                                                                                                               |
-| `label`                  | `FormLabelProps \| string`                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`           | `string \| React.ReactNode`               | —             | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`             | `FormElementLayoutType`                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                | `ColSpan`                                 | —             | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                 | `ColSpan`                                 | —             | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                 | `ColSpan`                                 | —             | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                 | `ColSpan`                                 | —             | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                 | `ColSpan`                                 | —             | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                 | `ColSpan`                                 | —             | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                | `ColSpan`                                 | —             | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; `onChange` receives a `TimeRangePickerValue`.
--   Match `format` to the expected string format in `TimeRangePickerValue`.
--   Use `startLimit`/`endLimit` with `combobox` variant to restrict available options to valid business hours.
--   Set `errorMessage` rather than `error` alone.
--   Use `dropdownRootNode` when inside a modal or scrollable container.
--   Time string format differs between `dial` and `combobox` variants — see `TimeRangePickerValue` above.
--   `interval`, `startLimit`, `endLimit`, and `initialScroll*` props only apply when `variant="combobox"`.
-
-## Anti-patterns
-
--   Do not use for single time selection — use `Form.TimePicker` instead.
--   Do not mix dial and combobox time string formats — the format differs between variants.
--   Do not set combobox-specific props (`interval`, `startLimit`, `endLimit`, `initialScroll*`) when `variant="dial"`.
diff --git a/skills/fds-build/resources/v3/components/form-timepicker.md b/skills/fds-build/resources/v3/components/form-timepicker.md
deleted file mode 100644
index a2869dcfa2..0000000000
--- a/skills/fds-build/resources/v3/components/form-timepicker.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Form.Timepicker
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-> **Casing:** the export is `Form.Timepicker` (lowercase `p`), not `Form.TimePicker`.
-
-## When to use
-
--   Collecting a single time value from the user (e.g. appointment time, start time, notification time).
--   Use `format="12hr"` for consumer-facing forms where AM/PM is more intuitive.
--   Use `format="24hr"` (default) for operational or technical contexts.
-
-## Usage
-
-```tsx
-const StyledTimepicker = styled(Form.Timepicker)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-Defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper.
-
-## Props
-
-| Prop               | Type                        | Default                                                    | Description                                                                                                                                                               |
-| ------------------ | --------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `id`               | `string`                    | —                                                          | —                                                                                                                                                                         |
-| `style`            | `React.CSSProperties`       | —                                                          | —                                                                                                                                                                         |
-| `aria-labelledby`  | `string`                    | —                                                          | ID of an element that labels the timepicker input.                                                                                                                        |
-| `aria-describedby` | `string`                    | —                                                          | ID of an element that describes the timepicker input.                                                                                                                     |
-| `value`            | `string`                    | —                                                          | The controlled time value as a string. - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }` - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }` |
-| `placeholder`      | `string`                    | "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format. | Placeholder text shown when no value is selected.                                                                                                                         |
-| `format`           | `TimepickerFormat`          | "24hr"                                                     | The time display and input format.                                                                                                                                        |
-| `disabled`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `readOnly`         | `boolean`                   | —                                                          | —                                                                                                                                                                         |
-| `error`            | `boolean`                   | —                                                          | Renders the input in an error state when `true`.                                                                                                                          |
-| `alignment`        | `DropdownAlignmentType`     | —                                                          | Aligns the dropdown relative to the trigger element.                                                                                                                      |
-| `dropdownZIndex`   | `number`                    | —                                                          | CSS `z-index` applied to the dropdown overlay.                                                                                                                            |
-| `dropdownRootNode` | `RefObject<HTMLElement>`    | document.body                                              | The root element that contains the dropdown element.                                                                                                                      |
-| `onChange`         | `((value: string) => void)` | —                                                          | Called when the user confirms a selection.                                                                                                                                |
-| `onFocus`          | `(() => void)`              | —                                                          | Called when the timepicker input receives focus.                                                                                                                          |
-| `onBlur`           | `(() => void)`              | —                                                          | Called when focus leaves both the input and the dropdown.                                                                                                                 |
-| `label`            | `FormLabelProps \| string`  | —                                                          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                  |
-| `errorMessage`     | `string \| React.ReactNode` | —                                                          | Inline error text rendered below the input.                                                                                                                               |
-| `layoutType`       | `FormElementLayoutType`     | —                                                          | Controls whether the container uses flex layout or a responsive column grid.                                                                                              |
-| `xxlCols`          | `ColSpan`                   | —                                                          | Column span at the `xxl` breakpoint.                                                                                                                                      |
-| `xlCols`           | `ColSpan`                   | —                                                          | Column span at the `xl` breakpoint.                                                                                                                                       |
-| `lgCols`           | `ColSpan`                   | —                                                          | Column span at the `lg` breakpoint.                                                                                                                                       |
-| `mdCols`           | `ColSpan`                   | —                                                          | Column span at the `md` breakpoint.                                                                                                                                       |
-| `smCols`           | `ColSpan`                   | —                                                          | Column span at the `sm` breakpoint.                                                                                                                                       |
-| `xsCols`           | `ColSpan`                   | —                                                          | Column span at the `xs` breakpoint.                                                                                                                                       |
-| `xxsCols`          | `ColSpan`                   | —                                                          | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                          |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage.
--   Match `format` to the expected string format: `"HH:mm"` for 24hr, `"hh:mmA"` for 12hr.
--   Set `errorMessage` rather than `error` alone so users understand what is wrong.
--   Use `dropdownRootNode` when the picker is inside a modal or fixed container to avoid z-index issues.
--   Use `alignment="right"` when the picker is near the right edge of the viewport.
--   `onChange` fires only after the user clicks the Confirm button, not on every dial interaction.
--   `onBlur` does not apply any in-progress selection — use `onChange` for committed values.
-
-## Anti-patterns
-
--   Do not use for time-range selection — use `Form.TimeRangePicker` instead.
--   Do not mix 12hr format strings with `format="24hr"` or vice versa.
--   Do not rely on `onBlur` to capture the selected value — it does not commit the selection.
diff --git a/skills/fds-build/resources/v3/components/form-unit-number-input.md b/skills/fds-build/resources/v3/components/form-unit-number-input.md
deleted file mode 100644
index 363e8c92a9..0000000000
--- a/skills/fds-build/resources/v3/components/form-unit-number-input.md
+++ /dev/null
@@ -1,133 +0,0 @@
-# Form.UnitNumberInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Collecting a Singapore unit number in `#floor-unit` format (e.g. `#01-234`).
--   Any address form that includes a unit number field for Singapore addresses.
-
-## Usage
-
-### Basic controlled usage with validation guard
-
-`onChange` returns a `floor-unit` string (e.g. `"03-12"`) or the sentinel string `"Invalid unit number"` for malformed input. Always check before persisting.
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const UnitField = () => {
-    const [value, setValue] = useState("");
-    const [error, setError] = useState("");
-
-    const handleChange = (val: string) => {
-        if (val === "Invalid unit number") {
-            setError("Please enter a valid unit number.");
-            // Do not persist — keep previous valid value in state
-        } else {
-            setError("");
-            setValue(val); // e.g. "03-12"
-        }
-    };
-
-    return (
-        <Form.UnitNumberInput
-            label="Unit number"
-            value={value}
-            onChange={handleChange}
-            errorMessage={error}
-        />
-    );
-};
-```
-
-### `onBlur` zero-pads automatically
-
-After the user tabs away, `onBlur` fires with the formatted value. The displayed value may change without any user input — update state accordingly.
-
-```tsx
-<Form.UnitNumberInput
-    label="Unit number"
-    value={value}
-    onChange={handleChange}
-    onBlur={(formatted) => {
-        // e.g. user typed "3-2" → formatted is "03-02"
-        setValue(formatted);
-    }}
-/>
-```
-
-### `onChangeRaw` — separate floor and unit
-
-Use `onChangeRaw` when downstream code needs floor and unit as distinct values, regardless of validity.
-
-```tsx
-<Form.UnitNumberInput
-    label="Unit number"
-    onChangeRaw={(parts: string[]) => {
-        const [floor, unit] = parts; // e.g. ["03", "12"]
-        setFloor(floor);
-        setUnit(unit);
-    }}
-/>
-```
-
-Width: defaults to 4 columns wide at `lg` and above; full-width on mobile. Use `max-width` via a styled wrapper:
-
-```tsx
-const StyledUnitNumberInput = styled(Form.UnitNumberInput)`
-    ${MediaQuery.MinWidth.lg} {
-        max-width: 24rem;
-    }
-`;
-```
-
-## Props
-
-| Prop           | Type                          | Default   | Description                                                                                                                                      |
-| -------------- | ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`    | `string`                      | —         | —                                                                                                                                                |
-| `id`           | `string`                      | —         | —                                                                                                                                                |
-| `style`        | `React.CSSProperties`         | —         | —                                                                                                                                                |
-| `tabIndex`     | `number`                      | —         | —                                                                                                                                                |
-| `readOnly`     | `boolean`                     | —         | —                                                                                                                                                |
-| `placeholder`  | `string`                      | "00-8888" | Placeholder text in `"floor-unit"` format.                                                                                                       |
-| `role`         | `React.AriaRole`              | —         | —                                                                                                                                                |
-| `value`        | `string`                      | —         | The combined unit number value in `"floor-unit"` format (e.g. `"01-234"`).                                                                       |
-| `name`         | `string`                      | —         | —                                                                                                                                                |
-| `error`        | `boolean`                     | —         | Renders the input in an error state.                                                                                                             |
-| `disabled`     | `boolean`                     | —         | —                                                                                                                                                |
-| `autoComplete` | `string`                      | —         | —                                                                                                                                                |
-| `onChange`     | `((value: string) => void)`   | —         | Called when the value of either sub-input changes.                                                                                               |
-| `onChangeRaw`  | `((value: string[]) => void)` | —         | Called when either sub-input changes.                                                                                                            |
-| `onBlur`       | `((value: string) => void)`   | —         | Called when focus leaves the component entirely.                                                                                                 |
-| `onBlurRaw`    | `((value: string[]) => void)` | —         | Called when focus leaves the component.                                                                                                          |
-| `label`        | `FormLabelProps \| string`    | —         | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage` | `string \| React.ReactNode`   | —         | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`   | `FormElementLayoutType`       | —         | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`      | `ColSpan`                     | —         | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`       | `ColSpan`                     | —         | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`       | `ColSpan`                     | —         | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`       | `ColSpan`                     | —         | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`       | `ColSpan`                     | —         | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`       | `ColSpan`                     | —         | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`      | `ColSpan`                     | —         | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage.
--   Check the return value of `onChange` for `"Invalid unit number"` and handle it before persisting the value.
--   Use `onChangeRaw` if you need floor and unit as separate values for downstream processing.
--   Use `onBlur` to get the zero-padded, formatted value after the user finishes typing.
--   Set `errorMessage` to explain validation failures.
--   `onChange` returns `"Invalid unit number"` for malformed input — check for this string before saving.
--   `onBlur` zero-pads the unit part (e.g. `"11-2"` → `"11-02"`).
--   Use `onChangeRaw` / `onBlurRaw` when you need floor and unit as separate values.
-
-## Anti-patterns
-
--   Do not use a plain text input for unit numbers — the component enforces the correct format automatically.
--   Do not persist the value returned from `onChange` without first checking it is not `"Invalid unit number"`.
--   Do not use for non-Singapore address formats — the component enforces the `floor-unit` structure.
diff --git a/skills/fds-build/resources/v3/components/icon-button.md b/skills/fds-build/resources/v3/components/icon-button.md
deleted file mode 100644
index 095e001cff..0000000000
--- a/skills/fds-build/resources/v3/components/icon-button.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# IconButton
-
-> **Not available in v4.** If you are building for v4, do not use this component.
-
-Import: `import { IconButton } from "@lifesg/react-design-system/icon-button"`
-
-## Rules
-
--   `aria-label` is required on every `IconButton` — icon-only buttons have no visible text for screen readers.
--   Pass the icon component as `children`.
-
-## Anti-patterns
-
--   Omitting `aria-label` — icon-only buttons are inaccessible without it.
diff --git a/skills/fds-build/resources/v3/components/icon.md b/skills/fds-build/resources/v3/components/icon.md
deleted file mode 100644
index 96b82ec3e1..0000000000
--- a/skills/fds-build/resources/v3/components/icon.md
+++ /dev/null
@@ -1,167 +0,0 @@
-# Icons
-
-Icons come from `@lifesg/react-icons` — a separate package. Each icon is its own named export.
-
-## Import pattern
-
-Icon names follow `{name}` → component name is `{PascalCase}Icon`:
-
-```tsx
-import { ArrowRightIcon } from "@lifesg/react-icons/arrow-right";
-import { TickCircleFillIcon } from "@lifesg/react-icons/tick-circle-fill";
-import { PersonIcon } from "@lifesg/react-icons/person";
-```
-
-Pattern: `kebab-case` name → import path `@lifesg/react-icons/{name}` → component `{PascalCase}Icon`
-
-## Available icons
-
-Icons come in two variants: outline (default) and filled (`-fill` suffix).
-
-### Arrows & Navigation
-
-`arrow-up` `arrow-down` `arrow-left` `arrow-right`
-`arrow-up-circle` `arrow-up-circle-fill` `arrow-down-circle` `arrow-down-circle-fill`
-`arrow-left-circle` `arrow-left-circle-fill` `arrow-right-circle` `arrow-right-circle-fill`
-`arrow-left-up` `arrow-left-down` `arrow-right-up` `arrow-right-down`
-`chevron-up` `chevron-down` `chevron-left` `chevron-right`
-`chevron-2-left` `chevron-2-right`
-`chevron-line-left` `chevron-line-right`
-`caret-up` `caret-down` `caret-left` `caret-right`
-`multi-chevron-up-down` `multi-chevron-down-up`
-`navigation` `navigation-fill`
-`external` `return`
-
-### Actions
-
-`plus` `plus-circle` `plus-circle-fill`
-`minus` `minus-circle` `minus-circle-fill` `minus-square` `minus-square-fill`
-`cross` `cross-circle` `cross-circle-fill`
-`tick` `tick-circle` `tick-circle-fill`
-`pencil` `pencil-fill` `pencil-stroke` `pencil-stroke-fill`
-`bin` `bin-fill`
-`copy` `copy-fill`
-`download` `upload`
-`share` `link`
-`login` `logout`
-`refresh` `replay` `retry`
-`drag-handle`
-`filter`
-`sort-ascending` `sort-descending`
-`fullscreen-open` `fullscreen-close`
-`read-more`
-`eraser`
-
-### Status & Feedback
-
-`tick-circle` `tick-circle-fill`
-`cross-circle` `cross-circle-fill`
-`exclamation-circle` `exclamation-circle-fill`
-`exclamation-triangle` `exclamation-triangle-fill`
-`i-circle` `i-circle-fill`
-`questionmark-circle` `questionmark-circle-fill`
-`thumb-up` `thumb-up-fill`
-`star` `star-fill` `star-half`
-
-### People & Identity
-
-`person` `person-fill`
-`person-2` `person-2-fill`
-`person-group` `person-group-fill`
-`person-plus` `person-plus-fill`
-`person-minus` `person-minus-fill`
-`person-2-plus` `person-2-plus-fill`
-`person-2-minus` `person-2-minus-fill`
-`person-gear` `person-gear-fill`
-`person-off` `person-off-fill`
-`id-card` `id-card-fill`
-
-### Communication
-
-`envelope` `envelope-fill`
-`envelope-open` `envelope-open-fill`
-`bell` `bell-fill`
-`phone` `phone-fill`
-`inbox` `inbox-fill`
-`speaker` `speaker-fill`
-
-### Files & Documents
-
-`doc` `doc-fill`
-`doc-pencil` `doc-pencil-fill`
-`album` `album-fill`
-`box` `box-fill`
-`index`
-`text` `text-fill`
-
-### Calendar & Time
-
-`calendar` `calendar-fill`
-`calendar-event` `calendar-event-fill`
-`calendar-plus` `calendar-plus-fill`
-`calendar-cross` `calendar-cross-fill`
-`calendar-dot` `calendar-dot-fill`
-`calendar-pencil` `calendar-pencil-fill`
-`calendar-tick` `calendar-tick-fill`
-`clock` `clock-fill`
-`recurring` `non-recurring`
-
-### Location & Maps
-
-`map` `map-fill`
-`pin` `pin-fill`
-`point`
-`navigation` `navigation-fill`
-`globe`
-`house` `house-fill`
-`building`
-`floor-plan` `floor-plan-fill`
-
-### Devices & Media
-
-`camera` `camera-fill`
-`tablet` `tablet-fill`
-`phone` `phone-fill`
-`cloud` `cloud-fill`
-`cloud-arrow-up` `cloud-arrow-up-fill`
-`cloud-arrow-down` `cloud-arrow-down-fill`
-`cloud-tick` `cloud-tick-fill`
-`qr`
-
-### UI & Layout
-
-`menu`
-`ellipsis-horizontal` `ellipsis-vertical`
-`gear` `gear-fill`
-`lock` `lock-fill`
-`eye` `eye-fill`
-`eye-slash` `eye-slash-fill`
-`list`
-`square` `square-fill`
-`square-2x2` `square-2x2-fill`
-`square-tick` `square-tick-fill`
-`circle` `circle-dot`
-`toggle-on` `toggle-on-fill`
-`toggle-off` `toggle-off-fill`
-`magnifier` `magnifier-plus` `magnifier-minus`
-
-### Misc
-
-`bookmark` `bookmark-fill`
-`chart` `chart-fill`
-`car`
-`dollar`
-`printer` `printer-fill`
-`lightbulb` `lightbulb-fill`
-`language`
-`ticket` `ticket-fill`
-`triangle-forward` `triangle-forward-fill`
-`align-left` `align-center` `align-right` `align-justify`
-`placeholder` `placeholder-image`
-
-## Rules
-
--   Never guess an icon name — verify it exists in the list above before importing.
--   `-fill` variants are the solid/filled version; the base name is outline.
--   Fallback: if no suitable icon exists in `@lifesg/react-icons`, use `@mui/icons-material` as a secondary source.
--   For `IconButton`, always set `aria-label` — the icon alone is not accessible.
diff --git a/skills/fds-build/resources/v3/components/input.md b/skills/fds-build/resources/v3/components/input.md
deleted file mode 100644
index 2ad6979937..0000000000
--- a/skills/fds-build/resources/v3/components/input.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Input
-
-Import: `import { Input } from "@lifesg/react-design-system/input"`
-
-## When to use
-
-Use `Input` for standalone inputs that do not need a label or error message — search bars, inline editing, filter fields, or composition contexts where the form layout is provided externally. For all labelled form fields with validation messages, use `Form.Input` instead.
-
-## Variants
-
-| `styleType`            | When to use                                                                                                      |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `"bordered"` (default) | Standard standalone input — provides clear affordance                                                            |
-| `"no-border"`          | Inline editing or search bars embedded in headers/toolbars where a border would conflict with the surrounding UI |
-
-## Props — `InputProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `error`      | `boolean`        | —          | Marks the input wrapper in an error state.                                                                    |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Props — `InputPartialProps`
-
-| Prop         | Type             | Default    | Description                                                                                                   |
-| ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
-| `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
-| `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
-
-## Rules
-
--   Use `type="email"` for email fields and `type="tel"` for phone fields — triggers the correct mobile keyboard.
--   Use `spacing` for formatted `tel` inputs (e.g. `spacing={4}` for `9123 4567`) — do not implement custom character splitting.
--   Use `allowClear` for search inputs and optional fields; pair with `onClear` to reset the controlled value.
--   Set `error={true}` to communicate an invalid state visually — provide a separate error message element in the surrounding layout.
--   Use `styleType="no-border"` only when the surrounding container or background provides sufficient visual separation.
--   `Input` is the bare input field with no label or error message wrapper. Use `Form.Input` when a label or validation message is needed.
--   `spacing` only has effect when `type="tel"`.
--   `styleType="no-border"` removes the visible border — use only when the surrounding context provides sufficient visual distinction.
--   `error` drives error-state styling only; there is no built-in error message — pair with external error text if needed.
-
-## Anti-patterns
-
--   Do not use `Input` inside a form that needs labels or validation messages — use `Form.Input`.
--   Do not use `spacing` with input types other than `"tel"`.
--   Do not rely on `Input` alone to surface error messages — it has no built-in error text slot.
diff --git a/skills/fds-build/resources/v3/components/layout.md b/skills/fds-build/resources/v3/components/layout.md
deleted file mode 100644
index 6a45830bb1..0000000000
--- a/skills/fds-build/resources/v3/components/layout.md
+++ /dev/null
@@ -1,153 +0,0 @@
-# Layout
-
-Import: `import { Layout } from "@lifesg/react-design-system/layout"`
-
-## Composition
-
-```
-Layout.Container type="grid"        ← responsive 12-col grid (desktop) / 8-col (mobile)
-├── Layout.ColDiv xsCols lgCols     ← column span — always set xsCols
-├── Layout.ColDiv xsCols lgCols
-└── Layout.ColDiv xsCols lgCols
-
-Layout.Container type="flex"        ← horizontal flexbox row
-└── {children}
-
-Layout.Container type="flex-column" ← vertical flexbox column
-└── {children}
-```
-
-`Layout.Section` and `Layout.Content` share the same props as `Layout.Container` and can be used in place of it for semantic HTML structure. Never nest `Layout.Container` inside another `Layout.Container`. Always set `xsCols` on every `Layout.ColDiv` — never set only `lgCols`.
-
--   `Layout.ColDiv` — responsive grid column div
-
-## Usage
-
-```tsx
-import { Layout } from "@lifesg/react-design-system/layout";
-
-<Layout.Container type="grid">
-    <Layout.ColDiv xsCols={8} lgCols={6}>
-        Content
-    </Layout.ColDiv>
-</Layout.Container>;
-```
-
-| `type`          | Use case                         |
-| --------------- | -------------------------------- |
-| `"grid"`        | Responsive column grid (default) |
-| `"flex"`        | Horizontal flexbox layout        |
-| `"flex-column"` | Vertical flexbox layout          |
-
-## Breakpoints
-
-| Breakpoint | Min width | Columns | Gutter | Device                |
-| ---------- | --------- | ------- | ------ | --------------------- |
-| `xxs`      | 0px       | 8       | 16px   | Smallest mobile       |
-| `xs`       | 321px     | 8       | 16px   | Small mobile          |
-| `sm`       | 376px     | 8       | 16px   | Mobile                |
-| `md`       | 481px     | 8       | 16px   | Large mobile / tablet |
-| `lg`       | 769px     | 12      | 32px   | Desktop               |
-| `xl`       | 1201px    | 12      | 32px   | Large desktop         |
-| `xxl`      | 1441px    | 12      | 32px   | Extra-large           |
-
-### Common column widths
-
-| Use case                             | `xsCols` | `lgCols` | `xlCols` |
-| ------------------------------------ | -------- | -------- | -------- |
-| Full width                           | 8        | 12       | —        |
-| Full width (form progress indicator) | 12       | 12       | —        |
-| Narrow content (forms)               | 12       | 9        | 8        |
-| Half-width (2-up cards)              | 8        | 6        | —        |
-| Third-width (3-up cards)             | 8        | 4        | —        |
-| Quarter-width (4-up metrics)         | 8        | 6        | 3        |
-| Sidebar                              | 8        | 3        | —        |
-| Main + sidebar main                  | 8        | 9        | —        |
-
-## Responsive styles
-
-Use `MediaQuery` for media queries in styled-components — not `Breakpoint`. `Breakpoint` contains raw numbers only; `MediaQuery` produces the actual `@media` string.
-
-```tsx
-import { MediaQuery, Spacing } from "@lifesg/react-design-system/theme";
-import styled from "styled-components";
-
-const ResponsiveDiv = styled.div`
-    padding: ${Spacing["spacing-16"]};
-
-    @media ${MediaQuery.MinWidth.lg} {
-        padding: ${Spacing["spacing-32"]};
-    }
-`;
-```
-
-| Token                    | Query type          | When it applies                  |
-| ------------------------ | ------------------- | -------------------------------- |
-| `MediaQuery.MinWidth.md` | `min-width: 481px`  | md and up (tablet+)              |
-| `MediaQuery.MinWidth.lg` | `min-width: 769px`  | lg and up (desktop+)             |
-| `MediaQuery.MaxWidth.md` | `max-width: 768px`  | md and below (mobile only)       |
-| `MediaQuery.MaxWidth.lg` | `max-width: 1200px` | lg and below (non-large-desktop) |
-
-Design mobile-first — define base styles for mobile, then override with `MinWidth` for larger screens.
-
-## Props — `ContainerProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `SectionProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ContentProps`
-
-| Prop          | Type              | Default | Description                                               |
-| ------------- | ----------------- | ------- | --------------------------------------------------------- |
-| `type`        | `ContainerType`   | "flex"  | Display mode applied to the container.                    |
-| `children` \* | `React.ReactNode` | —       | —                                                         |
-| `stretch`     | `boolean`         | false   | Stretches the element to fill its container's full width. |
-
-## Props — `ColProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Props — `ColDivProps`
-
-| Prop      | Type      | Default | Description                                                                                                                                      |
-| --------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `xxlCols` | `ColSpan` | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`  | `ColSpan` | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`  | `ColSpan` | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`  | `ColSpan` | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`  | `ColSpan` | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`  | `ColSpan` | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols` | `ColSpan` | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Do not use CSS modules or plain CSS/SCSS — styled-components only.
--   Use `MediaQuery.MinWidth.*` for responsive styles — never `Breakpoint.*` or hardcoded pixel breakpoints.
--   Use Spacing tokens for padding and margins — never hardcode pixel values.
--   Prefix transient styled-component props with `$` to prevent DOM forwarding (e.g. `$variant`).
-
-Grid rules:
-
--   Always use `type="grid"` on Container for responsive column layouts.
--   Always specify `xsCols` on ColDiv — mobile-first; never only `lgCols`.
--   Max `xsCols` is 8 (mobile/tablet), max `lgCols` is 12 (desktop).
--   Never nest `Layout.Container` inside another `Layout.Container`.
--   A column span applies to all larger viewports until overridden.
diff --git a/skills/fds-build/resources/v3/components/menu.md b/skills/fds-build/resources/v3/components/menu.md
deleted file mode 100644
index 8e3a0d8378..0000000000
--- a/skills/fds-build/resources/v3/components/menu.md
+++ /dev/null
@@ -1,108 +0,0 @@
-# Menu
-
-Import: `import { Menu } from "@lifesg/react-design-system/menu"`
-
-## When to use
-
-Use when a trigger element (button, avatar, nav link) should open a floating dropdown with a list of actions or links.
-
-Common use cases:
-
--   Avatar / user account menu in authenticated dashboards
--   Navbar link dropdown for sub-navigation
-
-## Sub-components
-
-`Menu`, `Menu.Content`, `Menu.Section`, `Menu.Item`, `Menu.Link`
-
-## Variants
-
-| Use case          | Structure                                                                                                                   |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| User account menu | First section: name + email as `Menu.Item`. Subsequent sections: `Menu.Link` for profile/settings, `Menu.Item` for sign out |
-| Nav link dropdown | Single `Menu.Section` with `Menu.Link` items                                                                                |
-| Action menu       | `Menu.Section` with `Menu.Item` elements and optional `label`                                                               |
-
-## Usage
-
-```tsx
-import { Menu } from "@lifesg/react-design-system/menu";
-import { Button } from "@lifesg/react-design-system/button";
-
-<Menu
-    menuContent={
-        <Menu.Content>
-            <Menu.Section showDivider={false}>
-                <Menu.Link href="/profile">Profile</Menu.Link>
-                <Menu.Link href="/settings">Settings</Menu.Link>
-            </Menu.Section>
-            <Menu.Section>
-                <Menu.Item label="Sign out" onClick={() => {}} />
-            </Menu.Section>
-        </Menu.Content>
-    }
->
-    <Button.Default styleType="secondary">Account</Button.Default>
-</Menu>;
-```
-
-## Props — `MenuProps`
-
-| Prop               | Type                                         | Default            | Description                                                                                                                                                                     |
-| ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
-| `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`       | `boolean`                                    | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`     | `boolean`                                    | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`         | `PopoverOverflowType`                        | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel` | `string`                                     | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`   | `boolean`                                    | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`          | `boolean`                                    | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`  | `(() => void)`                               | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss` | `(() => void)`                               | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Props — `MenuContentProps`
-
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
-
-## Props — `MenuSectionProps`
-
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
-
-## Props — `MenuItemProps`
-
-| Prop       | Type     | Default | Description                                        |
-| ---------- | -------- | ------- | -------------------------------------------------- |
-| `label`    | `string` | —       | Primary text label.                                |
-| `subLabel` | `string` | —       | Secondary descriptive text rendered below `label`. |
-
-## Rules
-
--   `Menu` wraps a trigger element as its child — the trigger can be any element (e.g. `Avatar`, `Button`, `NavbarLink`).
--   Pass `Menu.Content` as the `menuContent` prop — not as a child of `Menu`.
--   Use `Menu.Link` for navigation (href-based); use `Menu.Item` for in-page actions (onClick-based).
--   Use `Menu.Section` with `showDivider` to visually separate unrelated groups of actions.
--   For user account menus, always show the user's name and email as the first section.
--   Use `position` to control which side of the trigger the menu appears on; default `"bottom-start"` suits most cases.
-
-## Anti-patterns
-
--   Do not pass `Menu.Content` as a child of `Menu` — it must be passed as `menuContent`.
--   Do not mix navigation links and action items in the same `Menu.Section` without a divider.
--   Do not use `Menu.Item` for links that navigate to a new page — use `Menu.Link` instead.
diff --git a/skills/fds-build/resources/v3/components/modal.md b/skills/fds-build/resources/v3/components/modal.md
deleted file mode 100644
index f83dcfca06..0000000000
--- a/skills/fds-build/resources/v3/components/modal.md
+++ /dev/null
@@ -1,114 +0,0 @@
-# Modal
-
-Import: `import { Modal } from "@lifesg/react-design-system/modal"`
-
-## When to use
-
-Use for focused interactions that interrupt the user's flow — confirmations, detail views, or short multi-field forms that do not warrant a new page.
-
-## Sub-components
-
-`Modal`, `Modal.Box`
-
-## Variants
-
-| Use case            | Notes                                                         |
-| ------------------- | ------------------------------------------------------------- |
-| Confirmation dialog | Title, description, and primary/secondary action buttons      |
-| Detail view         | Informational content with a close button                     |
-| Short form          | Minimal fields only; complex forms belong on a dedicated page |
-
-## Usage
-
-### Confirmation dialog
-
-```tsx
-import { useState } from "react";
-import { Modal } from "@lifesg/react-design-system/modal";
-import { Button } from "@lifesg/react-design-system/button";
-import { Text } from "@lifesg/react-design-system/text";
-
-const ConfirmDeleteModal = () => {
-    const [show, setShow] = useState(false);
-
-    const handleClose = () => setShow(false);
-
-    const handleConfirm = () => {
-        // perform action
-        setShow(false);
-    };
-
-    return (
-        <>
-            <Button.Default onClick={() => setShow(true)}>
-                Delete item
-            </Button.Default>
-
-            <Modal show={show} enableOverlayClick onOverlayClick={handleClose}>
-                <Modal.Box showCloseButton onClose={handleClose}>
-                    <div style={{ padding: "2rem" }}>
-                        <Text.H3 style={{ marginBottom: "0.5rem" }}>
-                            Delete this item?
-                        </Text.H3>
-                        <Text.Body style={{ marginBottom: "1.5rem" }}>
-                            This action cannot be undone.
-                        </Text.Body>
-                        <div style={{ display: "flex", gap: "1rem" }}>
-                            <Button.Default
-                                styleType="secondary"
-                                onClick={handleClose}
-                            >
-                                Cancel
-                            </Button.Default>
-                            <Button.Default onClick={handleConfirm}>
-                                Confirm
-                            </Button.Default>
-                        </div>
-                    </div>
-                </Modal.Box>
-            </Modal>
-        </>
-    );
-};
-```
-
-## Props — `ModalProps`
-
-| Prop                    | Type                      | Default       | Description                                                                                                                                             |
-| ----------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                                                                                  |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal slides in and out.                                                                                                       |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop dismisses the modal.                                                                                              |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                                                                                   |
-| `zIndex`                | `number`                  | —             | The z-index applied to the overlay stack.                                                                                                               |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
-
-## Props — `ModalBoxProps`
-
-| Prop              | Type                        | Default | Description                                                                                                                      |
-| ----------------- | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`           | —       | —                                                                                                                                |
-| `showCloseButton` | `boolean`                   | true    | Whether to render the close button in the top-right corner of the box.                                                           |
-| `onClose`         | `(() => void)`              | —       | Called when the close button is clicked.                                                                                         |
-| `elementRef`      | `React.Ref<HTMLDivElement>` | —       | Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
-
-## Rules
-
--   Always include `showCloseButton` on `Modal.Box` — the close button is the minimum required exit mechanism.
--   `Modal` handles the overlay and animation. Always nest `Modal.Box` (or a custom content container) inside `Modal`.
--   Fragments are not supported as direct children of `Modal`.
--   Content inside `Modal.Box` scrolls automatically when it exceeds the screen height.
--   Use `animationFrom="bottom"` for mobile-friendly sheet-style modals.
--   Optionally also allow overlay dismissal via `enableOverlayClick` + `onOverlayClick`.
--   Use Typography components for all text inside the modal — not raw HTML elements.
--   Keep modal content focused — one task or decision per modal.
--   Use illustrations (image above the title) for complex messages to reduce cognitive load; skip them for simple confirmations.
-
-## Anti-patterns
-
--   Do not use a Fragment as a direct child of `Modal` — use a valid HTML element or a component that forwards a ref.
--   Do not use modals for complex multi-step forms — navigate to a dedicated page instead.
--   Do not stack modals unless using `zIndex` to manage layering explicitly.
--   Do not omit `showCloseButton` — users must always have a way to exit the modal.
diff --git a/skills/fds-build/resources/v3/components/popover.md b/skills/fds-build/resources/v3/components/popover.md
deleted file mode 100644
index f201a7161f..0000000000
--- a/skills/fds-build/resources/v3/components/popover.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Popover
-
-Import: `import { Popover, withPopover } from "@lifesg/react-design-system/popover"`
-
-## When to use
-
-Use to show supplementary information when a user interacts with (clicks or hovers over) an element. On mobile, the popover renders as a bottom modal sheet.
-
-## Variants
-
-Two usage patterns are available:
-
--   **`withPopover` HOC** — wraps an existing element to add popover behaviour.
--   **`Popover` component** — a standalone popover that you control manually.
-
-## Usage
-
-```tsx
-import { withPopover } from "@lifesg/react-design-system/popover";
-import { Button } from "@lifesg/react-design-system/button";
-
-{
-    /* Preferred: HOC wraps an existing element */
-}
-{
-    withPopover(
-        <Button.Default styleType="link">What is this?</Button.Default>,
-        { content: "This field requires your NRIC number.", trigger: "click" }
-    );
-}
-```
-
-## Props — `PopoverProps`
-
-| Prop            | Type                    | Default            | Description                                                                                                         |
-| --------------- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `string \| JSX.Element` | —                  | Content displayed inside the popover. A plain string is automatically wrapped in a `Typography.BodyMD` element.     |
-| `visible`       | `boolean`               | false              | Controls whether the popover is visible.                                                                            |
-| `id`            | `string`                | —                  | —                                                                                                                   |
-| `className`     | `string`                | —                  | —                                                                                                                   |
-| `onMobileClose` | `(() => void)`          | —                  | Called when the user dismisses the popover on a mobile viewport, either by tapping the overlay or the close button. |
-| `ariaLabel`     | `string`                | "More information" | Accessible label for the `role="dialog"` element.                                                                   |
-| `overflow`      | `PopoverOverflowType`   | —                  | CSS `overflow` value applied to the popover card body.                                                              |
-| `maxHeight`     | `number`                | —                  | Maximum height of the popover card in pixels.                                                                       |
-
-## Props — `PopoverRenderProps`
-
-| Prop        | Type                  | Default | Description                                            |
-| ----------- | --------------------- | ------- | ------------------------------------------------------ |
-| `overflow`  | `PopoverOverflowType` | —       | CSS `overflow` value applied to the popover card body. |
-| `maxHeight` | `number`              | —       | Maximum height of the popover card in pixels.          |
-
-## Props — `PopoverTriggerProps`
-
-| Prop                | Type                                                                                 | Default            | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*       | `React.ReactNode`                                                                    | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `popoverContent` \* | `\| string \| JSX.Element \| ((renderProps: PopoverRenderProps) => React.ReactNode)` | —                  | Content shown inside the popover panel. A string or JSX element is rendered inside the default `Popover`; a render function bypasses it for completely custom rendering.        |
-| `trigger`           | `PopoverTriggerType`                                                                 | "click"            | Interaction that opens the popover.                                                                                                                                             |
-| `position`          | `PopoverPosition`                                                                    | "top"              | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `id`                | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `zIndex`            | `number`                                                                             | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
-| `className`         | `string`                                                                             | —                  | —                                                                                                                                                                               |
-| `rootNode`          | `RefObject<HTMLElement>`                                                             | document.body      | The root element that contains the popover element.                                                                                                                             |
-| `customOffset`      | `number`                                                                             | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
-| `delay`             | `\| { open?: number; close?: number }`                                               | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
-| `enableFlip`        | `boolean`                                                                            | true               | Allows the popover to flip to the opposite side when the preferred position has insufficient viewport space.                                                                    |
-| `enableResize`      | `boolean`                                                                            | false              | Resizes the popover to fit the remaining vertical space in the viewport.                                                                                                        |
-| `overflow`          | `PopoverOverflowType`                                                                | "auto"             | CSS `overflow` value forwarded to the popover card when `enableResize` is active.                                                                                               |
-| `popoverAriaLabel`  | `string`                                                                             | "More information" | Accessible label for the popover dialog element.                                                                                                                                |
-| `triggerOnFocus`    | `boolean`                                                                            | false              | Also opens the popover when the trigger element receives focus.                                                                                                                 |
-| `isModal`           | `boolean`                                                                            | true               | When `true`, focus is trapped inside the popover until dismissed. When `false`, the popover closes automatically once the user tabs away from both the trigger and the popover. |
-| `onPopoverAppear`   | `(() => void)`                                                                       | —                  | Called when the popover becomes visible.                                                                                                                                        |
-| `onPopoverDismiss`  | `(() => void)`                                                                       | —                  | Called when the popover is dismissed.                                                                                                                                           |
-
-## Rules
-
--   Use `withPopover` for most cases — it handles trigger logic automatically.
--   Use the `Popover` component directly when you need full manual control over visibility.
--   On mobile viewports the Popover renders as a bottom modal sheet — provide `onMobileClose` to handle dismissal.
diff --git a/skills/fds-build/resources/v3/components/tooltip.md b/skills/fds-build/resources/v3/components/tooltip.md
deleted file mode 100644
index 0bef9b2930..0000000000
--- a/skills/fds-build/resources/v3/components/tooltip.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Tooltip
-
-> **Not available in v4.** If you are building for v4, use `Popover` with `trigger="hover"` instead.
-
-Import: `import { Tooltip, withTooltip } from "@lifesg/react-design-system/tooltip"`
-
-## When to use
-
-Use to show brief supplementary information when a user hovers over or focuses an element. For interactive contextual information, use Popover instead.
-
-## Variants
-
-Two usage patterns are available:
-
--   **`withTooltip` HOC** — wraps an existing element to add tooltip behaviour automatically.
--   **`Tooltip` component** — a standalone tooltip that you control manually.
-
-## Usage
-
-```tsx
-import { withTooltip } from "@lifesg/react-design-system/tooltip";
-import { Button } from "@lifesg/react-design-system/button";
-
-{
-    /* Preferred: HOC wraps an existing element */
-}
-{
-    withTooltip(<Button.Default styleType="default">Save</Button.Default>, {
-        content: "Save your changes",
-    });
-}
-```
-
-## Rules
-
--   Use `withTooltip` for most cases — it handles hover trigger logic automatically.
--   Use the `Tooltip` component directly when you need full manual control over visibility.
diff --git a/skills/fds-build/resources/v3/foundations/layout-composition-patterns.md b/skills/fds-build/resources/v3/foundations/layout-composition-patterns.md
deleted file mode 100644
index ee3f20b411..0000000000
--- a/skills/fds-build/resources/v3/foundations/layout-composition-patterns.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Layout & Composition Patterns
-
-Cross-cutting rules for assembling FDS components into polished layouts. Apply alongside per-page pattern and template files.
-
----
-
-## Vertical Spacing Rhythm
-
-| Between…                                   | Token        |
-| ------------------------------------------ | ------------ |
-| Page title and first content section       | `spacing-32` |
-| Major page sections (cards → table)        | `spacing-48` |
-| Cards in a grid row (gap)                  | `spacing-24` |
-| Heading and its body text within a section | `spacing-8`  |
-| Form fields within a group                 | `spacing-24` |
-| Form field groups (personal → address)     | `spacing-32` |
-| Button row and the content above it        | `spacing-32` |
-| Last content section and page bottom       | `spacing-64` |
-
----
-
-## Visual Hierarchy
-
-Every page must use at least three distinct text levels.
-
-| Level   | Component              | Colour token   | Use for                                 |
-| ------- | ---------------------- | -------------- | --------------------------------------- |
-| Primary | `Typography.HeadingXL` | `text`         | Page title — one per page               |
-| Section | `Typography.HeadingMD` | `text`         | Section headings within the page        |
-| Card    | `Typography.HeadingSM` | `text`         | Card titles, panel headers              |
-| Body    | `Typography.BodyMD`    | `text`         | Default body text, descriptions         |
-| Support | `Typography.BodySM`    | `text-subtle`  | Secondary info, timestamps, helper text |
-| Caption | `Typography.BodyXS`    | `text-subtler` | Footnotes, disclaimers, metadata        |
-
-Page title pattern: `Typography.HeadingXL` as `h1`, `Typography.BodyMD` in `Colour["text-subtle"]` directly below as subtitle.
-
----
-
-## Anti-patterns
-
-| Anti-pattern                            | Fix                                                               |
-| --------------------------------------- | ----------------------------------------------------------------- |
-| All text the same size and colour       | Use at least 3 Typography sizes; `text-subtle` for secondary text |
-| No spacing between page sections        | `spacing-48` between major sections                               |
-| Summary metric cards stacked vertically | Use a responsive grid: 3–4 across on desktop, stacked on mobile   |
-| Buttons touching content above          | `spacing-32` above button row                                     |
-| Missing page-bottom spacing             | `spacing-64` padding-bottom on page wrapper                       |
diff --git a/skills/fds-build/resources/v3/foundations/tokens.md b/skills/fds-build/resources/v3/foundations/tokens.md
deleted file mode 100644
index 720a24789d..0000000000
--- a/skills/fds-build/resources/v3/foundations/tokens.md
+++ /dev/null
@@ -1,628 +0,0 @@
-# Design Tokens
-
-All tokens are imported from `@lifesg/react-design-system/theme`.
-
-```tsx
-import {
-    Colour,
-    Spacing,
-    Radius,
-    Font,
-} from "@lifesg/react-design-system/theme";
-```
-
-**v4:** tokens are plain CSS variable strings — use directly in inline `style={{}}` props.
-**v3:** tokens are styled-components interpolation functions — use only inside `styled` template literals, never in `style={{}}`.
-
----
-
-## Token Usage Basics
-
-`Colour`, `Spacing`, and `Font` values are **styled-components interpolation functions** — interpolate them directly inside tagged template literals. They resolve to the correct CSS value for the active `ThemeProvider` theme.
-
-```ts
-import { Colour, Spacing, Font } from "@lifesg/react-design-system/theme";
-import styled from "styled-components";
-
-const Card = styled.div`
-    background: ${Colour["bg-stronger"]};
-    padding: ${Spacing["spacing-16"]};
-    ${Font["body-md-regular"]}
-`;
-```
-
-**Using tokens as constants (outside styled-components):**
-
-```ts
-import { Colour, LifeSGTheme } from "@lifesg/react-design-system/theme";
-import { useTheme } from "styled-components";
-
-// In a React component — resolves based on current theme
-const Component = () => {
-    const theme = useTheme();
-    const colour = Colour["text"]({ theme });
-};
-
-// With a fixed theme object (not reactive to theme switching)
-const colour = Colour["text"]({ theme: LifeSGTheme });
-```
-
-**TypeScript setup (required once per project):**
-
-```ts
-// src/styled.d.ts
-import "styled-components";
-import { ThemeSpec } from "@lifesg/react-design-system/theme/types";
-
-declare module "styled-components" {
-    export interface DefaultTheme extends ThemeSpec {
-        maxColumns?: {
-            xxs: 8;
-            xs: 8;
-            sm: 8;
-            md: 8;
-            lg: 12;
-            xl: 12;
-            xxl: 12;
-        };
-    }
-}
-```
-
-Without this file every `${Colour[...]}` or `${Spacing[...]}` interpolation in a styled-component will emit a TypeScript error.
-
----
-
-## Anti-patterns
-
-| Anti-pattern                                              | Why it fails                                                                       | Correct alternative                                            |
-| --------------------------------------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| `const bg = Colour['bg']` outside a template literal      | `Colour['bg']` is a function — renders as `[object Object]` in CSS                 | Interpolate directly: `${Colour['bg']}`                        |
-| Creating a local token proxy file (`src/theme/tokens.ts`) | Plain strings do not resolve theme overrides — app silently breaks on theme change | Use `Colour[...]` / `Spacing[...]` directly                    |
-| Accessing `props.theme.colourScheme` in styled-components | Does not work without the `styled.d.ts` augmentation                               | Use `Colour[...]` / `Spacing[...]` interpolations instead      |
-| Hardcoding `var(--color-*)` CSS variables                 | FDS internal variable names may change                                             | Use `Colour[...]` tokens                                       |
-| Using `SpacingValues`                                     | This export does not exist                                                         | Use `Spacing`                                                  |
-| Using `Theme` (named export)                              | This export does not exist in `@lifesg/react-design-system/theme`                  | Use a named preset: `LifeSGTheme`, `SupportGoWhereTheme`, etc. |
-
----
-
-## Colour
-
-### Quick decision
-
-| I need a colour for…                     | Token                           |
-| ---------------------------------------- | ------------------------------- |
-| Page / card background                   | `Colour.bg`                     |
-| Emphasis panel / CTA surface             | `Colour["bg-strong"]`           |
-| Brand-tinted surface                     | `Colour["bg-primary-subtlest"]` |
-| Hover state (custom interactive)         | `Colour["bg-hover"]`            |
-| Selected state                           | `Colour["bg-selected"]`         |
-| Disabled background                      | `Colour["bg-disabled"]`         |
-| Modal / drawer backdrop                  | `Colour["overlay-strong"]`      |
-| Body copy, headings                      | `Colour.text`                   |
-| Form labels, UI labels                   | `Colour["text-subtle"]`         |
-| Descriptions, helper text, metadata      | `Colour["text-subtler"]`        |
-| Placeholders                             | `Colour["text-subtlest"]`       |
-| Active / brand text                      | `Colour["text-primary"]`        |
-| Link text                                | `Colour.hyperlink`              |
-| Text on dark backgrounds                 | `Colour["text-inverse"]`        |
-| Disabled text                            | `Colour["text-disabled"]`       |
-| Default border (inputs, cards, dividers) | `Colour.border`                 |
-| Emphasis border                          | `Colour["border-strong"]`       |
-| Brand border / active indicator          | `Colour["border-primary"]`      |
-| Focus ring                               | `Colour["border-focus"]`        |
-| Error border                             | `Colour["border-error"]`        |
-| Default icon                             | `Colour.icon`                   |
-| Secondary / subtle icon                  | `Colour["icon-subtle"]`         |
-| Brand icon                               | `Colour["icon-primary"]`        |
-| Icon on dark backgrounds                 | `Colour["icon-inverse"]`        |
-
-### Notation
-
-Single-word tokens use dot notation: `Colour.text`, `Colour.border`, `Colour.bg`, `Colour.icon`
-
-Hyphenated tokens use bracket notation: `Colour["text-subtle"]`, `Colour["bg-hover"]`
-
-### Status tokens
-
-| Status  | Background   | Text           | Icon           | Border           |
-| ------- | ------------ | -------------- | -------------- | ---------------- |
-| Success | `bg-success` | `text-success` | `icon-success` | `border-success` |
-| Warning | `bg-warning` | `text-warning` | `icon-warning` | `border-warning` |
-| Error   | `bg-error`   | `text-error`   | `icon-error`   | `border-error`   |
-| Info    | `bg-info`    | `text-info`    | `icon-info`    | `border-info`    |
-
-All follow bracket notation: `Colour["bg-success"]`, `Colour["text-error"]`.
-
-### Full token reference
-
-#### Text colours
-
-| Token key                | Use for                                    |
-| ------------------------ | ------------------------------------------ |
-| `text`                   | Default body text                          |
-| `text-subtle`            | Secondary / supporting text                |
-| `text-subtler`           | Tertiary / caption-like text               |
-| `text-subtlest`          | Weakest text — muted labels, hints         |
-| `text-primary`           | Brand-coloured text (links, active labels) |
-| `text-hover`             | Text colour on hover states                |
-| `text-selected`          | Text in selected / active state            |
-| `text-selected-hover`    | Text in selected state on hover            |
-| `text-disabled`          | Disabled state text                        |
-| `text-disabled-subtle`   | Subtle disabled text                       |
-| `text-disabled-subtlest` | Faintest disabled text                     |
-| `text-selected-disabled` | Text in selected + disabled state          |
-| `text-success`           | Success state text                         |
-| `text-warning`           | Warning state text                         |
-| `text-error`             | Inline validation error text               |
-| `text-info`              | Informational state text                   |
-| `text-inverse`           | Text on dark / inverted backgrounds        |
-
-#### Icon colours
-
-| Token key                | Use for                           |
-| ------------------------ | --------------------------------- |
-| `icon`                   | Default icon fill                 |
-| `icon-subtle`            | Subdued / secondary icon          |
-| `icon-strongest`         | Highest-contrast icon (very dark) |
-| `icon-primary`           | Brand-coloured icon               |
-| `icon-primary-subtle`    | Muted brand icon                  |
-| `icon-primary-subtlest`  | Faintest brand icon               |
-| `icon-hover`             | Icon on hover                     |
-| `icon-selected`          | Icon in selected state            |
-| `icon-selected-hover`    | Icon in selected state on hover   |
-| `icon-disabled`          | Disabled icon                     |
-| `icon-disabled-subtle`   | Subtle disabled icon              |
-| `icon-selected-disabled` | Icon in selected + disabled state |
-| `icon-success`           | Success state icon                |
-| `icon-warning`           | Warning state icon                |
-| `icon-error`             | Error state icon                  |
-| `icon-error-strong`      | Strong / filled error icon        |
-| `icon-info`              | Informational icon                |
-| `icon-inverse`           | Icon on dark background           |
-| `icon-primary-inverse`   | Brand icon on inverted background |
-
-#### Border colours
-
-| Token key                  | Use for                                     |
-| -------------------------- | ------------------------------------------- |
-| `border`                   | Default input / card / divider borders      |
-| `border-strong`            | Stronger divider or emphasis border         |
-| `border-stronger`          | Strongest border emphasis                   |
-| `border-primary`           | Brand-coloured border                       |
-| `border-primary-subtle`    | Muted brand-coloured border                 |
-| `border-focus`             | Focus ring on interactive elements          |
-| `border-focus-strong`      | Strong focus ring (accessibility highlight) |
-| `border-hover`             | Border on hover                             |
-| `border-hover-strong`      | Strong border on hover                      |
-| `border-selected`          | Selected / active state border              |
-| `border-selected-subtle`   | Subtle selected state border                |
-| `border-selected-subtlest` | Faintest selected state border              |
-| `border-selected-hover`    | Selected state border on hover              |
-| `border-disabled`          | Disabled state border                       |
-| `border-selected-disabled` | Selected + disabled state border            |
-| `border-error`             | Error state border                          |
-| `border-error-focus`       | Focus ring inside error state               |
-| `border-error-strong`      | Strong error state border                   |
-| `border-success`           | Success state border                        |
-| `border-warning`           | Warning state border                        |
-| `border-info`              | Informational border                        |
-
-#### Background colours
-
-| Token key                      | Use for                                     |
-| ------------------------------ | ------------------------------------------- |
-| `bg`                           | Default surface background                  |
-| `bg-strong`                    | Slightly elevated surface                   |
-| `bg-stronger`                  | Card / panel surface                        |
-| `bg-strongest`                 | Highest elevation surface                   |
-| `bg-hover`                     | Background on hover                         |
-| `bg-hover-strong`              | Strong hover background                     |
-| `bg-hover-subtle`              | Subtle hover background                     |
-| `bg-hover-neutral`             | Neutral hover (non-primary elements)        |
-| `bg-hover-neutral-strong`      | Strong neutral hover background             |
-| `bg-selected`                  | Selected item background                    |
-| `bg-selected-hover`            | Selected item background on hover           |
-| `bg-selected-strong`           | Strong selected state                       |
-| `bg-selected-strongest`        | Strongest selected fill                     |
-| `bg-selected-strongest-hover`  | Strongest selected fill on hover            |
-| `bg-disabled`                  | Disabled element background                 |
-| `bg-selected-disabled`         | Selected + disabled background              |
-| `bg-primary`                   | Brand-coloured fill                         |
-| `bg-primary-subtle`            | Subtle brand tint                           |
-| `bg-primary-subtler`           | Lighter brand tint                          |
-| `bg-primary-subtlest`          | Faintest brand tint                         |
-| `bg-primary-hover`             | Brand background on hover                   |
-| `bg-primary-subtlest-hover`    | Faintest brand tint on hover                |
-| `bg-primary-subtlest-selected` | Faintest brand tint in selected state       |
-| `bg-success`                   | Success state background                    |
-| `bg-success-hover`             | Success background on hover                 |
-| `bg-success-strong`            | Strong success fill (badges, chips)         |
-| `bg-success-strong-hover`      | Strong success fill on hover                |
-| `bg-warning`                   | Warning state background                    |
-| `bg-warning-hover`             | Warning background on hover                 |
-| `bg-warning-strong`            | Strong warning fill                         |
-| `bg-warning-strong-hover`      | Strong warning fill on hover                |
-| `bg-error`                     | Error state background                      |
-| `bg-error-hover`               | Error background on hover                   |
-| `bg-error-strong`              | Strong error fill                           |
-| `bg-error-strong-hover`        | Strong error fill on hover                  |
-| `bg-info`                      | Informational background                    |
-| `bg-info-hover`                | Informational background on hover           |
-| `bg-info-strong`               | Strong informational fill                   |
-| `bg-info-strong-hover`         | Strong informational fill on hover          |
-| `bg-inverse`                   | Dark / inverted background                  |
-| `bg-inverse-subtle`            | Subtle inverted background                  |
-| `bg-inverse-subtler`           | Lighter inverted background                 |
-| `bg-inverse-subtlest`          | Faintest inverted background                |
-| `bg-inverse-hover`             | Inverted background on hover                |
-| `bg-available`                 | Available / open slot (scheduling contexts) |
-| `overlay-strong`               | Modal / drawer backdrop                     |
-| `overlay-subtle`               | Soft overlay                                |
-
-#### Hyperlink
-
-| Token key           | Use for                 |
-| ------------------- | ----------------------- |
-| `hyperlink`         | Default link colour     |
-| `hyperlink-inverse` | Link on dark background |
-
-#### Focus
-
-| Token key            | Use for                           |
-| -------------------- | --------------------------------- |
-| `focus-ring`         | Keyboard focus outline colour     |
-| `focus-ring-inverse` | Focus outline on dark backgrounds |
-
-### Overriding
-
-```ts
-const customTheme: ThemeSpec = {
-    ...LifeSGTheme,
-    overrides: {
-        primitiveColour: { "primary-50": "#1768BE" },
-        semanticColour: {
-            "text-warning": Colour.Primitive["warning-10"],
-            "text-error": "#A04747",
-        },
-    },
-};
-```
-
-For dark mode, use `primitiveColourDark` / `semanticColourDark` keys instead.
-
-### Rules
-
--   Never hardcode hex values — always use a Colour token
--   Use `hyperlink` for link text — not `text-primary`
--   DS components (Button, Form.Input, Card, etc.) handle their own colour states — only apply Colour tokens to custom elements
-
----
-
-## Spacing
-
-Base-4 system. Import: `Spacing["spacing-{n}"]`
-
-| Token         | Value | Frequency    | Typical use                             |
-| ------------- | ----- | ------------ | --------------------------------------- |
-| `spacing-0`   | 0px   | Rare         | Reset / collapse                        |
-| `spacing-4`   | 4px   | Rare         | Tight inline gaps                       |
-| `spacing-8`   | 8px   | **Common**   | Icon-text gaps, heading-to-body gaps    |
-| `spacing-12`  | 12px  | Occasional   | Tight component gaps                    |
-| `spacing-16`  | 16px  | **Dominant** | List items, form fields, component gaps |
-| `spacing-20`  | 20px  | Occasional   | Medium-small spacing                    |
-| `spacing-24`  | 24px  | **Dominant** | Card padding, section gaps              |
-| `spacing-32`  | 32px  | Common       | Large spacing, section padding          |
-| `spacing-40`  | 40px  | Occasional   | Extra-large spacing                     |
-| `spacing-48`  | 48px  | Occasional   | Page-level vertical rhythm              |
-| `spacing-64`  | 64px  | Rare         | XXL spacing                             |
-| `spacing-72`  | 72px  | Rare         | Extra-large structural spacing          |
-| `layout-xs`   | —     | —            | Layout grid gutter xs breakpoint        |
-| `layout-sm`   | —     | —            | Layout grid gutter sm breakpoint        |
-| `layout-md`   | —     | —            | Layout grid gutter md breakpoint        |
-| `layout-lg`   | —     | —            | Layout grid gutter lg breakpoint        |
-| `layout-xl`   | —     | —            | Layout grid gutter xl breakpoint        |
-| `layout-xxl`  | —     | —            | Layout grid gutter xxl breakpoint       |
-| `layout-xxxl` | —     | —            | Layout grid gutter xxxl breakpoint      |
-
-Always bracket notation: `Spacing["spacing-16"]`
-
-Never hardcode `px` values — always use a Spacing token.
-
----
-
-## Radius
-
-| Token         | Value  | Use                                                  |
-| ------------- | ------ | ---------------------------------------------------- |
-| `Radius.none` | 0px    | Full-bleed, tables                                   |
-| `Radius.xs`   | 2px    | Rarely needed                                        |
-| `Radius.sm`   | 4px    | **Default** — form elements, small custom components |
-| `Radius.md`   | 8px    | Cards, panels, overlays                              |
-| `Radius.lg`   | 12px   | Modals, large overlays                               |
-| `Radius.full` | 9999px | Pills, avatars, circular elements                    |
-
-Always dot notation: `Radius.sm`, `Radius.md`
-
-DS components have radius baked in — do not override: Input/Textarea (`sm`), Card/Drawer/Menu/Toast (`md`), Modal (`lg`), Pill (`full`).
-
-**Overriding:**
-
-```ts
-const customTheme: ThemeSpec = {
-    ...LifeSGTheme,
-    overrides: { radius: { sm: 6 } },
-};
-```
-
----
-
-## Typography
-
-Use `Typography.*` components for all rendered text. Use `Font` tokens only when styling a non-text parent container that needs font styles.
-
-### Typography component → heading level
-
-| Component                | Default element | When to use                       |
-| ------------------------ | --------------- | --------------------------------- |
-| `Typography.HeadingXXL`  | `h1`            | Hero / landing page title         |
-| `Typography.HeadingXL`   | `h2`            | Page title (top of view)          |
-| `Typography.HeadingLG`   | `h3`            | Section heading — most common     |
-| `Typography.HeadingMD`   | `h4`            | Card heading, subsection          |
-| `Typography.HeadingSM`   | `h5`            | Small heading, list header        |
-| `Typography.HeadingXS`   | `h6`            | Tiny heading, emphasized label    |
-| `Typography.BodyBL`      | `p`             | Default body text, paragraphs     |
-| `Typography.BodyBLSmall` | `p`             | Emphasized small body text        |
-| `Typography.BodyMD`      | `p`             | Medium body text                  |
-| `Typography.BodySM`      | `p`             | Small text, captions, helper text |
-| `Typography.BodyXS`      | `p`             | Metadata, timestamps, footnotes   |
-
-Use the `as` prop when visual size and semantic heading level don't match:
-
-```tsx
-{
-    /* Visually large but logically a subsection h2 */
-}
-<Typography.HeadingLG as="h2">Section title</Typography.HeadingLG>;
-```
-
-Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
-
-### Rules
-
--   Sentence case for all UI text — "Save changes" not "Save Changes"
--   Always pair Font tokens with a Colour token — Font sets typography only, not colour
--   Heading level follows reading order, not visual size
-
----
-
-## Font Tokens (v3 styled-components only)
-
-> Import: `import { Font } from "@lifesg/react-design-system/theme"` > `Font[key]` injects a full set of CSS font properties (family, size, weight, line-height, letter-spacing) as a styled-components CSS block.
-> Use `Font.Spec[key]` to access individual font spec values (e.g. just the font size).
-
-Use `Typography.*` components for all rendered text content in JSX. Use `Font[...]` tokens only when initialising text styles in a styled-component container — e.g. to inherit to child elements, or to match an icon size to adjacent text.
-
-```tsx
-const CardHeader = styled.div`
-    ${Font["heading-md-semibold"]}
-    display: flex;
-    align-items: center;
-    gap: ${Spacing["spacing-8"]};
-`;
-
-// Match an inline icon height to the text size
-const Icon = styled.svg`
-    height: ${Font.Spec["heading-size-xxl"]};
-`;
-```
-
-Most headings use `-semibold`, not `-bold`. Default body is `body-baseline-regular`.
-
-### Overriding
-
-```ts
-const customTheme: ThemeSpec = {
-    ...LifeSGTheme,
-    overrides: {
-        fontSpec: { "heading-size-xxl": "5rem" },
-        font: {
-            "heading-body-light": css`
-                font-family: serif;
-                font-size: 1rem;
-                font-weight: 300;
-                line-height: 1.4rem;
-                letter-spacing: 0;
-            `,
-        },
-    },
-};
-```
-
-When overriding a font spec token, all font tokens that reference it also reflect the new value. Use longhand CSS properties (e.g. `font-size`, not `font`) to avoid overwriting unrelated font values.
-
----
-
-## Breakpoint / Media Query Tokens
-
-> Import: `import { MediaQuery, Breakpoint } from "@lifesg/react-design-system/theme"`
-
-`MediaQuery.MaxWidth.<tier>` and `MediaQuery.MinWidth.<tier>` inject a full `@media` rule into a styled-component template literal. Use `Breakpoint["<tier>-min"]` / `Breakpoint["<tier>-max"]` to access the raw pixel value at runtime (e.g. for JS conditional logic).
-
-```ts
-// Desktop-first: hide on xs and below
-const Panel = styled.div`
-    display: block;
-    ${MediaQuery.MaxWidth.xs} {
-        display: none;
-    }
-`;
-
-// Mobile-first: two columns from lg upward
-const Grid = styled.div`
-    columns: 1;
-    ${MediaQuery.MinWidth.lg} {
-        columns: 2;
-    }
-`;
-
-// Runtime value — compare against current window width
-const Component = () => {
-    const theme = useTheme();
-    const tabletMin = Breakpoint["md-min"]({ theme });
-    return window.innerWidth > tabletMin ? <Wide /> : <Narrow />;
-};
-```
-
-### Breakpoint tiers
-
-| Tier  | Screen width   | `*-min` value | `*-max` value | Columns | Gutter | Margin |
-| ----- | -------------- | ------------- | ------------- | ------- | ------ | ------ |
-| `xxs` | 0 – 320 px     | —             | 320 px        | 8       | 16 px  | 24 px  |
-| `xs`  | 321 – 375 px   | 321 px        | 375 px        | 8       | 16 px  | 24 px  |
-| `sm`  | 376 – 480 px   | 376 px        | 480 px        | 8       | 16 px  | 24 px  |
-| `md`  | 481 – 768 px   | 481 px        | 768 px        | 8       | 16 px  | 24 px  |
-| `lg`  | 769 – 1200 px  | 769 px        | 1200 px       | 12      | 32 px  | 48 px  |
-| `xl`  | 1201 – 1440 px | 1201 px       | 1440 px       | 12      | 32 px  | 48 px  |
-| `xxl` | ≥ 1441 px      | 1441 px       | —             | 12      | 32 px  | 48 px  |
-
-### `Breakpoint` token keys
-
-Each key returns a raw `number` (pixels) when called with `{ theme }`.
-
-| Token key | Value | Use for                    |
-| --------- | ----- | -------------------------- |
-| `xxs-max` | 320   | Max-width JS check for xxs |
-| `xs-min`  | 321   | Min-width JS check for xs  |
-| `xs-max`  | 375   | Max-width JS check for xs  |
-| `sm-min`  | 376   | Min-width JS check for sm  |
-| `sm-max`  | 480   | Max-width JS check for sm  |
-| `md-min`  | 481   | Min-width JS check for md  |
-| `md-max`  | 768   | Max-width JS check for md  |
-| `lg-min`  | 769   | Min-width JS check for lg  |
-| `lg-max`  | 1200  | Max-width JS check for lg  |
-| `xl-min`  | 1201  | Min-width JS check for xl  |
-| `xl-max`  | 1440  | Max-width JS check for xl  |
-| `xxl-min` | 1441  | Min-width JS check for xxl |
-
-### Overriding
-
-```ts
-const customTheme: ThemeSpec = {
-    ...LifeSGTheme,
-    overrides: {
-        breakpoint: {
-            "sm-max": 430,
-            "md-min": 431,
-        },
-    },
-};
-```
-
-All `MediaQuery` helpers automatically reflect the overridden values.
-
-### Known limitations
-
--   `MediaQuery` helpers are CSS-in-JS only — cannot be used outside a styled-component template literal
--   There is no built-in hook to reactively detect the current tier; wire `window.matchMedia` manually if needed
-
----
-
-## Shadow Tokens
-
-> Import: `import { Shadow } from "@lifesg/react-design-system/theme"`
-
-```ts
-const Card = styled.div`
-    box-shadow: ${Shadow["sm-subtle"]};
-`;
-
-const Input = styled.input`
-    box-shadow: ${Shadow["xs-focus-strong"]};
-`;
-```
-
-### Token reference
-
-| Token key         | Common use                            |
-| ----------------- | ------------------------------------- |
-| `xs-subtle`       | Subtle glow / container resting state |
-| `xs-strong`       | Strong glow / hover or active state   |
-| `xs-focus-strong` | Keyboard focus ring on inputs         |
-| `xs-error-strong` | Error focus ring on inputs            |
-| `sm-subtle`       | Card / panel resting elevation        |
-| `sm-strong`       | Card hover / lifted state             |
-| `md-subtle`       | Modal / drawer resting elevation      |
-| `md-strong`       | Modal hover or prominent elevation    |
-
----
-
-## Border Tokens
-
-> Import: `import { Border } from "@lifesg/react-design-system/theme"`
-
-`Border["width-*"]` for widths, `Border.Util["solid"]` for a full border shorthand.
-
-```ts
-// Individual properties
-const Box = styled.div`
-    border-width: ${Border["width-010"]};
-    border-style: ${Border["solid"]};
-`;
-
-// Util shorthand
-const Card = styled.div`
-    ${Border.Util["solid"]};
-`;
-
-// Util with custom options
-const Custom = styled.div`
-    ${Border.Util["solid"]({ thickness: 2, colour: "red", radius: 8 })};
-`;
-```
-
-### Token reference
-
-| Token key   | Value | Common use                  |
-| ----------- | ----- | --------------------------- |
-| `width-005` | 0.5px | Hairline divider            |
-| `width-010` | 1px   | Default input / card border |
-| `width-020` | 2px   | Emphasis / selected border  |
-| `solid`     | solid | Border style                |
-
-Utilities: `Border.Util["solid"]` and `Border.Util["dashed-default"]` accept optional `{ thickness, colour, radius }` — all parameters optional, omit to use token defaults.
-
----
-
-## Motion Tokens
-
-> Import: `import { Motion } from "@lifesg/react-design-system/theme"`
-
-```ts
-const Button = styled.button`
-    transition: background ${Motion["duration-250"]} ${Motion["ease-default"]};
-    &:hover {
-        background: darkgrey;
-    }
-`;
-```
-
-For elements with dynamic height or width (e.g. expandable panels), use `react-spring` instead — CSS transitions cannot handle layout animation reliably with dynamic content.
-
-### Duration
-
-| Token key       | Value  | Use for                 |
-| --------------- | ------ | ----------------------- |
-| `duration-150`  | 150ms  | Checkboxes, toggles     |
-| `duration-250`  | 250ms  | Buttons, fades          |
-| `duration-350`  | 350ms  | Icons, short movements  |
-| `duration-500`  | 500ms  | Search bars, toasts     |
-| `duration-800`  | 800ms  | Notifications, cards    |
-| `duration-1000` | 1000ms | Full-screen transitions |
-
-### Easing
-
-| Token key       | Value                                  | Use for                               |
-| --------------- | -------------------------------------- | ------------------------------------- |
-| `ease-default`  | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` | Non-moving elements — opacity, colour |
-| `ease-standard` | `cubic-bezier(0.86, 0, 0.07, 1)`       | Visible throughout motion — dropdowns |
diff --git a/skills/fds-build/resources/v3/patterns/states.md b/skills/fds-build/resources/v3/patterns/states.md
deleted file mode 100644
index 7afde1fa79..0000000000
--- a/skills/fds-build/resources/v3/patterns/states.md
+++ /dev/null
@@ -1,305 +0,0 @@
-# States Pattern
-
-Loading, empty, error, and success states for async operations and data absence.
-
----
-
-## Loading states
-
-### Full-page loading
-
-```tsx
-import styled from "styled-components";
-import { Layout } from "@lifesg/react-design-system/layout";
-import { Card } from "@lifesg/react-design-system/card";
-import { Typography } from "@lifesg/react-design-system/typography";
-import { Spacing } from "@lifesg/react-design-system/theme";
-
-const LoadingCard = styled(Card)`
-    text-align: center;
-    padding: ${Spacing["spacing-64"]} ${Spacing["spacing-32"]};
-`;
-
-if (isLoading) {
-    return (
-        <Layout.Container type="grid">
-            <Layout.ColDiv xsCols={8} lgCols={12}>
-                <LoadingCard>
-                    <LoadingSpinner />{" "}
-                    {/* import { LoadingSpinner } from "@lifesg/react-design-system/loading-spinner" */}
-                    <Typography.BodyBL>Loading...</Typography.BodyBL>
-                </LoadingCard>
-            </Layout.ColDiv>
-        </Layout.Container>
-    );
-}
-```
-
-### Skeleton loading (preferred for content-heavy pages)
-
-Render placeholder blocks matching the shape of real content. Use a CSS `pulse` animation (`opacity 0.5 → 1` at 1.5s). Show the same grid structure as the loaded state — same column count, same card shapes.
-
-### Button loading (inline async)
-
-```tsx
-<Button.Default type="submit" loading={isSubmitting} disabled={isSubmitting}>
-    {isSubmitting ? "Submitting..." : "Submit"}
-</Button.Default>
-```
-
-Always combine `loading` + `disabled` during async to prevent double-submission.
-
----
-
-## Empty states
-
-### First-time use (no data)
-
-```tsx
-import styled from "styled-components";
-import { Card } from "@lifesg/react-design-system/card";
-import { Typography } from "@lifesg/react-design-system/typography";
-import { ButtonWithIcon } from "@lifesg/react-design-system/button-with-icon";
-import { Spacing } from "@lifesg/react-design-system/theme";
-
-const EmptyCard = styled(Card)`
-    text-align: center;
-    padding: ${Spacing["spacing-64"]} ${Spacing["spacing-32"]};
-`;
-
-const EmptyButton = styled(ButtonWithIcon.Default)`
-    margin-top: ${Spacing["spacing-24"]};
-`;
-
-<EmptyCard>
-    <Typography.HeadingSM>No items yet</Typography.HeadingSM>
-    <Typography.BodyBL>
-        Get started by creating your first item
-    </Typography.BodyBL>
-    <EmptyButton icon={<PlusIcon />} onClick={handleCreate}>
-        Create item
-    </EmptyButton>
-</EmptyCard>;
-```
-
-### No search results
-
-```tsx
-import styled from "styled-components";
-import { Card } from "@lifesg/react-design-system/card";
-import { Typography } from "@lifesg/react-design-system/typography";
-import { Button } from "@lifesg/react-design-system/button";
-import { Spacing } from "@lifesg/react-design-system/theme";
-
-const EmptyCard = styled(Card)`
-    text-align: center;
-    padding: ${Spacing["spacing-64"]} ${Spacing["spacing-32"]};
-`;
-
-const EmptyButton = styled(Button.Default)`
-    margin-top: ${Spacing["spacing-24"]};
-`;
-
-<EmptyCard>
-    <Typography.HeadingSM>No results found</Typography.HeadingSM>
-    <Typography.BodyBL>Try adjusting your search or filters</Typography.BodyBL>
-    <EmptyButton styleType="secondary" onClick={handleClearFilters}>
-        Clear filters
-    </EmptyButton>
-</EmptyCard>;
-```
-
-For listing pages, prefer `ErrorDisplay type="no-item-found"` over a custom card.
-
-### Empty section (within a page)
-
-```tsx
-import styled from "styled-components";
-import { Typography } from "@lifesg/react-design-system/typography";
-import { Colour, Spacing } from "@lifesg/react-design-system/theme";
-
-const EmptySection = styled.div`
-    text-align: center;
-    padding: ${Spacing["spacing-32"]} 0;
-`;
-
-const MutedText = styled(Typography.BodySM)`
-    color: ${Colour["text-subtler"]};
-`;
-
-<EmptySection>
-    <MutedText>No recent activity to display</MutedText>
-</EmptySection>;
-```
-
----
-
-## Error states
-
-### API / fetch error
-
-```tsx
-import { Alert } from "@lifesg/react-design-system/alert";
-import { Layout } from "@lifesg/react-design-system/layout";
-
-if (error) {
-    return (
-        <Layout.Container type="grid">
-            <Layout.ColDiv xsCols={8} lgCols={12}>
-                <Alert
-                    type="error"
-                    actionLink={{
-                        children: "Try again",
-                        onClick: () => window.location.reload(),
-                    }}
-                >
-                    {error.message}
-                </Alert>
-            </Layout.ColDiv>
-        </Layout.Container>
-    );
-}
-```
-
-### 404 Not found
-
-```tsx
-import styled from "styled-components";
-import { Card } from "@lifesg/react-design-system/card";
-import { Typography } from "@lifesg/react-design-system/typography";
-import { Button } from "@lifesg/react-design-system/button";
-import { Spacing } from "@lifesg/react-design-system/theme";
-
-const ErrorCard = styled(Card)`
-    text-align: center;
-    padding: ${Spacing["spacing-64"]} ${Spacing["spacing-32"]};
-`;
-
-const ErrorButton = styled(Button.Default)`
-    margin-top: ${Spacing["spacing-24"]};
-`;
-
-<ErrorCard>
-    <Typography.HeadingXL>404</Typography.HeadingXL>
-    <Typography.HeadingSM>Page not found</Typography.HeadingSM>
-    <Typography.BodyBL>
-        The page you're looking for doesn't exist or has been moved
-    </Typography.BodyBL>
-    <ErrorButton onClick={() => navigate("/")}>Go to home</ErrorButton>
-</ErrorCard>;
-```
-
-### Permission denied
-
-```tsx
-<ErrorCard>
-    <Typography.HeadingSM>Access denied</Typography.HeadingSM>
-    <Typography.BodyBL>
-        You don't have permission to view this page
-    </Typography.BodyBL>
-    <ErrorButton styleType="secondary" onClick={() => navigate("/")}>
-        Go to home
-    </ErrorButton>
-</ErrorCard>
-```
-
----
-
-## Success states
-
-### Inline success
-
-```tsx
-<Alert
-    type="success"
-    actionLink={{ children: "View details", onClick: handleViewDetails }}
->
-    {successMessage}
-</Alert>
-```
-
-### Toast notification
-
-```tsx
-Toast.success("Changes saved successfully"); // auto-dismisses
-Toast.error("Failed to save changes");
-```
-
-Use `Toast` for non-critical feedback. Use `Alert` for errors requiring action.
-
-### Full-page success (major operations)
-
-```tsx
-import styled from "styled-components";
-import { Card } from "@lifesg/react-design-system/card";
-import { Typography } from "@lifesg/react-design-system/typography";
-import { Button } from "@lifesg/react-design-system/button";
-import { Spacing } from "@lifesg/react-design-system/theme";
-
-const SuccessCard = styled(Card)`
-    text-align: center;
-    padding: ${Spacing["spacing-64"]} ${Spacing["spacing-32"]};
-`;
-
-const SuccessActions = styled.div`
-    display: flex;
-    gap: ${Spacing["spacing-16"]};
-    justify-content: center;
-    margin-top: ${Spacing["spacing-32"]};
-`;
-
-<SuccessCard>
-    <Typography.HeadingMD>
-        Application submitted successfully
-    </Typography.HeadingMD>
-    <Typography.BodyBL>Your application is being processed</Typography.BodyBL>
-    <SuccessActions>
-        <Button.Default onClick={() => navigate("/applications")}>
-            View applications
-        </Button.Default>
-        <Button.Default styleType="secondary" onClick={() => navigate("/")}>
-            Go to home
-        </Button.Default>
-    </SuccessActions>
-</SuccessCard>;
-```
-
----
-
-## State management pattern
-
-```tsx
-const [state, setState] = useState({
-    data: null,
-    isLoading: true,
-    error: null,
-});
-
-// In component:
-if (state.isLoading) return <LoadingState />;
-if (state.error) return <ErrorState message={state.error} />;
-if (!state.data || state.data.length === 0) return <EmptyState />;
-return <DataDisplay data={state.data} />;
-```
-
----
-
-## Rules
-
--   Show loading feedback for any operation taking longer than 200ms
--   Prefer skeleton loading over a spinner for content-heavy initial page loads
--   Always provide a way out of an error state (retry, go home)
--   Empty state messages: 1–2 sentences max, action-oriented, sentence case
--   Error messages: name the specific problem — never "An error occurred"
--   `Toast` auto-dismisses — use for confirmations; use `Alert` for errors needing action
--   Full-page state containers: `padding: spacing-64 spacing-32`, `textAlign: center`, inside a `styled(Card)`
--   Disable interactive elements during loading to prevent race conditions
-
-## Anti-patterns
-
--   Do not show a spinner for operations under 200ms — causes flicker
--   Do not show an empty container with no state message in a listing page
--   Do not use `Toast` for critical errors — user may miss it
--   Do not use generic error text — always tell the user what failed
--   Do not leave submit buttons enabled during async — always set `disabled` + `loading`
--   Do not use `style={{}}` for spacing or color — use `styled()` with `Spacing` and `Colour` tokens
diff --git a/skills/fds-build/resources/v3/setup/setup.md b/skills/fds-build/resources/v3/setup/setup.md
deleted file mode 100644
index 5a61310d3b..0000000000
--- a/skills/fds-build/resources/v3/setup/setup.md
+++ /dev/null
@@ -1,369 +0,0 @@
-# App Setup — Flagship v3
-
-Full project setup for `@lifesg/react-design-system` v3. Work through all four steps before writing any component code.
-
----
-
-## Step 1 — Install packages
-
-```bash
-pnpm add @lifesg/react-design-system @lifesg/react-icons styled-components @floating-ui/react @mui/icons-material @emotion/is-prop-valid
-```
-
----
-
-## Step 2 — CSS (src/index.css)
-
-`main.css` must come first. Font stylesheet must match the selected theme.
-
-```css
-@import url("https://assets.life.gov.sg/react-design-system/v3/css/main.css");
-@import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
-```
-
-Font-to-theme mapping:
-
-| Font stylesheet             | Themes                              |
-| --------------------------- | ----------------------------------- |
-| `open-sans.css`             | LifeSG, CCube, MyLegacy, OneService |
-| `plus-jakarta-sans.css`     | BookingSG                           |
-| `lato.css`                  | PA                                  |
-| `libre-franklin.css`        | SupportGoWhere, SGW Digital Lobby   |
-| `poppins.css` + `inter.css` | SMGS (**both files required**)      |
-
----
-
-## Step 3 — App.tsx
-
-> Use the two-argument `shouldForwardProp`. The single-argument form blocks non-HTML props (e.g. `styleType="no-border"`) from reaching inner React components through styled-component wrappers, causing visual rendering bugs.
-
-> Sticky footer: set `#root { min-height: 100vh; display: flex; flex-direction: column; }` in `index.css` and `<main style={{ flex: 1 }}>` in App.tsx. Do not use CSS Grid on `#root` — it overrides `Layout.Container`'s max-width.
-
-```tsx
-import { ThemeProvider, StyleSheetManager } from "styled-components";
-import styled from "styled-components";
-import isPropValid from "@emotion/is-prop-valid";
-import {
-    LifeSGTheme,
-    Spacing,
-    MediaQuery,
-} from "@lifesg/react-design-system/theme";
-import { Navbar } from "@lifesg/react-design-system/navbar";
-import { Footer } from "@lifesg/react-design-system/footer";
-import { Layout } from "@lifesg/react-design-system/layout";
-
-const PageWrapper = styled.div`
-    padding: ${Spacing["spacing-32"]} 0;
-
-    ${MediaQuery.MinWidth.lg} {
-        padding: ${Spacing["spacing-64"]} 0;
-    }
-`;
-
-export default function App() {
-    return (
-        <StyleSheetManager
-            shouldForwardProp={(prop, target) =>
-                typeof target === "string" ? isPropValid(prop) : true
-            }
-        >
-            <ThemeProvider theme={LifeSGTheme}>
-                <Navbar
-                    masthead
-                    items={{
-                        desktop: [{ id: "home", children: "Home", href: "/" }],
-                    }}
-                />
-                <main style={{ flex: 1 }}>
-                    <PageWrapper>
-                        <Layout.Container type="grid">
-                            {/* page content — ColDivs here */}
-                        </Layout.Container>
-                    </PageWrapper>
-                </main>
-                <Footer />
-            </ThemeProvider>
-        </StyleSheetManager>
-    );
-}
-```
-
-**All available theme objects:**
-
-```tsx
-import {
-    LifeSGTheme,
-    BookingSGTheme,
-    CCubeTheme,
-    MyLegacyTheme,
-    OneServiceTheme,
-    PATheme,
-    A11yPlaygroundTheme,
-    SupportGoWhereTheme,
-    SGWDigitalLobbyTheme,
-    IMDATheme,
-    SPFTheme,
-    SMGSTheme,
-} from "@lifesg/react-design-system/theme";
-```
-
-**Dark/light mode:** swap `ThemeProvider` for `DSThemeProvider` (auto-detects OS preference). Pass `LifeSGTheme.light` or `LifeSGTheme.dark` to force a fixed mode.
-
-```tsx
-import { DSThemeProvider } from "@lifesg/react-design-system/theme";
-
-// inside the same StyleSheetManager wrapper:
-<DSThemeProvider theme={LifeSGTheme}>{/* app */}</DSThemeProvider>;
-```
-
----
-
-## Step 4 — Vite config
-
-```ts
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({ plugins: [react()] });
-```
-
----
-
-## Checklist
-
--   [ ] `main.css` imported first; font stylesheet matches theme (SMGS = two files)
--   [ ] `StyleSheetManager` uses two-argument `shouldForwardProp`
--   [ ] `ThemeProvider` (or `DSThemeProvider`) wraps the app with the correct theme object
--   [ ] `#root` has `min-height: 100vh; display: flex; flex-direction: column`
-
----
-
-## TypeScript setup
-
-Create `src/styled.d.ts` once per project so `Colour[...]` and `Spacing[...]` interpolations resolve without TypeScript errors:
-
-```ts
-// src/styled.d.ts
-import "styled-components";
-import { ThemeSpec } from "@lifesg/react-design-system/theme/types";
-
-declare module "styled-components" {
-    export interface DefaultTheme extends ThemeSpec {
-        maxColumns?: {
-            xxs: 8;
-            xs: 8;
-            sm: 8;
-            md: 8;
-            lg: 12;
-            xl: 12;
-            xxl: 12;
-        };
-    }
-}
-```
-
----
-
-## ThemeSpec structure
-
-A `ThemeSpec` object is composed of several scheme keys:
-
-```ts
-{
-  colourScheme: "lifesg",
-  fontScheme: "default",
-  motionScheme: "default",
-  borderScheme: "default",
-  spacingScheme: "default",
-  radiusScheme: "default",
-  breakpointScheme: "default",
-  resourceScheme: "lifesg"
-}
-```
-
----
-
-## DSThemeProvider
-
-**Import:** `import { DSThemeProvider } from "@lifesg/react-design-system/theme"`
-
-Use `DSThemeProvider` for all new projects and any project that requires dark mode token switching. Never use both `ThemeProvider` and `DSThemeProvider` simultaneously. Never import `Theme` from `@lifesg/react-design-system/theme` (that export does not exist).
-
-**Key props:**
-
-| Prop       | Type        | Required | Notes                                                                                  |
-| ---------- | ----------- | -------- | -------------------------------------------------------------------------------------- |
-| `theme`    | `ThemeSpec` | yes      | A preset theme object. Pass `LifeSGTheme.light` or `LifeSGTheme.dark` to force a mode. |
-| `children` | `ReactNode` | yes      | The entire React component tree.                                                       |
-
-**Canonical usage:**
-
-```tsx
-// Auto mode (follows system prefers-color-scheme)
-<DSThemeProvider theme={LifeSGTheme}><App /></DSThemeProvider>
-
-// Force light mode regardless of system preference
-<DSThemeProvider theme={LifeSGTheme.light}><App /></DSThemeProvider>
-
-// Force dark mode regardless of system preference
-<DSThemeProvider theme={LifeSGTheme.dark}><App /></DSThemeProvider>
-```
-
-**Known limitations:**
-
--   Prefer `Colour[]` interpolation functions over accessing `props.theme` directly — `DSThemeProvider` does not guarantee a fully resolved `ThemeObject` on `props.theme`
--   The per-element `modifiedProps` override pattern is valid only with `ThemeProvider` directly, not with `DSThemeProvider`
--   There is no export named `Theme` — using it throws a runtime error
-
----
-
-## Advanced Theme Customisation
-
-### Custom theme from scratch
-
-```tsx
-import { ThemeSpec } from "@lifesg/react-design-system/theme";
-import { ThemeProvider } from "styled-components";
-
-const myTheme: ThemeSpec = {
-    colourScheme: "bookingsg",
-    fontScheme: "default",
-    motionScheme: "default",
-    borderScheme: "default",
-    spacingScheme: "default",
-    radiusScheme: "default",
-    breakpointScheme: "default",
-    resourceScheme: "mylegacy",
-};
-
-<ThemeProvider theme={myTheme}>
-    <App />
-</ThemeProvider>;
-```
-
-### Extending a preset
-
-```tsx
-const customTheme: ThemeSpec = {
-    ...LifeSGTheme,
-    overrides: {
-        primitiveColour: { "primary-10": "#F3C85C" },
-        font: {
-            "heading-size-xxl": "4rem",
-            "heading-lh-xxl": "4.5rem",
-        },
-    },
-};
-```
-
-### Per-element theme override (ThemeProvider only — not supported with DSThemeProvider)
-
-```tsx
-import { Colour } from "@lifesg/react-design-system/theme";
-import styled, { css } from "styled-components";
-
-const SomeComponent = styled.div`
-    ${(props) => {
-        const modifiedProps = {
-            ...props,
-            theme: { ...props.theme, colourScheme: "bookingsg" },
-        };
-        return css`
-            background: ${Colour["background-error"](modifiedProps)};
-        `;
-    }}
-`;
-```
-
----
-
-## Dark Mode
-
-| Theme passed        | Behaviour                                    |
-| ------------------- | -------------------------------------------- |
-| `LifeSGTheme`       | Auto — follows system `prefers-color-scheme` |
-| `LifeSGTheme.light` | Always light, ignores system preference      |
-| `LifeSGTheme.dark`  | Always dark, ignores system preference       |
-
-The same `.light` / `.dark` sub-properties exist on every theme preset (e.g. `SupportGoWhereTheme.light`).
-
-> For citizen-facing government applications where design requires light mode, pass `LifeSGTheme.light` rather than the bare `LifeSGTheme` — this prevents the UI from shifting to dark when users have a dark system preference.
-
-**Manual user toggle:**
-
-```tsx
-const [preference, setPreference] = useState<"light" | "dark" | "auto">("auto");
-
-const currentTheme =
-    preference === "dark"
-        ? LifeSGTheme.dark
-        : preference === "light"
-        ? LifeSGTheme.light
-        : LifeSGTheme;
-
-<DSThemeProvider theme={currentTheme}>
-    <App />
-</DSThemeProvider>;
-```
-
-**`useDSTheme` hook (read the active colour mode):**
-
-```tsx
-import { useDSTheme } from "@lifesg/react-design-system/theme";
-
-const { colourMode, theme } = useDSTheme();
-```
-
-**Extending dark mode overrides:**
-
-```tsx
-const customTheme: ThemeSpec = {
-    ...LifeSGTheme,
-    overrides: {
-        primitiveColour: { "primary-50": "#0066cc" },
-        primitiveColourDark: { "primary-50": "#4d94ff" },
-        semanticColour: { text: "#2c2c2c" },
-        semanticColourDark: { text: "#f0f0f0" },
-    },
-};
-```
-
-Without `semanticColourDark` / `primitiveColourDark`, the light-mode override values are used in both modes.
-
----
-
-## Migration — ThemeProvider to DSThemeProvider
-
-### Step 1 — Replace the root provider
-
-```tsx
-// Before
-import { ThemeProvider } from "styled-components";
-<ThemeProvider theme={LifeSGTheme}>
-    <App />
-</ThemeProvider>;
-
-// After
-import { DSThemeProvider } from "@lifesg/react-design-system/theme";
-<DSThemeProvider theme={LifeSGTheme}>
-    <App />
-</DSThemeProvider>;
-```
-
-### Step 2 — Add dark mode overrides (if using custom colours)
-
-```tsx
-const customTheme = {
-    ...LifeSGTheme,
-    overrides: {
-        primitiveColour: { "primary-50": "#0066cc" },
-        primitiveColourDark: { "primary-50": "#4d94ff" },
-        semanticColour: { text: "#custom-light" },
-        semanticColourDark: { text: "#custom-dark" },
-    },
-};
-```
-
-### Step 3 — Test both modes
-
-Toggle system preference or use browser DevTools to simulate `prefers-color-scheme: dark`. Existing styled-components using `Colour` and `Spacing` interpolation functions will adapt automatically.
diff --git a/skills/fds-build/resources/v3/templates/form.md b/skills/fds-build/resources/v3/templates/form.md
deleted file mode 100644
index ddea4e09b3..0000000000
--- a/skills/fds-build/resources/v3/templates/form.md
+++ /dev/null
@@ -1,558 +0,0 @@
-# Form Template
-
-Single or multi-step form page built with `@lifesg/react-design-system` v3.
-
-## When to use
-
--   Collecting user input across one or more steps
--   Profile, settings, or data-entry pages
-
----
-
-## Page shell
-
-Narrow-content shell — `Navbar` + `PageWrapper` (styled div) inside `<main>` + `Footer`. Two sibling `ColDiv`s inside the grid: one full-width row for `ProgressIndicator` (multi-step only), one narrow row for the form body.
-
-```tsx
-import { Navbar } from "@lifesg/react-design-system/navbar";
-import { Footer } from "@lifesg/react-design-system/footer";
-import { Layout } from "@lifesg/react-design-system/layout";
-import styled from "styled-components";
-import { Spacing, MediaQuery } from "@lifesg/react-design-system/theme";
-
-const PageWrapper = styled.div`
-  padding: ${Spacing["spacing-32"]} 0;
-  ${MediaQuery.MinWidth.lg} {
-    padding: ${Spacing["spacing-64"]} 0;
-  }
-`;
-
-// Usage:
-<Navbar resources={{ primary: { brandName: "MyService", logoSrc: "/logo.svg" } }} items={{ desktop: [] }} />
-<main>
-  <PageWrapper>
-    <Layout.Container type="grid">
-      {/* ProgressColDiv — multi-step only; omit for single-step */}
-      <Layout.ColDiv xsCols={12} lgCols={12}> ... </Layout.ColDiv>
-      {/* FormColDiv — always present */}
-      <Layout.ColDiv xsCols={12} lgCols={9} xlCols={8}> ... </Layout.ColDiv>
-    </Layout.Container>
-  </PageWrapper>
-</main>
-<Footer />
-```
-
-## Page anatomy
-
-```
-┌──────────────────────────────────────────────────────────┐
-│ Navbar                                                   │
-├──────────────────────────────────────────────────────────┤
-│  PageWrapper (padding: spacing-32 0; lg: spacing-64)     │
-│  └─ Layout.Container type="grid"                         │
-│     ├─ ProgressColDiv xsCols={12} lgCols={12}            │
-│     │  └─ ProgressIndicator  (multi-step only)           │
-│     └─ FormColDiv xsCols={12} lgCols={9} xlCols={8}      │
-│        │  flex column · gap: spacing-32                   │
-│        ├─ PageHeadingBlock (flex column · gap: 16)        │
-│        │  ├─ PageTitle (h1)                               │
-│        │  └─ PageDescription (p, optional)               │
-│        ├─ FormContent                                     │
-│        │  └─ Form fields (built-in margin-bottom: 32)    │
-│        │     Non-form components → margin-bottom: 32     │
-│        └─ FormNav                                        │
-├──────────────────────────────────────────────────────────┤
-│ Footer                                                   │
-└──────────────────────────────────────────────────────────┘
-```
-
----
-
-## Step state machine
-
-```tsx
-const STEPS = ["Step one", "Step two", "Review"];
-const [step, setStep] = useState(0);
-const isLastStep = step === STEPS.length - 1;
-```
-
--   `currentIndex` on `ProgressIndicator` is **zero-based**
--   `ProgressIndicator` sits in its own `Layout.ColDiv xsCols={12} lgCols={12}` — never inside the 8/9-col form column
--   Page heading defaults to `{STEPS[step]}`; override per step only when the heading needs to differ from the label
--   The review step is **required** as the last entry in `STEPS`
-
-Single-step forms: omit `ProgressColDiv`/`ProgressIndicator` entirely and pass no `onBack` to `FormNav`.
-
----
-
-## Per-step validation
-
-Validate the current step before advancing — never let `onNext` proceed with invalid fields.
-
-```tsx
-function validateStep(step: number): Record<string, string> {
-    const errors: Record<string, string> = {};
-    if (step === 0) {
-        if (!name.trim()) errors.name = "Enter your full name";
-        if (!email.trim()) errors.email = "Enter your email address";
-        else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
-            errors.email = "Enter a valid email address";
-    }
-    if (step === 1) {
-        // step 2 checks
-    }
-    return errors;
-}
-
-const [errors, setErrors] = useState<Record<string, string>>({});
-
-function handleNext() {
-    const stepErrors = validateStep(step);
-    setErrors(stepErrors);
-    if (Object.keys(stepErrors).length > 0) return;
-    if (!isLastStep) setStep((s) => s + 1);
-    else handleSubmit();
-}
-```
-
--   Validate on `Next`, not on every keystroke — re-validate live only once a field already shows an `errorMessage`
--   Pass `errorMessage={errors.fieldName}` directly to the `Form.*` component — never render a separate error block
--   `Back` never triggers validation — always allowed
--   Clear a field's error as soon as its value changes, even before the next `Next` press
--   On the review step, skip validation — the user already passed prior steps
-
----
-
-## Rules
-
-|                          | Wrong                                 | Correct                                                                                                                                                                 |
-| ------------------------ | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Column width             | `lgCols={12}`                         | `lgCols={9} xlCols={8}`                                                                                                                                                 |
-| Progress indicator       | Inside 8-col div                      | Separate `lgCols={12}` ColDiv; `currentIndex` is zero-based                                                                                                             |
-| Page heading             | Static string                         | Defaults to `{STEPS[step]}`; override per step as needed                                                                                                                |
-| Field spacing            | `gap` on wrapper div                  | Rely on component built-in `margin-bottom: 32`; add `margin-bottom: spacing-32` via `styled()` for components without it (BoxContainer, Toggle, FileUpload, ESignature) |
-| Constrained-width inputs | `width` on `styled(Form.X)`           | `max-width` — works alongside internal `width: 100%`                                                                                                                    |
-| Review step              | Omitting                              | Required as last step — one `BoxContainer` per preceding step                                                                                                           |
-| Optional fields          | Marking required fields with asterisk | All fields are required by default; add `"(optional)"` to the label of fields not validated in `validateStep`                                                           |
-
----
-
-## FormNav
-
-Back left · Next right · Extra actions to the left of Next.
-
-**Buttons:** Next → `"default"` · Back → `"secondary"` · Other → `"light"`.
-
-Responsive sizing — copy exactly from the `FormNav.tsx` block below:
-
--   Mobile: `width: 100%`, stacked column
--   Desktop (`lg`): `width: auto; min-width: 10rem`, row layout, all buttons equalised to widest via `useLayoutEffect`
-
-**Do not simplify — omitting the `MediaQuery` override causes full-width buttons on desktop.**
-
-```tsx
-// FormNav.tsx
-import { useRef, useLayoutEffect } from "react";
-import styled from "styled-components";
-import { Spacing, MediaQuery } from "@lifesg/react-design-system/theme";
-import { Button } from "@lifesg/react-design-system/button";
-
-interface FormNavProps {
-    onBack?: () => void;
-    onNext: () => void;
-    nextLabel?: string;
-    isSubmitting?: boolean;
-    actions?: React.ReactNode;
-}
-
-const Nav = styled.div`
-    margin-top: ${Spacing["spacing-32"]};
-    display: flex;
-    flex-direction: column;
-    gap: ${Spacing["spacing-24"]};
-    ${MediaQuery.MinWidth.lg} {
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        gap: 0;
-    }
-`;
-
-const PrimaryGroup = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: ${Spacing["spacing-16"]};
-    ${MediaQuery.MinWidth.lg} {
-        flex-direction: row;
-        gap: ${Spacing["spacing-16"]};
-        order: 2;
-        margin-left: auto;
-    }
-`;
-
-const NextButton = styled(Button.Default)`
-    box-sizing: border-box;
-    width: 100%;
-    ${MediaQuery.MinWidth.lg} {
-        width: auto;
-        min-width: 10rem;
-        order: 1;
-    }
-`;
-
-const ActionsGroup = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: ${Spacing["spacing-16"]};
-    & > button {
-        box-sizing: border-box;
-        width: 100%;
-    }
-    ${MediaQuery.MinWidth.lg} {
-        flex-direction: row;
-        gap: ${Spacing["spacing-16"]};
-        & > button {
-            width: auto;
-            min-width: 10rem;
-        }
-    }
-`;
-
-const BackButton = styled(Button.Default)`
-    box-sizing: border-box;
-    width: 100%;
-    ${MediaQuery.MinWidth.lg} {
-        width: auto;
-        min-width: 10rem;
-        order: 1;
-    }
-`;
-
-export default function FormNav({
-    onBack,
-    onNext,
-    nextLabel = "Next",
-    isSubmitting = false,
-    actions,
-}: FormNavProps) {
-    const navRef = useRef<HTMLDivElement>(null);
-
-    useLayoutEffect(() => {
-        if (!navRef.current) return;
-        const buttons = Array.from(
-            navRef.current.querySelectorAll<HTMLElement>("button")
-        );
-        buttons.forEach((b) => {
-            b.style.width = "";
-        });
-        if (!window.matchMedia("(min-width: 1024px)").matches) return;
-        const widest = Math.max(...buttons.map((b) => b.offsetWidth));
-        buttons.forEach((b) => {
-            b.style.width = `${widest}px`;
-        });
-    });
-
-    return (
-        <Nav ref={navRef}>
-            <PrimaryGroup>
-                <NextButton
-                    styleType="default"
-                    onClick={onNext}
-                    loading={isSubmitting}
-                    disabled={isSubmitting}
-                >
-                    {nextLabel}
-                </NextButton>
-                {actions && <ActionsGroup>{actions}</ActionsGroup>}
-            </PrimaryGroup>
-            {onBack && (
-                <BackButton
-                    styleType="secondary"
-                    onClick={onBack}
-                    disabled={isSubmitting}
-                >
-                    Back
-                </BackButton>
-            )}
-        </Nav>
-    );
-}
-```
-
-Usage:
-
-```tsx
-<FormNav
-    onBack={step > 0 ? () => setStep((s) => s - 1) : undefined}
-    onNext={handleNext}
-    nextLabel={isLastStep ? "Submit" : "Next"}
-    actions={
-        <Button.Default styleType="light" onClick={saveDraft}>
-            Save draft
-        </Button.Default>
-    }
-/>
-```
-
----
-
-## Review step
-
-Last step of every multi-step form. One `BoxContainer` per preceding step.
-
-```tsx
-import { BoxContainer } from "@lifesg/react-design-system/box-container";
-import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
-
-const StyledBoxContainer = styled(BoxContainer)`
-    margin-bottom: ${Spacing["spacing-32"]};
-`;
-
-const SummaryPadding = styled.div`
-    padding: ${Spacing["spacing-20"]};
-    ${MediaQuery.MinWidth.md} {
-        padding: ${Spacing["spacing-32"]};
-    }
-`;
-
-{
-    step === STEPS.length - 1 && (
-        <StyledBoxContainer title="Step one" collapsible expanded>
-            <SummaryPadding>
-                <UneditableSection
-                    fullWidth
-                    background={false}
-                    items={[
-                        {
-                            label: "Short field",
-                            value: valueA || "—",
-                            displayWidth: "half",
-                        },
-                        {
-                            label: "Short field",
-                            value: valueB || "—",
-                            displayWidth: "half",
-                        },
-                        { label: "Long field", value: longValue || "—" },
-                    ]}
-                />
-            </SummaryPadding>
-        </StyledBoxContainer>
-    );
-}
-```
-
--   `background={false}` — removes default background when inside `BoxContainer`
--   `fullWidth` — fills container without `Layout.Content` spacing
--   `displayWidth: "half"` — two short fields per row; omit for long values
--   Show `"—"` for unanswered fields
--   Review-step fields are `readOnly`, never `disabled` — `disabled` reads as broken to screen readers
-
----
-
-## Sticky action bar
-
-For forms longer than one viewport height, fix the action buttons at the bottom instead of the inline `FormNav`.
-
-```tsx
-const StickyBar = styled.div`
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: ${Colour["bg-stronger"]};
-    padding: ${Spacing["spacing-16"]} ${Spacing["spacing-24"]};
-    display: flex;
-    justify-content: flex-end;
-    gap: ${Spacing["spacing-16"]};
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
-`;
-```
-
-Do not show both `FormNav` and a sticky bar — use one or the other.
-
----
-
-## Anti-patterns
-
--   Do not validate all steps upfront — only the current step, on `Next`
--   Do not use `disabled` for read-only review fields — use `readOnly`
--   Do not skip the review step on a multi-step form
--   Do not put `ProgressIndicator` inside the 8/9-col form column
--   Do not hardcode step count logic — derive `isLastStep` from `STEPS.length`
--   Do not let `Back` trigger validation — it must always be allowed
-
----
-
-## Complete template
-
-This renders the inner grid content only (ColDivs and form body). Wrap with the page shell defined in `## Page shell` above — `<Navbar />`, `<main><PageWrapper><Layout.Container type="grid">`, this content, `</Layout.Container></PageWrapper></main>`, `<Footer />`.
-
-```tsx
-import { useState } from "react";
-import styled from "styled-components";
-import { Spacing, MediaQuery } from "@lifesg/react-design-system/theme";
-import { Form } from "@lifesg/react-design-system/form";
-import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
-import { Layout } from "@lifesg/react-design-system/layout";
-import { Alert } from "@lifesg/react-design-system/alert";
-import FormNav from "./FormNav";
-
-const ProgressColDiv = styled(Layout.ColDiv)`
-    margin-bottom: ${Spacing["spacing-32"]};
-`;
-
-const FormColDiv = styled(Layout.ColDiv)`
-    display: flex;
-    flex-direction: column;
-    gap: ${Spacing["spacing-32"]};
-`;
-
-const PageHeadingBlock = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: ${Spacing["spacing-16"]};
-`;
-
-const PageTitle = styled.h1`
-    margin: 0;
-`;
-
-const PageDescription = styled.p`
-    margin: 0;
-`;
-
-const FormContent = styled.div``;
-
-const STEPS = ["Step one", "Step two", "Review"];
-
-const CATEGORY_OPTIONS = [
-    { label: "Option A", value: "a" },
-    { label: "Option B", value: "b" },
-];
-
-export default function FormPage() {
-    const [step, setStep] = useState(0);
-    const isLastStep = step === STEPS.length - 1;
-
-    // Step 1 fields
-    const [name, setName] = useState("");
-    const [category, setCategory] = useState("");
-
-    const [errors, setErrors] = useState<Record<string, string>>({});
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [submitError, setSubmitError] = useState<string | null>(null);
-
-    function validateStep(s: number): Record<string, string> {
-        const e: Record<string, string> = {};
-        if (s === 0) {
-            if (!name.trim()) e.name = "Enter your full name";
-            if (!category) e.category = "Select a category";
-        }
-        return e;
-    }
-
-    function handleNext() {
-        const stepErrors = validateStep(step);
-        setErrors(stepErrors);
-        if (Object.keys(stepErrors).length > 0) return;
-        if (!isLastStep) setStep((s) => s + 1);
-        else handleSubmit();
-    }
-
-    async function handleSubmit() {
-        setIsSubmitting(true);
-        setSubmitError(null);
-        try {
-            // FIXME: replace with actual API client and submission endpoint, e.g.:
-            // await apiClient.post("/api/v1/submissions", { name, category });
-            console.log("submitted", { name, category });
-        } catch (err: unknown) {
-            setSubmitError(
-                err instanceof Error
-                    ? err.message
-                    : "Submission failed. Please try again."
-            );
-        } finally {
-            setIsSubmitting(false);
-        }
-    }
-
-    // Render inside: <Layout.Container type="grid"> ... </Layout.Container>
-    return (
-        <>
-            <ProgressColDiv xsCols={12} lgCols={12}>
-                <ProgressIndicator
-                    steps={STEPS}
-                    currentIndex={step}
-                    displayExtractor={(s) => s}
-                />
-            </ProgressColDiv>
-
-            <FormColDiv xsCols={12} lgCols={9} xlCols={8}>
-                <PageHeadingBlock>
-                    <PageTitle>{STEPS[step]}</PageTitle>
-                    {/* <PageDescription>Optional description</PageDescription> */}
-                </PageHeadingBlock>
-
-                {submitError && <Alert type="error">{submitError}</Alert>}
-
-                <FormContent>
-                    {step === 0 && (
-                        <>
-                            <Form.Input
-                                label="Full name"
-                                value={name}
-                                onChange={(e) => {
-                                    setName(e.target.value);
-                                    if (errors.name)
-                                        setErrors((prev) => ({
-                                            ...prev,
-                                            name: "",
-                                        }));
-                                }}
-                                errorMessage={errors.name}
-                            />
-                            <Form.Select
-                                label="Category"
-                                options={CATEGORY_OPTIONS}
-                                selectedOption={CATEGORY_OPTIONS.find(
-                                    (o) => o.value === category
-                                )}
-                                listExtractor={(o) => o.label}
-                                displayValueExtractor={(o) => o.label}
-                                valueExtractor={(o) => o.value}
-                                onSelectOption={(opt) => {
-                                    setCategory(opt.value);
-                                    if (errors.category)
-                                        setErrors((prev) => ({
-                                            ...prev,
-                                            category: "",
-                                        }));
-                                }}
-                                errorMessage={errors.category}
-                            />
-                        </>
-                    )}
-                    {step === 1 && <>{/* step 2 fields */}</>}
-                </FormContent>
-
-                <FormNav
-                    onBack={step > 0 ? () => setStep((s) => s - 1) : undefined}
-                    onNext={handleNext}
-                    nextLabel={isLastStep ? "Submit" : "Next"}
-                    isSubmitting={isSubmitting}
-                />
-            </FormColDiv>
-        </>
-    );
-}
-```
-
----
-
-## Notes
-
--   Single-step: omit `ProgressIndicator` and pass no `onBack` to `FormNav`
--   Pass `actions` to `FormNav` for secondary actions like Save draft
--   `Form.MaskedInput` and other complex inputs require two-argument `shouldForwardProp` in `App.tsx` — see `setup-v3.md`
diff --git a/skills/fds-build/resources/v3/templates/listing.md b/skills/fds-build/resources/v3/templates/listing.md
deleted file mode 100644
index 7154459d89..0000000000
--- a/skills/fds-build/resources/v3/templates/listing.md
+++ /dev/null
@@ -1,579 +0,0 @@
-# Listing Template
-
-Pages whose primary goal is finding, scanning, or filtering a collection of records.
-
-## When to use
-
--   Search results, service directories, record indexes
--   Transaction histories, application lists
--   Any screen presenting multiple instances of the same entity type
-
-Do not use for:
-
--   A single record's detail → use `detail.md`
--   A mixed overview with stats and no primary table → use `dashboard.md`
-
----
-
-## Page shell
-
-`Navbar` → `<main><PageWrapper><Layout.Container type="grid">` → `<Footer />`. Content lives in a single full-width `ColDiv xsCols={8} lgCols={12}`. For the two-column filter variant, a `TwoColumn` flex div (gap: `spacing-32`) wraps `FilterSidebar` (width: 278px, flex-shrink: 0) and `ResultsArea` (flex: 1) inside that ColDiv.
-
-```
-Navbar
-main
-  PageWrapper (padding: spacing-32 0; lg: spacing-48)
-  └── Layout.Container type="grid"
-        └── Layout.ColDiv xsCols={8} lgCols={12}
-              SearchRow (optional)
-              TwoColumn
-                ├── FilterSidebar (278px) — omit for search-only variant
-                │     Filter
-                └── ResultsArea (flex-1)
-                      ResultCountRow
-                      ErrorDisplay type="no-item-found"  ← empty state
-                      Card list / DataTable
-                      Pagination (centred)
-Footer
-```
-
-On mobile the filter sidebar should be hidden behind a modal — `Filter` handles this automatically when `toggleFilterAtBreakpoint` is set.
-
-Use the **Complete template** below as the starting point — it wires all of these together in a single runnable file.
-
----
-
-## Required components
-
-| Slot           | Component                                       | Required |
-| -------------- | ----------------------------------------------- | -------- |
-| Navigation     | `Navbar` (masthead enabled)                     | Yes      |
-| Results        | `Card` list/grid **or** `DataTable`             | Yes      |
-| Result count   | `Typography.BodyMD` — "X result(s) found"       | Yes      |
-| Footer         | `Footer`                                        | Yes      |
-| Hero banner    | Custom styled section                           | No       |
-| Search bar     | `Form.Input` + `Form.Select` + `Button.Default` | No\*     |
-| Breadcrumb     | `Breadcrumb`                                    | No       |
-| Alert          | `Alert type="info"`                             | No       |
-| View toggle    | `Tab`                                           | No       |
-| Filter sidebar | `Filter` (~278px wide)                          | No\*     |
-| Pagination     | `Pagination showFirstAndLastNav`                | No       |
-
-\* Search bar and filter sidebar are individually optional but **at least one must be present**.
-
----
-
-## State shape
-
-```tsx
-interface ListingState {
-    keyword: string;
-    filters: Record<string, string[]>; // category -> selected option values
-    sortBy: string;
-    page: number;
-}
-
-const [state, setState] = useState<ListingState>({
-    keyword: "",
-    filters: {},
-    sortBy: "relevance",
-    page: 1,
-});
-
-// FIXME: replace MOCK_ITEMS with real fetch, e.g.:
-// apiClient.get<Item[]>("/api/v1/items").then(({ data }) => setAllRows(data));
-const [allRows, setAllRows] = useState<Item[]>(MOCK_ITEMS);
-
-useEffect(() => {
-    // FIXME: replace with actual API client and URL to fetch data
-    // Example: apiClient.get<Item[]>("/api/v1/items").then(({ data }) => setAllRows(data));
-    setAllRows(MOCK_ITEMS);
-}, []);
-```
-
--   Changing `keyword`, `filters`, or `sortBy` **must reset `page` to `1`** — never keep the user on a page that may no longer exist after a filter change.
--   Derive filtered/sorted/paginated results with a single `useMemo` — don't split filtering and sorting into separate effects that can race.
--   Fetch-based listings: debounce `keyword` changes (~300ms) before refetching; filter/sort changes refetch immediately.
-
-```tsx
-const results = useMemo(() => {
-    let rows = allRows.filter(
-        (r) =>
-            matchesKeyword(r, state.keyword) && matchesFilters(r, state.filters)
-    );
-    rows = sortRows(rows, state.sortBy);
-    return rows;
-}, [allRows, state.keyword, state.filters, state.sortBy]);
-
-const pageCount = Math.ceil(results.length / PAGE_SIZE);
-const pageRows = results.slice(
-    (state.page - 1) * PAGE_SIZE,
-    state.page * PAGE_SIZE
-);
-```
-
----
-
-## Layout options
-
-### Hero with search + side filters (most feature-complete)
-
-```
-Navbar
-HeroBanner
-  └── Title + subtitle + Tab (search criteria tabs)
-      SearchBar (Form.Input / Form.Select + Button.Default)
-Layout.Section > Layout.Container
-  ├── BreadcrumbRow (Breadcrumb left · optional CTA right)
-  ├── Alert (optional)
-  └── TwoColumn
-        ├── FilterSidebar (~278px)
-        │     Form.Input (keyword)
-        │     Sort by (RadioButton group)
-        │     Filter.Checkbox sections
-        └── ResultsArea (flex-1)
-              ResultCountRow (count left · Tab view toggle right)
-              Card list or grid
-              Pagination
-Footer
-```
-
-### Hero with search only
-
-Remove `FilterSidebar` and `TwoColumn`. `ResultsArea` goes full width.
-
-### Hero with side filters only
-
-Remove `SearchBar` from hero. Add `Form.Input` for keyword above `Filter` in sidebar. Results shown on load.
-
-### Compact (no hero) — search + side filters
-
-Remove `HeroBanner`. Add `Typography.HeadingLG as="h1"` + description + `SearchBar` directly in `Layout.Container` above breadcrumb row.
-
-### Compact — side filters only
-
-No hero, no search bar. Title + description in container. Filters in sidebar. Results shown on load.
-
-### Compact — search only, description column
-
-No hero. Full-width `SearchBar` above two-column region. Left column = description text; right column = results full width. No filter sidebar.
-
-### No description, search + side filters
-
-No hero. Full-width `SearchBar` above breadcrumb row. Filter sidebar + results as normal.
-
----
-
-## Filter sidebar
-
-```tsx
-<Filter onClear={handleClear}>
-    <Filter.Item title="Sort by" collapsible={false}>
-        {SORT_OPTIONS.map((opt) => (
-            <RadioButton
-                key={opt.value}
-                checked={state.sortBy === opt.value}
-                onChange={() =>
-                    setState((s) => ({ ...s, page: 1, sortBy: opt.value }))
-                }
-            >
-                {opt.label}
-            </RadioButton>
-        ))}
-    </Filter.Item>
-    <Filter.Checkbox
-        title="Category"
-        options={categoryOptions}
-        selected={state.filters.category ?? []}
-        onChange={(values) =>
-            setState((s) => ({
-                ...s,
-                page: 1,
-                filters: { ...s.filters, category: values },
-            }))
-        }
-    />
-</Filter>
-```
-
-`onClear` resets `filters` to `{}` and `page` to `1`. It does not reset `keyword` unless the design explicitly requires it.
-
----
-
-## Cards vs DataTable
-
--   **Cards** — citizen-facing listing screens
--   **DataTable** — internal/admin screens with 4+ structured columns where columnar comparison is the primary goal
-
----
-
-## Rules
-
--   Always show result count even when no filters are active — format: "X result(s) found"
--   Always show `ErrorDisplay type="no-item-found"` with contextual copy when results are empty — never an empty container
--   `Pagination` or lazy load — never both on the same list
--   `showFirstAndLastNav` must be set on `Pagination`
--   Filter sidebar width is fixed at ~278px; results area is `flex: 1`
--   Inline action buttons (edit, delete) do not belong on listing cards — those go on the detail screen
-
----
-
-## Complete template
-
-A single-file listing page with search, side filters, pagination, loading/error/empty states, and API stub wired in. Remove `FilterSidebar` / `TwoColumn` for search-only variant.
-
-```tsx
-import { useState, useEffect, useMemo } from "react";
-import styled from "styled-components";
-import { Navbar } from "@lifesg/react-design-system/navbar";
-import { Footer } from "@lifesg/react-design-system/footer";
-import { Layout } from "@lifesg/react-design-system/layout";
-import { Typography } from "@lifesg/react-design-system/typography";
-import { Card } from "@lifesg/react-design-system/card";
-import { Filter } from "@lifesg/react-design-system/filter";
-import { RadioButton } from "@lifesg/react-design-system/radio-button";
-import { Pagination } from "@lifesg/react-design-system/pagination";
-import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
-import { Alert } from "@lifesg/react-design-system/alert";
-import { Button } from "@lifesg/react-design-system/button";
-import { Form } from "@lifesg/react-design-system/form";
-import { Spacing, MediaQuery } from "@lifesg/react-design-system/theme";
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-interface Item {
-    id: string;
-    title: string;
-    description: string;
-    category: string;
-}
-
-interface ListingState {
-    keyword: string;
-    filters: Record<string, string[]>;
-    sortBy: string;
-    page: number;
-}
-
-// ─── Constants ────────────────────────────────────────────────────────────────
-
-const PAGE_SIZE = 10;
-
-const SORT_OPTIONS = [
-    { label: "Relevance", value: "relevance" },
-    { label: "Newest first", value: "newest" },
-];
-
-const CATEGORY_OPTIONS = [
-    { label: "Category A", value: "a" },
-    { label: "Category B", value: "b" },
-];
-
-// FIXME: replace with real seed data or remove once API is wired up
-const MOCK_ITEMS: Item[] = [];
-
-// ─── Styled components ────────────────────────────────────────────────────────
-
-const PageWrapper = styled.div`
-    padding: ${Spacing["spacing-32"]} 0;
-    ${MediaQuery.MinWidth.lg} {
-        padding: ${Spacing["spacing-48"]} 0;
-    }
-`;
-
-const TwoColumn = styled.div`
-    display: flex;
-    gap: ${Spacing["spacing-32"]};
-    align-items: flex-start;
-`;
-
-const FilterSidebar = styled.div`
-    width: 278px;
-    flex-shrink: 0;
-`;
-
-const ResultsArea = styled.div`
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: ${Spacing["spacing-16"]};
-`;
-
-const SearchRow = styled.div`
-    display: flex;
-    gap: ${Spacing["spacing-16"]};
-    align-items: flex-end;
-    margin-bottom: ${Spacing["spacing-24"]};
-`;
-
-const ResultCountRow = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-`;
-
-const CardBody = styled.div`
-    padding: ${Spacing["spacing-24"]};
-`;
-
-const PaginationWrapper = styled.div`
-    display: flex;
-    justify-content: center;
-    margin-top: ${Spacing["spacing-24"]};
-`;
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-function matchesKeyword(item: Item, keyword: string): boolean {
-    if (!keyword.trim()) return true;
-    const q = keyword.toLowerCase();
-    return (
-        item.title.toLowerCase().includes(q) ||
-        item.description.toLowerCase().includes(q)
-    );
-}
-
-function matchesFilters(
-    item: Item,
-    filters: Record<string, string[]>
-): boolean {
-    const cats = filters.category;
-    if (!cats || cats.length === 0) return true;
-    return cats.includes(item.category);
-}
-
-function sortItems(items: Item[], sortBy: string): Item[] {
-    if (sortBy === "newest") return [...items].reverse();
-    return items;
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
-export default function ListingPage() {
-    const [allItems, setAllItems] = useState<Item[]>(MOCK_ITEMS);
-    const [isLoading, setIsLoading] = useState(true);
-    const [fetchError, setFetchError] = useState<string | null>(null);
-
-    const [state, setState] = useState<ListingState>({
-        keyword: "",
-        filters: {},
-        sortBy: "relevance",
-        page: 1,
-    });
-
-    useEffect(() => {
-        setIsLoading(true);
-        setFetchError(null);
-        // FIXME: replace with actual API client and URL to fetch data, e.g.:
-        // apiClient
-        //   .get<Item[]>("/api/v1/items")
-        //   .then(({ data }) => setAllItems(data))
-        //   .catch((err) => setFetchError(err.message))
-        //   .finally(() => setIsLoading(false));
-        setAllItems(MOCK_ITEMS);
-        setIsLoading(false);
-    }, []);
-
-    const results = useMemo(() => {
-        let rows = allItems.filter(
-            (r) =>
-                matchesKeyword(r, state.keyword) &&
-                matchesFilters(r, state.filters)
-        );
-        return sortItems(rows, state.sortBy);
-    }, [allItems, state.keyword, state.filters, state.sortBy]);
-
-    const pageCount = Math.ceil(results.length / PAGE_SIZE);
-    const pageRows = results.slice(
-        (state.page - 1) * PAGE_SIZE,
-        state.page * PAGE_SIZE
-    );
-
-    function handleClear() {
-        setState((s) => ({ ...s, filters: {}, page: 1 }));
-    }
-
-    return (
-        <>
-            <Navbar
-                resources={{
-                    primary: { brandName: "MyService", logoSrc: "/logo.svg" },
-                }}
-                items={{ desktop: [] }}
-            />
-            <main>
-                <PageWrapper>
-                    <Layout.Container type="grid">
-                        <Layout.ColDiv xsCols={8} lgCols={12}>
-                            {/* Search bar */}
-                            <SearchRow>
-                                <Form.Input
-                                    label="Search"
-                                    placeholder="Search by keyword"
-                                    value={state.keyword}
-                                    onChange={(e) =>
-                                        setState((s) => ({
-                                            ...s,
-                                            keyword: e.target.value,
-                                            page: 1,
-                                        }))
-                                    }
-                                />
-                                <Button.Default
-                                    styleType="default"
-                                    onClick={() =>
-                                        setState((s) => ({ ...s, page: 1 }))
-                                    }
-                                >
-                                    Search
-                                </Button.Default>
-                            </SearchRow>
-
-                            {/* Loading */}
-                            {isLoading && (
-                                <Typography.BodyMD>
-                                    Loading...
-                                </Typography.BodyMD>
-                            )}
-
-                            {/* Fetch error */}
-                            {!isLoading && fetchError && (
-                                <Alert
-                                    type="error"
-                                    actionLink={{
-                                        children: "Try again",
-                                        onClick: () => window.location.reload(),
-                                    }}
-                                >
-                                    {fetchError}
-                                </Alert>
-                            )}
-
-                            {/* Results */}
-                            {!isLoading && !fetchError && (
-                                <TwoColumn>
-                                    {/* Filter sidebar — omit for search-only variant */}
-                                    <FilterSidebar>
-                                        <Filter onClear={handleClear}>
-                                            <Filter.Item
-                                                title="Sort by"
-                                                collapsible={false}
-                                            >
-                                                {SORT_OPTIONS.map((opt) => (
-                                                    <RadioButton
-                                                        key={opt.value}
-                                                        checked={
-                                                            state.sortBy ===
-                                                            opt.value
-                                                        }
-                                                        onChange={() =>
-                                                            setState((s) => ({
-                                                                ...s,
-                                                                sortBy: opt.value,
-                                                                page: 1,
-                                                            }))
-                                                        }
-                                                    >
-                                                        {opt.label}
-                                                    </RadioButton>
-                                                ))}
-                                            </Filter.Item>
-                                            <Filter.Checkbox
-                                                title="Category"
-                                                options={CATEGORY_OPTIONS}
-                                                selected={
-                                                    state.filters.category ?? []
-                                                }
-                                                onChange={(values) =>
-                                                    setState((s) => ({
-                                                        ...s,
-                                                        page: 1,
-                                                        filters: {
-                                                            ...s.filters,
-                                                            category: values,
-                                                        },
-                                                    }))
-                                                }
-                                            />
-                                        </Filter>
-                                    </FilterSidebar>
-
-                                    <ResultsArea>
-                                        {/* Result count */}
-                                        <ResultCountRow>
-                                            <Typography.BodyMD>
-                                                {results.length} result
-                                                {results.length !== 1
-                                                    ? "s"
-                                                    : ""} found
-                                            </Typography.BodyMD>
-                                        </ResultCountRow>
-
-                                        {/* Empty state */}
-                                        {results.length === 0 && (
-                                            <ErrorDisplay
-                                                type="no-item-found"
-                                                title="No results found"
-                                                description="Try adjusting your search or filters."
-                                                actionButton={{
-                                                    children: "Clear filters",
-                                                    onClick: handleClear,
-                                                }}
-                                            />
-                                        )}
-
-                                        {/* Card list */}
-                                        {pageRows.map((item) => (
-                                            <Card key={item.id}>
-                                                <CardBody>
-                                                    <Typography.HeadingSM>
-                                                        {item.title}
-                                                    </Typography.HeadingSM>
-                                                    <Typography.BodyMD>
-                                                        {item.description}
-                                                    </Typography.BodyMD>
-                                                </CardBody>
-                                            </Card>
-                                        ))}
-
-                                        {/* Pagination */}
-                                        {pageCount > 1 && (
-                                            <PaginationWrapper>
-                                                <Pagination
-                                                    totalItems={results.length}
-                                                    pageSize={PAGE_SIZE}
-                                                    activePage={state.page}
-                                                    onPageChange={(page) =>
-                                                        setState((s) => ({
-                                                            ...s,
-                                                            page,
-                                                        }))
-                                                    }
-                                                    showFirstAndLastNav
-                                                />
-                                            </PaginationWrapper>
-                                        )}
-                                    </ResultsArea>
-                                </TwoColumn>
-                            )}
-                        </Layout.ColDiv>
-                    </Layout.Container>
-                </PageWrapper>
-            </main>
-            <Footer />
-        </>
-    );
-}
-```
-
----
-
-## Anti-patterns
-
--   Do not omit the result count
--   Do not show an empty results area with no state message
--   Do not use `DataTable` for citizen-facing records
--   Do not use pagination AND lazy loading together
--   Do not leave stale `page` values pointing past the end of a newly-filtered result set
--   Do not split filtering and sorting into separate `useEffect` calls — derive from a single `useMemo`
diff --git a/skills/fds-build/resources/v4/components/accordion.md b/skills/fds-build/resources/v4/components/accordion.md
deleted file mode 100644
index 1b33b0c5a0..0000000000
--- a/skills/fds-build/resources/v4/components/accordion.md
+++ /dev/null
@@ -1,128 +0,0 @@
-# Accordion
-
-Import: `import { Accordion } from "@lifesg/react-design-system/accordion"`
-
-## When to use
-
-Use to reduce visual complexity when users don't need all content at once — FAQs, supplementary details, or grouped settings. Do not use when all content needs to be visible at the same time.
-
-## Composition
-
-```
-Accordion                    ← container, manages expand/collapse state
-├── Accordion.Item           ← expandable panel
-├── Accordion.Item
-└── Accordion.Item
-```
-
-All children must be `Accordion.Item`. Do not place other elements directly inside `Accordion`.
-
-## Variants
-
-| `type` on `Accordion.Item` | Usage                                |
-| -------------------------- | ------------------------------------ |
-| `"default"`                | Standard title size — default        |
-| `"small"`                  | Compact title size for dense layouts |
-
-## Usage
-
-```tsx
-import { Accordion } from "@lifesg/react-design-system/accordion";
-
-// Multiple items — all collapsed by default
-const FaqSection = () => (
-    <Accordion
-        title="Frequently asked questions"
-        headingLevel={2}
-        initialDisplay="collapse-all"
-        enableExpandAll
-    >
-        <Accordion.Item title="What is this service?">
-            <p>This service lets you manage your account settings.</p>
-        </Accordion.Item>
-        <Accordion.Item title="How do I reset my password?">
-            <p>Click "Forgot password" on the login page.</p>
-        </Accordion.Item>
-        {/* JSX in title must be wrapped in <span> — title renders inside <button> */}
-        <Accordion.Item
-            title={
-                <span>
-                    Can I use <strong>bold text</strong> in a title?
-                </span>
-            }
-        >
-            <p>Yes — wrap JSX title content in a span.</p>
-        </Accordion.Item>
-    </Accordion>
-);
-
-// Controlled item — force one item open regardless of Expand All state
-const ControlledExample = () => (
-    <Accordion initialDisplay="collapse-all">
-        <Accordion.Item title="Always expanded" expanded={true}>
-            <p>This item ignores the parent initialDisplay.</p>
-        </Accordion.Item>
-        <Accordion.Item title="Follows parent state">
-            <p>This item collapses with the rest.</p>
-        </Accordion.Item>
-    </Accordion>
-);
-```
-
-## Props — `AccordionProps`
-
-| Prop                     | Type                             | Default      | Description                                                                                                                                                                                                                                               |
-| ------------------------ | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`   | —            | —                                                                                                                                                                                                                                                         |
-| `title`                  | `string \| JSX.Element`          | —            | Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true.                                                                                                                                               |
-| `enableExpandAll`        | `boolean`                        | true         | Renders the "Show all" / "Hide all" toggle button.                                                                                                                                                                                                        |
-| `initialDisplay`         | `"collapse-all" \| "expand-all"` | "expand-all" | Controls whether all items start expanded or collapsed.                                                                                                                                                                                                   |
-| `showTitleInMobile`      | `boolean`                        | false        | When `true`, the `title` remains visible on mobile viewports.                                                                                                                                                                                             |
-| `id`                     | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `className`              | `string`                         | —            | —                                                                                                                                                                                                                                                         |
-| `headingLevel`           | `number`                         | 2            | The ARIA heading level for the accordion and item titles. Specify a custom value to reflect the component's hierarchy within a page. When a title is provided, the title level = n and the item title level = n + 1. Otherwise, the item title level = n. |
-| `onExpandCollapseChange` | `((expanded: boolean) => void)`  | —            | Called after the expand/collapse state changes.                                                                                                                                                                                                           |
-
-## Props — `AccordionItemProps`
-
-| Prop             | Type                            | Default | Description                                                                                                                                                                                                                                                                               |
-| ---------------- | ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*       | `string \| JSX.Element`         | —       | —                                                                                                                                                                                                                                                                                         |
-| `children` \*    | `JSX.Element \| JSX.Element[]`  | —       | —                                                                                                                                                                                                                                                                                         |
-| `expanded`       | `boolean`                       | —       | Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take individual control of this item.                                                                                 |
-| `id`             | `string`                        | —       | —                                                                                                                                                                                                                                                                                         |
-| `className`      | `string`                        | —       | —                                                                                                                                                                                                                                                                                         |
-| `type`           | `AccordionItemType`             | —       | Visual size variant for the accordion item.                                                                                                                                                                                                                                               |
-| `collapsible`    | `boolean`                       | true    | When `false`, the item header is non-interactive and the content panel is always visible.                                                                                                                                                                                                 |
-| `onExpandChange` | `((expanded: boolean) => void)` | —       | Called when the user toggles this item or the parent "Show all" / "Hide all" button fires. When provided, the item enters **controlled mode** — the caller must update the `expanded` prop in response. Without this prop, the item manages its own state internally (uncontrolled mode). |
-
-## Props — `AccordionItemApi`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Props — `AccordionItemHandle`
-
-| Prop            | Type            | Default | Description |
-| --------------- | --------------- | ------- | ----------- |
-| `expand` \*     | `() => void`    | —       | —           |
-| `collapse` \*   | `() => void`    | —       | —           |
-| `isExpanded` \* | `() => boolean` | —       | —           |
-
-## Rules
-
--   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
--   Use `Accordion.Item` for all panels — do not place content directly in `Accordion`.
--   Wrap custom JSX titles in `<span>` — item title renders inside a `<button>` and block elements are invalid inside it.
--   Individual `expanded` on `Accordion.Item` overrides Expand All / Collapse All for that item.
--   Use `initialDisplay="collapse-all"` when content is supplementary and users are unlikely to need it immediately.
-
-## Anti-patterns
-
--   Placing content directly inside `Accordion` without `Accordion.Item` wrappers.
--   Using Accordion when all content should be visible at once — use a plain layout instead.
--   Using block elements (e.g. `<div>`) directly as `title` in `Accordion.Item` — wrap in `<span>`.
--   Skipping `headingLevel` when `title` is set — this breaks heading hierarchy for screen readers.
diff --git a/skills/fds-build/resources/v4/components/alert.md b/skills/fds-build/resources/v4/components/alert.md
deleted file mode 100644
index 3142159a30..0000000000
--- a/skills/fds-build/resources/v4/components/alert.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# Alert
-
-Import: `import { Alert } from "@lifesg/react-design-system/alert"`
-
-## When to use
-
-Use to call out important information within page sections — warnings before a user starts a task, informational notes relevant to a specific section, or non-transient status messages. Not for form validation errors (use form error patterns instead).
-
-## Variants
-
-| `type`          | When to use                                |
-| --------------- | ------------------------------------------ |
-| `"success"`     | Action completed successfully              |
-| `"error"`       | Action failed or system error              |
-| `"warning"`     | User should proceed with caution           |
-| `"info"`        | Neutral informational message              |
-| `"description"` | Descriptive content with no status meaning |
-
-## Usage
-
-```tsx
-import { Alert } from "@lifesg/react-design-system/alert";
-
-<Alert type="warning" showIcon role="alert">
-    Your session will expire in 5 minutes. Save your work to avoid losing
-    progress.
-</Alert>;
-```
-
-## Props — `AlertProps`
-
-| Prop                 | Type                                            | Default            | Description                                                                                                                                                                                                                                 |
-| -------------------- | ----------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `AlertType`                                     | —                  | Visual severity or purpose of the alert banner.                                                                                                                                                                                             |
-| `actionLink`         | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | —                  | Anchor attributes for an optional call-to-action link rendered below the alert content. The link is styled with a trailing arrow icon by default; supply `actionLinkIcon` to replace that icon.                                             |
-| `showIcon`           | `boolean`                                       | false              | Renders the type-specific icon to the left of the content.                                                                                                                                                                                  |
-| `actionLinkIcon`     | `JSX.Element`                                   | <ArrowRightIcon /> | Replaces the default trailing arrow on the action link. Only visible when `actionLink` is also provided.                                                                                                                                    |
-| `sizeType`           | `AlertSizeType`                                 | —                  | Controls the overall size of the alert, affecting typography and icon dimensions.                                                                                                                                                           |
-| `customIcon`         | `JSX.Element`                                   | —                  | Replaces the default type-specific icon. Only visible when `showIcon` is `true`.                                                                                                                                                            |
-| `maxCollapsedHeight` | `number`                                        | —                  | Maximum height in pixels before the content area is collapsed. When the rendered content exceeds this value a "Show more / Show less" toggle is displayed. The content container is marked as inert whenever the collapsed state is active. |
-
-## Rules
-
--   Always use `showIcon` — icons provide immediate visual recognition of alert severity.
--   Use `actionLink` for recoverable errors (retry, undo, view details).
--   Set `role` based on how the alert appears: `"alert"` for dynamic alerts triggered by user action, `"status"` for background status updates, omit for static content visible on page load.
--   Use `maxCollapsedHeight` to avoid long content overwhelming the layout.
--   `role` is not set automatically — set `role="alert"` for dynamic alerts, `role="status"` for background updates, and omit for static content.
-
-## Anti-patterns
-
--   Using Alert for form field validation errors — use inline form error patterns instead.
--   Omitting `role` on dynamically injected alerts — screen readers will not announce them.
--   Using `type="description"` with `showIcon` — description has no semantic status meaning.
diff --git a/skills/fds-build/resources/v4/components/animation.md b/skills/fds-build/resources/v4/components/animation.md
deleted file mode 100644
index 55ac88341e..0000000000
--- a/skills/fds-build/resources/v4/components/animation.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Animation
-
-Import: `import { Animation } from "@lifesg/react-design-system/animation"`
-
-## Props — `AnimationProps`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `id`        | `string` | —       | —           |
-| `className` | `string` | —       | —           |
-
-## Props — `CustomisableAnimationProps`
-
-| Prop        | Type                                                                      | Default | Description                                              |
-| ----------- | ------------------------------------------------------------------------- | ------- | -------------------------------------------------------- |
-| `id`        | `string`                                                                  | —       | —                                                        |
-| `className` | `string`                                                                  | —       | —                                                        |
-| `color`     | `\| string \| ColourCSSVariableString \| ComponentTokenCSSVariableString` | —       | The color that is to be applied on the animated elements |
diff --git a/skills/fds-build/resources/v4/components/avatar.md b/skills/fds-build/resources/v4/components/avatar.md
deleted file mode 100644
index def3ad46c4..0000000000
--- a/skills/fds-build/resources/v4/components/avatar.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Avatar
-
-Import: `import { Avatar } from "@lifesg/react-design-system/avatar"`
-
-## Props — `AvatarProps`
-
-| Prop          | Type                    | Default | Description                                                                                                                                                                                                            |
-| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \* | `string \| JSX.Element` | —       | A string or JSX element to display inside the avatar. When a string is provided, only the first Unicode code point is rendered as an uppercase initial. Pass a JSX element (e.g. an `<img>`) to render custom content. |
-| `sizeType`    | `AvatarSize`            | —       | Controls the visual size of the avatar. `"small"` renders a compact variant with reduced typography; `"default"` uses the standard size.                                                                               |
diff --git a/skills/fds-build/resources/v4/components/badge.md b/skills/fds-build/resources/v4/components/badge.md
deleted file mode 100644
index b6a08e7cc8..0000000000
--- a/skills/fds-build/resources/v4/components/badge.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Badge
-
-Import: `import { Badge } from "@lifesg/react-design-system/badge"`
-
-## Props — `BadgeProps`
-
-| Prop          | Type               | Default   | Description                                                                                                                                                                                           |
-| ------------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `badgeOffset` | `[string, string]` | —         | Horizontal and vertical offset applied to the badge when it overlays a child element. Provided as a `[x, y]` tuple of CSS length values (e.g. `["-4px", "-4px"]`). Ignored when no child is rendered. |
-| `children`    | `JSX.Element`      | —         | Element that the badge overlays. When provided, the badge is positioned absolutely over the top-right corner of this child. Omit to render the badge as a standalone indicator.                       |
-| `color`       | `BadgeColor`       | "default" | Color scheme applied to the badge.                                                                                                                                                                    |
-| `count`       | `number`           | —         | Numeric value displayed inside `number`, `number-with-border`, and `square-number` variants. Values above 1000 are capped and shown as `"1K"` or `"1K+"`. Has no effect on dot variants.              |
-| `variant`     | `BadgeVariant`     | "number"  | Visual style of the badge indicator.                                                                                                                                                                  |
-
-## Rules
-
--   `count` only applies to `"number"`, `"number-with-border"`, and `"square-number"` variants.
--   When `children` is provided, the badge overlays the top-right corner of the child element.
diff --git a/skills/fds-build/resources/v4/components/box-container.md b/skills/fds-build/resources/v4/components/box-container.md
deleted file mode 100644
index a0cee68541..0000000000
--- a/skills/fds-build/resources/v4/components/box-container.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# BoxContainer
-
-Import: `import { BoxContainer } from "@lifesg/react-design-system/box-container"`
-
-## When to use
-
-Use for a single collapsible panel displaying form data or structured content — typically a named section within a form or detail view. Supports an optional header action and a status indicator to flag section-level errors or warnings.
-
-## Sub-components
-
-### BoxContainerSubComponentTestIds
-
-| Prop               | Type     | Description                            |
-| ------------------ | -------- | -------------------------------------- |
-| `title`            | `string` | Test id for the header title           |
-| `displayStateIcon` | `string` | Test id for the display state icon     |
-| `handle`           | `string` | Test id for the expand/collapse handle |
-
-## Variants
-
-| `displayState` | When to use                                |
-| -------------- | ------------------------------------------ |
-| `"default"`    | Normal state — no icon                     |
-| `"error"`      | Section has validation errors              |
-| `"warning"`    | Section has a warning that needs attention |
-
-## Props — `BoxContainerSubComponentTestIds`
-
-| Prop               | Type     | Default | Description |
-| ------------------ | -------- | ------- | ----------- |
-| `title`            | `string` | —       | —           |
-| `handle`           | `string` | —       | —           |
-| `displayStateIcon` | `string` | —       | —           |
-
-## Props — `BoxContainerProps`
-
-| Prop                    | Type                              | Default   | Description                                                                                                                                             |
-| ----------------------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*           | `JSX.Element \| JSX.Element[]`    | —         | —                                                                                                                                                       |
-| `title` \*              | `string \| JSX.Element`           | —         | —                                                                                                                                                       |
-| `collapsible`           | `boolean`                         | true      | When `false`, the container is always expanded and the collapse handle is hidden.                                                                       |
-| `expanded`              | `boolean`                         | false     | Initial expanded state when `collapsible` is `true`.                                                                                                    |
-| `callToActionComponent` | `JSX.Element`                     | —         | Optional element rendered in the header alongside the title, e.g. a link or button.                                                                     |
-| `displayState`          | `BoxContainerDisplayState`        | "default" | Renders an inline alert icon next to the title and announces the state to screen readers. Has no effect when set to `"default"`.                        |
-| `className`             | `string`                          | —         | —                                                                                                                                                       |
-| `subComponentTestIds`   | `BoxContainerSubComponentTestIds` | —         | —                                                                                                                                                       |
-| `id`                    | `string`                          | —         | —                                                                                                                                                       |
-| `clickableHeader`       | `boolean`                         | —         | When `true` (and `collapsible` is also `true`), the entire header row becomes a click target for toggling expand/collapse, not just the chevron button. |
-
-## Rules
-
--   Use `displayState` to indicate section-level status — not as a substitute for inline field errors.
--   Use `callToActionComponent` for section-level actions only — not for form submission buttons.
--   Use `collapsible={false}` when the content must always be visible.
--   Use `clickableHeader` to make the full header row the expand/collapse trigger — improves usability for dense layouts.
-
-## Anti-patterns
-
--   Using `displayState="error"` instead of inline form field errors — `displayState` signals section-level status only.
--   Using `callToActionComponent` for form submission — use a dedicated submit button outside the container.
--   Nesting BoxContainer inside another BoxContainer.
diff --git a/skills/fds-build/resources/v4/components/breadcrumb.md b/skills/fds-build/resources/v4/components/breadcrumb.md
deleted file mode 100644
index bae6aa4b34..0000000000
--- a/skills/fds-build/resources/v4/components/breadcrumb.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# Breadcrumb
-
-Import: `import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb"`
-
-## When to use
-
-Use on pages within a multi-level hierarchy to help users navigate to parent pages.
-
-Do not use on:
-
--   The home page
--   Pages with no parent
--   Focused flows such as forms or wizards
-
-## Variants
-
-| `separatorStyle`      | When to use              |
-| --------------------- | ------------------------ |
-| `"chevron"` (default) | Standard pages           |
-| `"slash"`             | Alternative visual style |
-
-## Usage
-
-```tsx
-import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
-
-<Breadcrumb
-    links={[
-        { children: "Home", href: "/" },
-        { children: "Services", href: "/services" },
-        { children: "Apply" },
-    ]}
-/>;
-```
-
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
-
-| Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links` \*       | `React.AnchorHTMLAttributes<HTMLAnchorElement>[]` | —            | Navigation items rendered as the breadcrumb trail. The last item is treated as the current page (`aria-current="page"`) and is not clickable. Items without `href` render as non-clickable labels. Items without `children` are skipped. |
-| `fadeColor`      | `string[] \| FadeColorSet`                        | —            | Gradient color stops for the fade overlays shown on horizontal scroll. Pass a `string[]` to apply the same gradient to both edges, or a `FadeColorSet` to configure each edge independently.                                             |
-| `fadePosition`   | `FadePosition`                                    | "both"       | Which edges display fade overlays when content overflows.                                                                                                                                                                                |
-| `separatorStyle` | `SeparatorStyle`                                  | "chevron"    | Visual separator between breadcrumb items.                                                                                                                                                                                               |
-| `className`      | `string`                                          | —            | —                                                                                                                                                                                                                                        |
-| `id`             | `string`                                          | "breadcrumb" | HTML `id` for the wrapper element.                                                                                                                                                                                                       |
-
-## Rules
-
--   Always place the current page last in `links` — omit `href` on the last item.
--   Keep breadcrumb trails to 4 items or fewer; 5 or more items automatically collapse the middle into an overflow menu.
--   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
--   The last item in `links` is rendered as the current page (non-clickable, `aria-current="page"`). Omit `href` on the last item.
--   When 5 or more items are present, middle items automatically collapse into an overflow menu.
--   On mobile, breadcrumbs scroll horizontally with a fade effect at the edges controlled by `fadeColor` and `fadePosition`.
-
-## Anti-patterns
-
--   Do not add `href` to the last breadcrumb item — it represents the current page and must not be clickable.
--   Do not use breadcrumbs on single-level or flat navigation structures.
--   Do not use breadcrumbs inside forms or wizard flows.
diff --git a/skills/fds-build/resources/v4/components/calendar.md b/skills/fds-build/resources/v4/components/calendar.md
deleted file mode 100644
index 4bdc7d2dee..0000000000
--- a/skills/fds-build/resources/v4/components/calendar.md
+++ /dev/null
@@ -1,113 +0,0 @@
-# Calendar
-
-Import: `import { Calendar } from "@lifesg/react-design-system/calendar"`
-
-## When to use
-
--   Displaying an inline date picker when a full-page or panel calendar is preferable over a dropdown.
--   Use `variant="single"` for standard single-date selection.
--   Use `variant="multi"` when the user must pick multiple non-contiguous dates (e.g. recurring appointments).
-
-## Usage
-
-### variant="single" — single date selection
-
-```tsx
-import { useState } from "react";
-import { Calendar } from "@lifesg/react-design-system/calendar";
-
-const AppointmentCalendar = () => {
-    const [date, setDate] = useState("2024-06-15");
-
-    return (
-        <Calendar
-            variant="single"
-            value={date}
-            minDate="2024-01-01"
-            maxDate="2024-12-31"
-            onChange={(selected) => setDate(selected)}
-        />
-    );
-};
-```
-
-### variant="multi" — multiple date selection
-
-Note `values` (plural) and `onChange` receives the full updated array.
-
-```tsx
-import { useState } from "react";
-import { Calendar } from "@lifesg/react-design-system/calendar";
-
-const MultiDateCalendar = () => {
-    const [dates, setDates] = useState<string[]>([]);
-
-    return (
-        <Calendar
-            variant="multi"
-            values={dates}
-            minDate="2024-01-01"
-            maxDate="2024-12-31"
-            maxSelectable={5}
-            onChange={(selected) => setDates(selected)}
-        />
-    );
-};
-```
-
-## YearMonthDisplay
-
-| Prop    | Type     | Description                           |
-| ------- | -------- | ------------------------------------- |
-| `year`  | `number` | Current visible year in `YYYY` format |
-| `month` | `number` | Current visible month, 1–12           |
-
-## Props — `CalendarSingleProps`
-
-| Prop       | Type                        | Default  | Description                            |
-| ---------- | --------------------------- | -------- | -------------------------------------- |
-| `variant`  | `"single"`                  | "single" | —                                      |
-| `value`    | `string`                    | —        | Selected date in `YYYY-MM-DD` format   |
-| `onChange` | `((value: string) => void)` | —        | Called when the selected date changes. |
-| `onSelect` | `((value: string) => void)` | —        | Called when a date is selected.        |
-
-## Props — `CalendarMultiProps`
-
-| Prop            | Type                           | Default | Description                                   |
-| --------------- | ------------------------------ | ------- | --------------------------------------------- |
-| `variant` \*    | `"multi"`                      | —       | —                                             |
-| `values`        | `string[]`                     | —       | Selected dates in `YYYY-MM-DD` format         |
-| `minSelectable` | `number`                       | —       | Minimum number of dates that must be selected |
-| `maxSelectable` | `number`                       | —       | Maximum number of dates that can be selected  |
-| `onChange`      | `((values: string[]) => void)` | —       | Called when the selection changes.            |
-
-## Props — `CalendarProps`
-
-| Prop                       | Type                                  | Default    | Description                                                                                           |
-| -------------------------- | ------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`                | `string`                              | —          | —                                                                                                     |
-| `id`                       | `string`                              | —          | —                                                                                                     |
-| `styleType`                | `"no-border" \| "bordered"`           | "bordered" | Border style of the calendar container.                                                               |
-| `onHover`                  | `((value: string) => void)`           | —          | Called when a day cell is hovered.                                                                    |
-| `onYearMonthDisplayChange` | `((value: YearMonthDisplay) => void)` | —          | Called when the visible month or year changes.                                                        |
-| `minDate`                  | `string`                              | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                  | `string`                              | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`            | `string[]`                            | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`   | `boolean`                             | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly`  | `boolean`                             | —          | Specifies if the calendar should display only dates for the selected month                            |
-| `variant`                  | `"single"`                            | "single"   | —                                                                                                     |
-| `onChange`                 | `((value: string) => void)`           | —          | Called when the selected date changes.                                                                |
-
-## Rules
-
--   `variant="single"` uses `value: string` and `onChange: (date: string) => void`.
--   `variant="multi"` uses `values: string[]` and `onChange: (dates: string[]) => void` — note the plural prop names.
--   All dates must be in `YYYY-MM-DD` format.
--   Use `minDate`/`maxDate` to constrain selectable range.
--   Use `disabledDates` for specific non-selectable dates within the allowed range.
-
-## Anti-patterns
-
--   Do not pass `value` to `variant="multi"` — the prop is `values` (plural).
--   Do not pass `values` to `variant="single"` — the prop is `value` (singular).
--   Do not use Calendar inside a form for simple date entry — prefer `Form.DateInput` for that pattern.
diff --git a/skills/fds-build/resources/v4/components/checkbox.md b/skills/fds-build/resources/v4/components/checkbox.md
deleted file mode 100644
index bf98ce7a78..0000000000
--- a/skills/fds-build/resources/v4/components/checkbox.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# Checkbox
-
-Import: `import { Checkbox } from "@lifesg/react-design-system/checkbox"`
-
-## When to use
-
--   Simple boolean selections where a compact tick-box is sufficient.
--   Table row selection (single or "select all").
--   Filter lists with multiple independent options.
--   "Select all" patterns using the `indeterminate` state.
-
-Prefer `Toggle` over `Checkbox` when building form inputs that need a visible card-style label container.
-
-## Variants
-
-| `displaySize` | When to use                    |
-| ------------- | ------------------------------ |
-| `"default"`   | Standard use                   |
-| `"small"`     | Dense layouts, inline controls |
-
-## Usage
-
-```tsx
-import { Checkbox } from "@lifesg/react-design-system/checkbox";
-
-<label>
-    <Checkbox checked={agreed} onChange={(e) => {}} />I agree to the terms and
-    conditions
-</label>;
-```
-
-## Props
-
-| Prop                    | Type           | Default   | Description                                                                                                                                                                                                                                                            |
-| ----------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`      | —         | Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.                                                                                                                                                                                |
-| `displaySize`           | `CheckboxSize` | "default" | Controls the visual size of the checkbox.                                                                                                                                                                                                                              |
-| `indeterminate`         | `boolean`      | —         | Puts the checkbox into an indeterminate visual and accessibility state.                                                                                                                                                                                                |
-| `focusableWhenDisabled` | `boolean`      | —         | Allows the checkbox to receive focus when `disabled` is true. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Rules
-
--   Always pair with a visible label — wrap in `<label>` or use `aria-label`.
--   Use `indeterminate` for "select all" controls when only some items in a list are selected — not as a permanent state.
--   Use the same `name` attribute when grouping checkboxes in a form.
--   No dedicated `disabled` prop — use the inherited `disabled` from `InputHTMLAttributes`, or `focusableWhenDisabled` to retain focus while blocking interaction.
--   `indeterminate` is a visual state; manage controlled `checked` separately.
-
-## Anti-patterns
-
--   Do not use `indeterminate` as a permanent or final state — it is a transitional indicator only.
--   Do not use `Checkbox` alone without a label — always provide accessible text.
--   Do not use `Checkbox` when only one option from a set can be selected — use `RadioButton` instead.
diff --git a/skills/fds-build/resources/v4/components/countdown-timer.md b/skills/fds-build/resources/v4/components/countdown-timer.md
deleted file mode 100644
index 8d0791b053..0000000000
--- a/skills/fds-build/resources/v4/components/countdown-timer.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# CountdownTimer
-
-Import: `import { CountdownTimer } from "@lifesg/react-design-system/countdown-timer"`
-
-## Props
-
-| Prop               | Type                          | Default     | Description                                                                                                                                                                              |
-| ------------------ | ----------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show` \*          | `boolean`                     | —           | Controls whether the timer is visible and actively counting down.                                                                                                                        |
-| `fixed`            | `boolean`                     | true        | When `true`, the timer switches to a fixed viewport overlay once its inline position scrolls out of view, keeping the countdown visible at all times.                                    |
-| `notifyTimer`      | `number`                      | —           | Remaining-seconds threshold at which the warning state activates. Once the countdown reaches this value, `onNotify` fires once and `onTick` fires every second until the timer finishes. |
-| `offset`           | `Offset`                      | —           | Fine-tunes the fixed overlay position on tablet and desktop viewports.                                                                                                                   |
-| `mobileOffset`     | `MobileOffset`                | { top: 80 } | Fine-tunes the fixed overlay position on mobile viewports.                                                                                                                               |
-| `align`            | `AlignPosition`               | "right"     | Side of the inline wrapper the fixed overlay is pinned to when scrolled into sticky mode.                                                                                                |
-| `onTick`           | `((seconds: number) => void)` | —           | Called every second with the remaining seconds once the countdown falls at or below `notifyTimer`.                                                                                       |
-| `onNotify`         | `(() => void)`                | —           | Called once when the remaining seconds first reach the `notifyTimer` threshold.                                                                                                          |
-| `onFinish`         | `(() => void)`                | —           | Called when the countdown reaches zero.                                                                                                                                                  |
-| `reminderInterval` | `number`                      | 120         | Interval in seconds between polite screen-reader announcement of the remaining time while the timer is above the `notifyTimer` threshold.                                                |
-| `timer` \*         | `number`                      | —           | Duration of the countdown in seconds.                                                                                                                                                    |
-| `timestamp`        | `number`                      | —           | —                                                                                                                                                                                        |
diff --git a/skills/fds-build/resources/v4/components/data-table.md b/skills/fds-build/resources/v4/components/data-table.md
deleted file mode 100644
index b99831d0f3..0000000000
--- a/skills/fds-build/resources/v4/components/data-table.md
+++ /dev/null
@@ -1,142 +0,0 @@
-# DataTable
-
-Import: `import { DataTable } from "@lifesg/react-design-system/data-table"`
-
-## When to use
-
--   Displaying tabular data with optional sorting, row selection, and custom cell rendering.
--   Use `enableMultiSelect` + `enableSelectAll` when users need to act on multiple rows at once.
-
-## Usage
-
-### Column definitions, sorting, selection, and custom cell rendering
-
-```tsx
-import { useState, useMemo } from "react";
-import {
-    DataTable,
-    SortIndicatorsProps,
-} from "@lifesg/react-design-system/data-table";
-import { Pill } from "@lifesg/react-design-system/pill";
-
-const rows = [
-    { id: "1", name: "Alice", status: "active", score: 90 },
-    { id: "2", name: "Bob", status: "inactive", score: 72 },
-    { id: "3", name: "Carol", status: "active", score: 85 },
-];
-
-const Example = () => {
-    const [selectedIds, setSelectedIds] = useState<string[]>([]);
-    const [sortState, setSortState] = useState<SortIndicatorsProps>({
-        score: "desc",
-    });
-
-    // onSelect: toggle a single row id
-    const handleSelect = (rowId: string, isSelected: boolean) => {
-        setSelectedIds((prev) =>
-            isSelected ? [...prev, rowId] : prev.filter((id) => id !== rowId)
-        );
-    };
-
-    // onSelectAll: isAllSelected=true means "clear all"; false means "select all"
-    const handleSelectAll = (isAllSelected: boolean) => {
-        setSelectedIds(isAllSelected ? [] : rows.map((r) => r.id));
-    };
-
-    const handleHeaderClick = (fieldKey: string) => {
-        if (fieldKey === "score") {
-            setSortState({ score: sortState.score === "asc" ? "desc" : "asc" });
-        }
-    };
-
-    const sorted = useMemo(
-        () =>
-            [...rows].sort((a, b) =>
-                sortState.score === "asc"
-                    ? a.score - b.score
-                    : b.score - a.score
-            ),
-        [sortState]
-    );
-
-    return (
-        <DataTable
-            headers={[
-                { fieldKey: "name", label: "Name", keyColumn: true },
-                { fieldKey: "status", label: "Status" },
-                { fieldKey: "score", label: "Score", clickable: true },
-            ]}
-            rows={sorted.map((row) => ({
-                ...row,
-                // custom cell: render status as a Pill
-                status: <Pill type="outline">{row.status}</Pill>,
-            }))}
-            selectedIds={selectedIds}
-            disabledIds={["2"]}
-            sortIndicators={sortState}
-            enableMultiSelect
-            enableSelectAll
-            onSelect={handleSelect}
-            onSelectAll={handleSelectAll}
-            onHeaderClick={handleHeaderClick}
-        />
-    );
-};
-```
-
-## HeaderItemProps
-
-| Prop          | Type                        | Default | Description                                                            |
-| ------------- | --------------------------- | ------- | ---------------------------------------------------------------------- |
-| `fieldKey` \* | `string`                    | —       | Key name in the row item object                                        |
-| `label` \*    | `string \| React.ReactNode` | —       | Display label for the column header                                    |
-| `clickable`   | `boolean`                   | —       | If true, `onHeaderClick` is called when the cell is clicked            |
-| `style`       | `CSSProperties`             | —       | Custom styles for the column header cell                               |
-| `keyColumn`   | `boolean`                   | —       | Marks this column as descriptive for screen reader row checkbox labels |
-
-## Props — `DataTableProps`
-
-| Prop                              | Type                                             | Default   | Description                                                                                                                                                                                   |
-| --------------------------------- | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                              | `string`                                         | —         | —                                                                                                                                                                                             |
-| `headers` \*                      | `HeaderProps[]`                                  | —         | Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry.                                                                     |
-| `rows`                            | `RowProps[]`                                     | —         | Row data to render. When omitted or empty the empty state is shown.                                                                                                                           |
-| `className`                       | `string`                                         | —         | —                                                                                                                                                                                             |
-| `selectedIds`                     | `string[]`                                       | —         | The ids of selected items. If undefined, the Select All checkbox remains enabled when rows are non-empty.                                                                                     |
-| `disabledIds`                     | `string[]`                                       | —         | Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible.                                                                                                           |
-| `enableMultiSelect`               | `boolean`                                        | —         | Renders a checkbox column as the first column of each row to support row selection.                                                                                                           |
-| `enableSelectAll`                 | `boolean`                                        | —         | Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`.                                                                                                    |
-| `enableActionBar`                 | `boolean`                                        | —         | Shows the action bar whenever one or more rows are selected.                                                                                                                                  |
-| `enableActionBarWithoutSelection` | `boolean`                                        | —         | Shows the action bar even when no rows are selected. Requires `enableActionBar`.                                                                                                              |
-| `enableStickyHeader`              | `boolean`                                        | —         | Keeps the header row visible as the user scrolls down through the table.                                                                                                                      |
-| `actionBarContent`                | `ReactNode`                                      | —         | Additional content rendered inside the action bar.                                                                                                                                            |
-| `loadState`                       | `LoadStateType`                                  | "success" | Controls whether the table body renders data rows or a loading indicator.                                                                                                                     |
-| `onSelect`                        | `((rowId: string, isSelected: boolean) => void)` | —         | Called when a row's checkbox is toggled; receives the row ID and the new selected state.                                                                                                      |
-| `onSelectAll`                     | `((isAllSelected: boolean) => void)`             | —         | Called when the select-all checkbox is toggled.                                                                                                                                               |
-| `onHeaderClick`                   | `((fieldKey: string) => void)`                   | —         | Called when a header cell is clicked; receives the `fieldKey` of the clicked column.                                                                                                          |
-| `onClearSelectionClick`           | `(() => void)`                                   | —         | Called when the "Clear selection" button inside the action bar is clicked.                                                                                                                    |
-| `sortIndicators`                  | `SortIndicatorsProps`                            | —         | Maps each `fieldKey` to its current sort direction. A key present in this map causes the corresponding header to render a directional arrow and expose sort controls to assistive technology. |
-| `alternatingRows`                 | `boolean`                                        | —         | Applies an alternate background colour to every odd-indexed row.                                                                                                                              |
-| `emptyView`                       | `ErrorDisplayAttributes`                         | —         | Overrides the title and description shown in the built-in empty state. Ignored when `renderCustomEmptyView` is provided.                                                                      |
-| `renderCustomEmptyView`           | `(() => ReactNode)`                              | —         | Renders a fully custom empty state in place of the default `ErrorDisplay`.                                                                                                                    |
-
-## Props — `RowProps`
-
-| Prop    | Type               | Default | Description                                                                                   |
-| ------- | ------------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `id` \* | `string \| number` | —       | Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. |
-
-## Rules
-
--   Each row object must have a unique `id: string` field.
--   `selectedIds` and `disabledIds` are arrays of row `id` strings — manage them in external state.
--   `onSelect(rowId, isSelected)` fires per row; toggle the id into/out of your `selectedIds` array.
--   `onSelectAll(isAllSelected)` fires when the header checkbox is clicked; `isAllSelected` is `true` when the action should clear all selections (the parameter name is inverted — see example).
--   For sortable columns, set `clickable: true` on the header and handle `onHeaderClick(fieldKey)`.
--   Custom cell rendering: set a row field to a `ReactNode` or a render function `(row, renderProps) => ReactNode`.
-
-## Anti-patterns
-
--   Do not derive `selectedIds` from row data alone without external state — the table is uncontrolled for selection without it.
--   Do not omit `id` on row objects — selection and disabled logic will break silently.
--   Do not add `clickable: true` to a header without wiring `onHeaderClick` — clicks will silently do nothing.
diff --git a/skills/fds-build/resources/v4/components/date-navigator.md b/skills/fds-build/resources/v4/components/date-navigator.md
deleted file mode 100644
index 88671722d8..0000000000
--- a/skills/fds-build/resources/v4/components/date-navigator.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# DateNavigator
-
-Import: `import { DateNavigator } from "@lifesg/react-design-system/date-navigator"`
-
-## Props
-
-| Prop                     | Type                              | Default       | Description                                                                                                                                                                        |
-| ------------------------ | --------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —             | —                                                                                                                                                                                  |
-| `className`              | `string`                          | —             | —                                                                                                                                                                                  |
-| `selectedDate` \*        | `string`                          | —             | The currently displayed date in `YYYY-MM-DD` format.                                                                                                                               |
-| `minDate`                | `string`                          | —             | The earliest selectable date in `YYYY-MM-DD` format. The left arrow is disabled when `selectedDate` reaches this boundary.                                                         |
-| `maxDate`                | `string`                          | —             | The latest selectable date in `YYYY-MM-DD` format. The right arrow is disabled when `selectedDate` reaches this boundary.                                                          |
-| `loading`                | `boolean`                         | —             | When `true`, both navigation arrows and the calendar trigger are disabled.                                                                                                         |
-| `showDateAsShortForm`    | `boolean`                         | —             | When `true`, formats the displayed date using abbreviated month and day names (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).                                    |
-| `showCurrentDateAsToday` | `boolean`                         | —             | When `true`, replaces the day-of-week label with `"Today"` if `selectedDate` matches the current calendar date.                                                                    |
-| `view`                   | `"day" \| "week"`                 | "day"         | Controls whether navigation steps by a single day or by a full week. In `"week"` mode the label shows the Sunday–Saturday range that contains `selectedDate`.                      |
-| `onLeftArrowClick` \*    | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the left arrow is clicked.                                                                                                       |
-| `onRightArrowClick` \*   | `(currentDate: string) => void`   | —             | Called with the current `selectedDate` value when the right arrow is clicked.                                                                                                      |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —             | Called with the chosen date string when the user selects a date from the calendar dropdown. When omitted the date label is non-interactive and the calendar dropdown is not shown. |
-| `dropdownRootNode`       | `RefObject<HTMLElement>`          | document.body | The root element that contains the dropdown element.                                                                                                                               |
-
-## Rules
-
--   Only override `dropdownRootNode` if you need the dropdown to share a stacking context with a scroll container — may cause z-index issues.
diff --git a/skills/fds-build/resources/v4/components/divider.md b/skills/fds-build/resources/v4/components/divider.md
deleted file mode 100644
index a1e8ae18c3..0000000000
--- a/skills/fds-build/resources/v4/components/divider.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Divider
-
-Import: `import { Divider } from "@lifesg/react-design-system/divider"`
-
-## Props — `DividerProps`
-
-| Prop         | Type                   | Default          | Description                                                                                                                                                                                                                                                      |
-| ------------ | ---------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thickness`  | `number`               | 1                | Thickness of the line in pixels.                                                                                                                                                                                                                                 |
-| `lineStyle`  | `DividerLineStyleType` | "solid"          | Visual style of the line.                                                                                                                                                                                                                                        |
-| `layoutType` | `DividerLayoutType`    | "flex"           | Controls how the divider is rendered relative to its parent layout. Use `"flex"` when the divider is a direct child of a flex container. Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive column-span control via the `xxsCols`–`xxlCols` props. |
-| `color`      | `string`               | Colour["border"] | Color of the line. Accepts a design-system colour token or any valid CSS color value.                                                                                                                                                                            |
-| `xxlCols`    | `ColSpan`              | —                | Column span at the `xxl` breakpoint.                                                                                                                                                                                                                             |
-| `xlCols`     | `ColSpan`              | —                | Column span at the `xl` breakpoint.                                                                                                                                                                                                                              |
-| `lgCols`     | `ColSpan`              | —                | Column span at the `lg` breakpoint.                                                                                                                                                                                                                              |
-| `mdCols`     | `ColSpan`              | —                | Column span at the `md` breakpoint.                                                                                                                                                                                                                              |
-| `smCols`     | `ColSpan`              | —                | Column span at the `sm` breakpoint.                                                                                                                                                                                                                              |
-| `xsCols`     | `ColSpan`              | —                | Column span at the `xs` breakpoint.                                                                                                                                                                                                                              |
-| `xxsCols`    | `ColSpan`              | —                | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.                                                                                                                 |
-
-## Rules
-
--   `mobileCols`, `tabletCols`, `desktopCols` follow the same semantics as `Layout.ColDiv` — see ColDiv docs for details.
diff --git a/skills/fds-build/resources/v4/components/error-display.md b/skills/fds-build/resources/v4/components/error-display.md
deleted file mode 100644
index 78eac167b9..0000000000
--- a/skills/fds-build/resources/v4/components/error-display.md
+++ /dev/null
@@ -1,137 +0,0 @@
-# ErrorDisplay
-
-Import: `import { ErrorDisplay } from "@lifesg/react-design-system/error-display"`
-
-## When to use
-
-Use for full-page or full-section states where the primary content cannot be shown — HTTP errors, empty results, session states, and system messages. It handles illustration, title, description, and action button as a unit.
-
-Do not build custom error pages with raw Typography + Button — always use `ErrorDisplay` so illustrations and copy stay consistent across products.
-
-## Variants
-
-| `type`                          | When to use                                                      |
-| ------------------------------- | ---------------------------------------------------------------- |
-| `"no-item-found"`               | Search or filter returned no results                             |
-| `"404"`                         | Page not found                                                   |
-| `"403"`                         | Access denied / permission error                                 |
-| `"500"`                         | Internal server error                                            |
-| `"400"`                         | Bad request                                                      |
-| `"408"`                         | Request timeout                                                  |
-| `"502"`                         | Bad gateway                                                      |
-| `"503"`                         | Service unavailable                                              |
-| `"504"`                         | Gateway timeout                                                  |
-| `"maintenance"`                 | Planned downtime — requires `additionalProps.dateString`         |
-| `"inactivity"`                  | Session timeout warning — requires `additionalProps.secondsLeft` |
-| `"logout"`                      | User has been logged out                                         |
-| `"warning"`                     | General warning state                                            |
-| `"confirmation"`                | Action confirmed (e.g. submission complete)                      |
-| `"link-error"`                  | Broken or expired link                                           |
-| `"insufficient-credits"`        | User lacks credits to proceed                                    |
-| `"payment-unsuccessful"`        | Payment failed                                                   |
-| `"transfer-unsuccessful"`       | Transfer failed                                                  |
-| `"unsupported-browser"`         | Browser not supported                                            |
-| `"partially-supported-browser"` | Browser partially supported                                      |
-
-## Usage
-
-```tsx
-import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
-
-{
-    /* No search results */
-}
-<ErrorDisplay
-    type="no-item-found"
-    title="No results found"
-    description="Try adjusting your search or filters."
-    actionButton={{ children: "Clear filters", onClick: handleClear }}
-/>;
-
-{
-    /* Page not found */
-}
-<ErrorDisplay type="404" />;
-
-{
-    /* Maintenance with scheduled date */
-}
-<ErrorDisplay
-    type="maintenance"
-    additionalProps={{ dateString: "1 Jan 2025, 8:00am to 10:00am" }}
-/>;
-
-{
-    /* Session inactivity warning */
-}
-<ErrorDisplay
-    type="inactivity"
-    additionalProps={{ secondsLeft: 60, reminderInterval: 30 }}
-/>;
-```
-
-## MaintenanceAdditionalAttributes
-
-| Prop            | Type     | Default | Description                            |
-| --------------- | -------- | ------- | -------------------------------------- |
-| `dateString` \* | `string` | —       | Date display for the maintenance error |
-
-## InactivityAdditionalAttributes
-
-| Prop             | Type     | Default | Description                                          |
-| ---------------- | -------- | ------- | ---------------------------------------------------- |
-| `secondsLeft` \* | `number` | —       | Time remaining in seconds for the inactivity display |
-
-## Props — `MaintenanceAdditionalAttributes`
-
-| Prop            | Type     | Default | Description                                                      |
-| --------------- | -------- | ------- | ---------------------------------------------------------------- |
-| `dateString` \* | `string` | —       | Date string rendered inside the default maintenance description. |
-
-## Props — `InactivityAdditionalAttributes`
-
-| Prop               | Type     | Default | Description                                                                       |
-| ------------------ | -------- | ------- | --------------------------------------------------------------------------------- |
-| `secondsLeft` \*   | `number` | —       | Remaining seconds before the session expires, used to render the countdown timer. |
-| `reminderInterval` | `number` | —       | Interval (in seconds) for announcing remaining time via screen readers.           |
-
-## Props — `ErrorDisplayAttributes`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Props — `ErrorDisplayProps`
-
-| Prop                 | Type                                                                   | Default | Description                                                                                                                                                                         |
-| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*            | `ErrorDisplayType`                                                     | —       | Determines the default illustration assets and copy to display.                                                                                                                     |
-| `img`                | `React.ImgHTMLAttributes<HTMLImageElement>`                            | —       | Overrides the default illustration for the selected `type`.                                                                                                                         |
-| `title`              | `string \| JSX.Element`                                                | —       | Overrides the default title for the selected `type`.                                                                                                                                |
-| `description`        | `string \| JSX.Element`                                                | —       | Overrides the default description for the selected `type`. When `additionalProps` is also provided for `"maintenance"` or `"inactivity"` types, `additionalProps` takes precedence. |
-| `actionButton`       | `ButtonProps`                                                          | —       | Action button rendered below the description. Defaults to a "Proceed" label when `children` is omitted.                                                                             |
-| `additionalProps`    | `\| MaintenanceAdditionalAttributes \| InactivityAdditionalAttributes` | —       | Type-specific attributes that inject dynamic content into the default description.                                                                                                  |
-| `imageOnly`          | `boolean`                                                              | false   | Renders only the illustration, hiding the title, description, and action button.                                                                                                    |
-| `illustrationScheme` | `ThemeType`                                                            | —       | Selects the illustration resource scheme to use.                                                                                                                                    |
-
-## Rules
-
--   Always use `ErrorDisplay` for error/empty states — never build custom error pages with raw components.
--   `type` is required — it determines the default illustration, title, and description.
--   Override `title` and `description` only when the defaults don't fit your context.
--   `actionButton` accepts standard `ButtonProps` — label and `onClick` are the common fields.
--   `"maintenance"` requires `additionalProps.dateString` to render the scheduled date in the description.
--   `"inactivity"` requires `additionalProps.secondsLeft` for the countdown display.
--   For listing pages use `type="no-item-found"` — it has the correct "empty results" illustration.
-
-## Anti-patterns
-
--   Do not use `imageOnly` unless rendering inside a constrained space where text would overflow.
--   Do not hardcode error page titles/descriptions that duplicate what `ErrorDisplay` already provides by default.
--   Do not use `type="warning"` as a generic placeholder — it implies a system-level warning, not a validation message (use `Alert` for that).
diff --git a/skills/fds-build/resources/v4/components/feedback-rating.md b/skills/fds-build/resources/v4/components/feedback-rating.md
deleted file mode 100644
index 764958b94b..0000000000
--- a/skills/fds-build/resources/v4/components/feedback-rating.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# FeedbackRating
-
-Import: `import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating"`
-
-## When to use
-
-Use at the end of a flow or session to collect a star rating and an optional submission action from the user.
-
-## Usage
-
-### Complete controlled pattern
-
-```tsx
-import { useState } from "react";
-import { FeedbackRating } from "@lifesg/react-design-system/feedback-rating";
-
-const RatingWidget = () => {
-    // Track rating separately — onSubmit does NOT receive it
-    const [rating, setRating] = useState(0);
-
-    const handleSubmit = () => {
-        // Read from state, not from onSubmit arguments (there are none)
-        submitFeedback({ stars: rating });
-    };
-
-    return (
-        <FeedbackRating
-            rating={rating}
-            onRatingChange={(value) => setRating(value)}
-            onSubmit={handleSubmit}
-            description="How was your experience?"
-            buttonLabel="Send feedback"
-        />
-    );
-};
-```
-
-**Key gotcha:** `onSubmit` has the signature `() => void` — it carries no payload. The rating value is only available through the `rating` state you control via `onRatingChange`.
-
-## Props
-
-| Prop                | Type                      | Default                | Description                                                                                                                                                               |
-| ------------------- | ------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `imgSrc`            | `string`                  | —                      | URL of the banner image displayed above the star rating. Falls back to the default Life SG feedback banner when omitted. Hidden automatically if the image fails to load. |
-| `description`       | `string`                  | "Rate your experience" | Heading text displayed above the star rating.                                                                                                                             |
-| `buttonLabel`       | `string`                  | "Submit"               | Label for the submit button.                                                                                                                                              |
-| `className`         | `string`                  | —                      | —                                                                                                                                                                         |
-| `id`                | `string`                  | —                      | —                                                                                                                                                                         |
-| `rating` \*         | `number`                  | —                      | The currently selected star rating (1–5).                                                                                                                                 |
-| `onRatingChange` \* | `(value: number) => void` | —                      | Called when the user selects a star.                                                                                                                                      |
-| `onSubmit` \*       | `() => void`              | —                      | Called when the user clicks the submit button.                                                                                                                            |
-
-## Rules
-
--   All three props — `rating`, `onRatingChange`, `onSubmit` — are required.
--   `onSubmit` does **not** receive the rating value. Track the rating separately via `onRatingChange` state and read it inside `onSubmit`.
--   `rating` must be controlled state; the component does not manage selection internally.
-
-## Anti-patterns
-
--   Do not try to read the rating from inside `onSubmit`'s arguments — it receives none. Always use the state value set by `onRatingChange`.
diff --git a/skills/fds-build/resources/v4/components/file-download.md b/skills/fds-build/resources/v4/components/file-download.md
deleted file mode 100644
index e19e6640e5..0000000000
--- a/skills/fds-build/resources/v4/components/file-download.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# FileDownload
-
-Import: `import { FileDownload } from "@lifesg/react-design-system/file-download"`
-
-## Sub-components
-
--   `FileItemProps` — shape of each item in `fileItems`
-
-## FileItemProps
-
-| Prop                    | Type                        | Default | Description                                   |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------- |
-| `id` \*                 | `string`                    | —       | The unique identifier of the file             |
-| `name` \*               | `string`                    | —       | The name of the file                          |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file                     |
-| `filePath` \*           | `string`                    | —       | The remote path of the file                   |
-| `size`                  | `number`                    | —       | The size of the file in bytes                 |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Custom error message when file download fails |
-| `thumbnailImageDataUrl` | `string`                    | —       | The thumbnail of the file                     |
-| `truncateText`          | `boolean`                   | `true`  | Indicates if text should be truncated         |
-| `ready`                 | `boolean`                   | `true`  | Indicates if the file is ready for download   |
-
-## Props — `FileItemDownloadProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
-
-## Props — `FileDownloadProps`
-
-| Prop            | Type                                                     | Default    | Description                                                                                                                                                                                                                                                                             |
-| --------------- | -------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`         | `string \| JSX.Element`                                  | —          | Optional heading rendered above the file list. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                |
-| `description`   | `string \| JSX.Element`                                  | —          | Optional text rendered beneath the title. Accepts a plain string or a JSX element for rich content.                                                                                                                                                                                     |
-| `fileItems` \*  | `FileItemDownloadProps[]`                                | —          | The list of file items to display. When empty, no file cards are rendered.                                                                                                                                                                                                              |
-| `styleType`     | `FileDownloadStyle`                                      | "bordered" | Controls whether the component is wrapped in a dashed border.                                                                                                                                                                                                                           |
-| `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
-| `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
-
-## Rules
-
--   `fileItems` and `onDownload` are required.
--   On `FileItemProps`: `id`, `name`, `mimeType`, and `filePath` are required.
diff --git a/skills/fds-build/resources/v4/components/file-upload.md b/skills/fds-build/resources/v4/components/file-upload.md
deleted file mode 100644
index a5d2d378c8..0000000000
--- a/skills/fds-build/resources/v4/components/file-upload.md
+++ /dev/null
@@ -1,105 +0,0 @@
-# FileUpload
-
-Import: `import { FileUpload } from "@lifesg/react-design-system/file-upload"`
-
-## When to use
-
--   Forms that require users to attach one or more files (e.g. supporting documents, ID scans, images).
--   Use `sortable` when file order matters for downstream processing.
--   Use `editableFileItems` when image files need alt-text or descriptions.
--   Use `readOnly` on review or summary screens to display uploaded files without allowing changes.
-
-## Usage
-
-```tsx
-import { FileUpload } from "@lifesg/react-design-system/file-upload";
-
-<FileUpload
-    title="Upload supporting documents"
-    description="PDF, JPG, or PNG. Max 5 MB each."
-    accept=".pdf,.jpg,.png"
-    fileItems={fileItems}
-    onChange={(files) => {}}
-    onDelete={(item) => {}}
-/>;
-```
-
-## Custom labels
-
-| Prop                             | Type     | Default          | Description                                       |
-| -------------------------------- | -------- | ---------------- | ------------------------------------------------- |
-| `customLabels.uploadButtonLabel` | `string` | `"Upload files"` | Label of the button that triggers the file dialog |
-
-## Props — `FileItemProps`
-
-| Prop                    | Type                        | Default | Description                                                                                                                                                                 |
-| ----------------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | Unique identifier used to target delete, edit, and sort operations.                                                                                                         |
-| `name` \*               | `string`                    | —       | The display name of the file                                                                                                                                                |
-| `type` \*               | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                                                       |
-| `size` \*               | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                                                                   |
-| `description`           | `string`                    | —       | The alt text or description of the file                                                                                                                                     |
-| `progress`              | `number`                    | —       | Upload progress expressed as a fraction between 0 and 1. When provided, a progress indicator is rendered on the file item.                                                  |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate an upload failure. Accepts a plain string or a React node for richer error display.                                        |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry. When not provided, a PDF icon is displayed for PDF files only; other file types show no default icon. |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                                                                     |
-
-## Props — `FileInputProps`
-
-| Prop        | Type                                 | Default | Description                                                      |
-| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
-| `accept`    | `string`                             | —       | Defines the file types that is accepted                          |
-| `capture`   | `boolean \| "user" \| "environment"` | —       | Specifies which camera to use for capture of image or video data |
-| `multiple`  | `boolean`                            | —       | Specifies if user is allowed to select more than one file.       |
-| `disabled`  | `boolean`                            | —       | —                                                                |
-| `id`        | `string`                             | —       | —                                                                |
-| `className` | `string`                             | —       | —                                                                |
-| `name`      | `string`                             | —       | —                                                                |
-
-## Props — `FileUploadProps`
-
-| Prop                       | Type                                     | Default    | Description                                                                                                                                                                    |
-| -------------------------- | ---------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `title`                    | `string \| JSX.Element`                  | —          | Heading rendered at the top of the component. Accepts a plain string or a JSX element for rich formatting.                                                                     |
-| `description`              | `string \| JSX.Element`                  | —          | Supporting text rendered below `title`. Accepts a plain string or a JSX element for rich formatting.                                                                           |
-| `styleType`                | `FileUploadStyle`                        | "bordered" | Visual style variant for the component.                                                                                                                                        |
-| `maxFiles`                 | `number`                                 | —          | Maximum number of files the component will accept. Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.                                 |
-| `warning`                  | `string \| JSX.Element`                  | —          | Warning message rendered inside the component. Accepts a plain string or a JSX element for rich formatting.                                                                    |
-| `fileItems`                | `FileItemProps[]`                        | —          | Controlled list of file items displayed in the file list. Update this array in response to `onChange`, `onDelete`, `onEdit`, and `onSort` to reflect the current upload state. |
-| `editableFileItems`        | `boolean`                                | false      | When `true`, image file items render an editable description field. Editing triggers `onEdit` with the updated `FileItemProps`.                                                |
-| `fileDescriptionMaxLength` | `number`                                 | —          | Character limit for the description input on editable image file items. Only applies when `editableFileItems` is `true`.                                                       |
-| `descriptionRequired`      | `boolean`                                | true       | When `false`, the save button on an editable file item is enabled even when the description field is empty.                                                                    |
-| `descriptionLabel`         | `FormLabelProps`                         | —          | Overrides the default label and subtext for the description input field on editable file items.                                                                                |
-| `sortable`                 | `boolean`                                | false      | When `true`, file items can be reordered via drag-and-drop. The reordered list is emitted via `onSort`.                                                                        |
-| `errorMessage`             | `string \| JSX.Element`                  | —          | General error message rendered below the file list. Accepts a plain string or a JSX element for rich formatting.                                                               |
-| `readOnly`                 | `boolean`                                | —          | When `true`, the upload button and drop zone are hidden and file items are rendered without delete or edit controls.                                                           |
-| `customLabels`             | `{ uploadButtonLabel?: string }`         | —          | Overrides default label text for elements within the component.                                                                                                                |
-| `onChange`                 | `((files: File[]) => void)`              | —          | Called with the newly uploaded files. Receives only the files that fit within the remaining `maxFiles` slots.                                                                  |
-| `onEdit`                   | `((fileItem: FileItemProps) => void)`    | —          | Called when the user saves an edited description on a file item.                                                                                                               |
-| `onDelete`                 | `((fileItem: FileItemProps) => void)`    | —          | Called when the user clicks the delete button on a file item.                                                                                                                  |
-| `onSort`                   | `((fileItems: FileItemProps[]) => void)` | —          | Called after the user reorders file items via drag-and-drop. Only fired when `sortable` is `true`.                                                                             |
-| `accept`                   | `string`                                 | —          | Defines the file types that is accepted                                                                                                                                        |
-| `capture`                  | `boolean \| "user" \| "environment"`     | —          | Specifies which camera to use for capture of image or video data                                                                                                               |
-| `multiple`                 | `boolean`                                | —          | Specifies if user is allowed to select more than one file.                                                                                                                     |
-| `disabled`                 | `boolean`                                | —          | —                                                                                                                                                                              |
-| `id`                       | `string`                                 | —          | —                                                                                                                                                                              |
-| `className`                | `string`                                 | —          | —                                                                                                                                                                              |
-| `name`                     | `string`                                 | —          | —                                                                                                                                                                              |
-
-## Rules
-
--   Always manage `fileItems` state in the parent — the component does not store files internally.
--   Always handle `onChange` to convert incoming `File[]` into `FileItemProps[]` and add them to state.
--   Always handle `onDelete` to remove the corresponding item from state.
--   Use `maxFiles` to enforce the maximum number of attachments allowed by the backend.
--   Use `progress` on individual `FileItemProps` to show per-file upload progress.
--   Use `errorMessage` on individual `FileItemProps` to surface per-file upload errors.
--   Use the component-level `errorMessage` for overall validation errors (e.g. "At least one file is required").
--   Use `accept` (inherited from `<input type="file">`) to restrict file types to what the backend accepts.
-
-## Anti-patterns
-
--   Do not use without wiring `onChange` and `onDelete` — the list will not update.
--   Do not store files in component state inside the same component that renders `FileUpload` — hoist state to the form level.
--   Do not skip `id`, `name`, `type`, and `size` in `FileItemProps` — they are required fields.
--   Do not use `editableFileItems` for non-image files — description editing only applies to images.
diff --git a/skills/fds-build/resources/v4/components/footer.md b/skills/fds-build/resources/v4/components/footer.md
deleted file mode 100644
index 036792657b..0000000000
--- a/skills/fds-build/resources/v4/components/footer.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# Footer
-
-Import: `import { Footer } from "@lifesg/react-design-system/footer"`
-
-## When to use
-
-Place at the bottom of every page. Required on all pages.
-
-## Variants
-
-| Variant                 | When to use                                                      |
-| ----------------------- | ---------------------------------------------------------------- |
-| `<Footer />` (no props) | Standard pages — disclaimer links and copyright are theme-driven |
-| `links`                 | Pages with navigational footer links (max 2 columns)             |
-| `copyrightInfo`         | Custom copyright text required                                   |
-| `layout="stretch"`      | Full-width layout — pair with `Navbar layout="stretch"`          |
-
-## Usage
-
-```tsx
-import { Footer } from "@lifesg/react-design-system/footer";
-
-{
-    /* Standard footer — no props required */
-}
-<Footer />;
-
-{
-    /* Footer with navigation links */
-}
-<Footer
-    links={[
-        [
-            { children: "About us", href: "/about" },
-            { children: "Contact", href: "/contact" },
-        ],
-    ]}
-    lastUpdated={new Date("2025-01-01")}
-/>;
-```
-
-## Props — `DisclaimerLinks`
-
-| Prop                  | Type                      | Default | Description |
-| --------------------- | ------------------------- | ------- | ----------- |
-| `privacy`             | `DisclaimerTextLinkProps` | —       | —           |
-| `termsOfUse`          | `DisclaimerTextLinkProps` | —       | —           |
-| `reportVulnerability` | `DisclaimerTextLinkProps` | —       | —           |
-
-## Props — `FooterLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `data-options`   | `T`                        | —           | Any custom attributes you would like to pass to the link                                                      |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `FooterProps`
-
-| Prop                | Type                                   | Default   | Description                                                                                                                                                                                                                  |
-| ------------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `links`             | `FooterLinkProps<T>[][]`               | —         | The footer links. Multi array to present in different columns                                                                                                                                                                |
-| `showDownloadAddon` | `boolean`                              | —         | Indicates if the download app icons are to be present                                                                                                                                                                        |
-| `showResourceAddon` | `boolean`                              | —         | Indicates if additional app resources should be displayed. When both `showDownloadAddon` and `showResourceAddon` are `true`, `showDownloadAddon` takes priority and the resource add-on is not rendered.                     |
-| `children`          | `JSX.Element \| JSX.Element[]`         | —         | Custom component. This overrides the logo, links and download section                                                                                                                                                        |
-| `disclaimerLinks`   | `DisclaimerLinks`                      | —         | Override attributes for the built-in disclaimer links. Each supplied key is merged with the theme defaults. Omitted keys fall back to the default URLs for the active theme.                                                 |
-| `copyrightInfo`     | `string`                               | —         | A custom copyright text                                                                                                                                                                                                      |
-| `logoSrc`           | `string`                               | —         | Custom logo source                                                                                                                                                                                                           |
-| `logoAlt`           | `string`                               | —         | Custom logo alt text                                                                                                                                                                                                         |
-| `lastUpdated`       | `Date`                                 | —         | Date displayed in the copyright line as "Last updated D MMMM YYYY".                                                                                                                                                          |
-| `onFooterLinkClick` | `((link: FooterLinkProps<T>) => void)` | —         | Called when a footer navigation link is clicked. Receives the full `FooterLinkProps` for the clicked link. If the link defines its own `onClick` handler, that handler takes priority and `onFooterLinkClick` is not called. |
-| `layout`            | `"default" \| "stretch"`               | "default" | Controls whether the footer content is constrained to a maximum width or stretches to fill the full viewport width.                                                                                                          |
-| `id`                | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `className`         | `string`                               | —         | —                                                                                                                                                                                                                            |
-| `hideLogo`          | `boolean`                              | —         | Suppresses the logo even when a `logoSrc` or a theme-based logo URL is available.                                                                                                                                            |
-
-## Rules
-
--   Use `<Footer />` with no props for standard pages — do not add unnecessary props.
--   `layout` must match the Navbar `layout` prop; do not mix `"default"` and `"stretch"`.
--   Wrap the app in a flex column layout so the footer stays pinned to the bottom on short pages:
-    -   Outer wrapper: `display: flex; flex-direction: column; min-height: 100vh`
-    -   Page content area: `flex: 1`
--   Disclaimer link text cannot be customised — only `href` and event handlers can be overridden via `disclaimerLinks`.
--   `copyrightInfo` overrides `lastUpdated` — do not set both.
--   When `showDownloadAddon` and `showResourceAddon` are both `true`, download takes precedence.
--   `links` is a 2D array: each inner array is one column of links.
-
-## Anti-patterns
-
--   Do not omit the flex layout wrapper — the footer will not stick to the bottom on short pages.
--   Do not pass `children` and `links` together — `children` replaces the top section entirely.
--   Do not customise disclaimer link labels — they are legally fixed strings.
diff --git a/skills/fds-build/resources/v4/components/form-e-signature.md b/skills/fds-build/resources/v4/components/form-e-signature.md
deleted file mode 100644
index 4e98aa3820..0000000000
--- a/skills/fds-build/resources/v4/components/form-e-signature.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# Form.ESignature
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Forms that legally require a handwritten signature from the user (e.g. consent forms, declarations, agreements).
--   Use `description` to guide the user on how to sign (e.g. "Sign within the box using your mouse or touchscreen").
-
-## Form-wrapper props
-
-| Prop                | Type                        | Description                             |
-| ------------------- | --------------------------- | --------------------------------------- |
-| `label`             | `string \| FormLabelProps`  | Field label                             |
-| `errorMessage`      | `string \| React.ReactNode` | Error message displayed below the field |
-| `data-error-testid` | `string`                    | Test identifier for the error message   |
-
-## Props
-
-| Prop              | Type                                | Default        | Description                                                                                                                                      |
-| ----------------- | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`       | `string`                            | —              | —                                                                                                                                                |
-| `id`              | `string`                            | —              | —                                                                                                                                                |
-| `disabled`        | `boolean`                           | —              | —                                                                                                                                                |
-| `description`     | `string`                            | —              | Text rendered below the signature area.                                                                                                          |
-| `loadingLabel`    | `string`                            | "Uploading..." | Label displayed alongside the upload progress bar.                                                                                               |
-| `loadingProgress` | `number`                            | —              | When set to a number, replaces the signature area with an upload progress indicator. Remove or set to `undefined` to restore the signature area. |
-| `value`           | `string`                            | —              | The current signature as a base64 image dataURL. Pass `undefined` or omit to render the empty "Add signature" state.                             |
-| `onChange`        | `((value: string \| null) => void)` | —              | Called when the user saves a signature.                                                                                                          |
-| `label`           | `FormLabelProps \| string`          | —              | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`    | `string \| React.ReactNode`         | —              | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`      | `FormElementLayoutType`             | —              | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`         | `ColSpan`                           | —              | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`          | `ColSpan`                           | —              | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`          | `ColSpan`                           | —              | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`          | `ColSpan`                           | —              | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`          | `ColSpan`                           | —              | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`          | `ColSpan`                           | —              | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`         | `ColSpan`                           | —              | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Pass `value` and `onChange` together for controlled usage; the value is a base64-encoded PNG string.
--   Use `loadingProgress` and `loadingLabel` to indicate server upload progress after the signature is submitted.
--   Set `errorMessage` when signature validation fails (e.g. canvas is empty on submit).
--   Use `disabled` when the signature field should be locked (e.g. after submission or in a locked step).
--   `value` and the `onChange` return value are both base64-encoded PNG strings.
--   `loadingProgress` and `loadingLabel` are used to show upload progress after the signature is captured.
-
-## Anti-patterns
-
--   Do not use for typed signatures or checkbox confirmations — this component is for handwritten drawing input only.
--   Do not store the raw base64 string in a URL parameter or cookie — it is large; use server-side storage.
--   Do not omit `description` — users need guidance on where and how to draw their signature.
diff --git a/skills/fds-build/resources/v4/components/form-otp-verification.md b/skills/fds-build/resources/v4/components/form-otp-verification.md
deleted file mode 100644
index 59780485e5..0000000000
--- a/skills/fds-build/resources/v4/components/form-otp-verification.md
+++ /dev/null
@@ -1,175 +0,0 @@
-# Form.OtpVerification
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Flows that require identity verification via a one-time password sent to a phone number or email address.
--   The component manages the full multi-step UI: input contact → send OTP → enter OTP → verify.
-
-## Usage
-
-### Email variant
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
-
-const EmailOtpExample = () => {
-    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
-    const [email, setEmail] = useState("");
-
-    return (
-        <Form.OtpVerification
-            label="Verify your email"
-            type="email"
-            emailValue={email}
-            onEmailChange={setEmail}
-            otpState={otpState}
-            onOtpStateChange={setOtpState}
-            onSendOtp={async () => {
-                // Throw to surface the error inline — do NOT return an error string
-                const res = await api.sendEmailOtp(email);
-                if (!res.ok) throw new Error("Invalid email address");
-            }}
-            onVerifyOtp={async (otpInput) => {
-                const res = await api.verifyOtp(otpInput);
-                if (!res.ok)
-                    throw new Error("Incorrect OTP. Please try again.");
-            }}
-            onResendOtp={async () => {
-                const res = await api.sendEmailOtp(email);
-                if (!res.ok) throw new Error("Could not resend OTP");
-            }}
-            verifyOtpCountdownTimer={300}
-        />
-    );
-};
-```
-
-### Phone variant (`fixedCountry` required)
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-import { OtpVerificationState } from "@lifesg/react-design-system/otp-verification";
-import { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input";
-
-const PhoneOtpExample = () => {
-    const [otpState, setOtpState] = useState<OtpVerificationState>("default");
-    const [phone, setPhone] = useState<PhoneNumberInputValue>({ number: "" });
-
-    return (
-        <Form.OtpVerification
-            label="Verify your mobile number"
-            type="phone-number"
-            phoneNumberValue={phone}
-            onPhoneNumberChange={setPhone}
-            fixedCountry // required when type="phone-number"; hides country selector
-            otpState={otpState}
-            onOtpStateChange={setOtpState}
-            onSendOtp={async () => {
-                const res = await api.sendSmsOtp(phone.number);
-                if (!res.ok) throw new Error("Invalid phone number");
-            }}
-            onVerifyOtp={async (otpInput) => {
-                const res = await api.verifyOtp(otpInput);
-                if (!res.ok)
-                    throw new Error("Incorrect OTP. Please try again.");
-            }}
-            onResendOtp={async () => {
-                const res = await api.sendSmsOtp(phone.number);
-                if (!res.ok) throw new Error("Could not resend OTP");
-            }}
-            verifyOtpCountdownTimer={180}
-        />
-    );
-};
-```
-
-**Key gotcha — callbacks must throw, not return error strings.**
-The component catches the thrown error and displays `error.message` inline.
-Returning a value (or nothing) always signals success and advances the state machine.
-
-## Phone-number-specific props
-
-| Prop                  | Type                                     | Description                                            |
-| --------------------- | ---------------------------------------- | ------------------------------------------------------ |
-| `phoneNumberValue`    | `PhoneNumberInputValue`                  | Controlled phone number value                          |
-| `onPhoneNumberChange` | `(value: PhoneNumberInputValue) => void` | Called when phone input changes                        |
-| `fixedCountry`        | `true`                                   | Locks the country code; required for phone-number type |
-
-## Email-specific props
-
-| Prop            | Type                      | Description                     |
-| --------------- | ------------------------- | ------------------------------- |
-| `emailValue`    | `string`                  | Controlled email value          |
-| `onEmailChange` | `(value: string) => void` | Called when email input changes |
-
-## PhoneNumberInputValue
-
-| Prop          | Type     | Description                 |
-| ------------- | -------- | --------------------------- |
-| `number`      | `string` | Phone number                |
-| `countryCode` | `string` | Country code (e.g. `"+65"`) |
-
-## Form-specific props
-
-| Prop    | Type                       | Description |
-| ------- | -------------------------- | ----------- |
-| `label` | `string \| FormLabelProps` | Field label |
-
-## Props
-
-| Prop                      | Type                                                                                                                                                                                                                                      | Default | Description                                                                                                                                      |
-| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `id`                      | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
-| `disabled`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
-| `readOnly`                | `boolean`                                                                                                                                                                                                                                 | —       | —                                                                                                                                                |
-| `className`               | `string`                                                                                                                                                                                                                                  | —       | —                                                                                                                                                |
-| `inputId`                 | `string`                                                                                                                                                                                                                                  | —       | The `id` attribute applied to the contact input field.                                                                                           |
-| `otpState` \*             | `OtpVerificationState`                                                                                                                                                                                                                    | —       | The current step in the OTP verification flow. Controls which sections are rendered.                                                             |
-| `onOtpStateChange` \*     | `(state: OtpVerificationState) => void`                                                                                                                                                                                                   | —       | Called when the component transition to a new `otpState`.                                                                                        |
-| `onSendOtp`               | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user initiates sending the OTP. On resolution, the component transitions to `"sent"`.                                            |
-| `sendOtpError`            | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the contact input after a failed attempt.                                                                          |
-| `sendOtpPlaceholder`      | `string`                                                                                                                                                                                                                                  | —       | Placeholder text for the contact input field.                                                                                                    |
-| `otpReminderInterval`     | `number`                                                                                                                                                                                                                                  | 120     | Interval in seconds at which an accessibility announcement is made, reminding the user how many seconds remain before they can resend the OTP.   |
-| `type` \*                 | `"email"`                                                                                                                                                                                                                                 | —       | Discriminant that sets the contact input to email mode.                                                                                          |
-| `otpValue`                | `\| { /** * Static text displayed before the OTP input. */ prefix?: string; /** * Character displayed between the `prefix` and OTP input.. */ separator?: string; /** * The current OTP string entered by the user. */ value?: string; }` | —       | Controlled state of the OTP input field.                                                                                                         |
-| `onOtpChange`             | `((value: string) => void)`                                                                                                                                                                                                               | —       | Called when the OTP input value changes.                                                                                                         |
-| `onVerifyOtp`             | `((input: string) => Promise<void>)`                                                                                                                                                                                                      | —       | Called when the user submits the OTP for verification. On resolution the component transitions to `"verified"`.                                  |
-| `verifyOtpCountdownTimer` | `number`                                                                                                                                                                                                                                  | 60      | Duration in seconds of the resend cooldown after an OTP is sent.                                                                                 |
-| `onResendOtp`             | `(() => Promise<void>)`                                                                                                                                                                                                                   | —       | Called when the user requests to resend the OTP from the verification step.                                                                      |
-| `showVerifyOtpThumbnail`  | `boolean`                                                                                                                                                                                                                                 | —       | Whether to display the thumbnail image in the OTP verification section, visible in the `"sent"` state.                                           |
-| `verifyOtpIcon`           | `React.ReactNode`                                                                                                                                                                                                                         | —       | Custom icon in the OTP verification section, visible in the `"sent"` state.                                                                      |
-| `verifyOtpTitle`          | `string`                                                                                                                                                                                                                                  | —       | Custom heading in the OTP verification section, visible in the `"sent"` state.                                                                   |
-| `verifyOtpMessage`        | `string`                                                                                                                                                                                                                                  | —       | Custom body text in the OTP verification section, visible in the `"sent"` state.                                                                 |
-| `verifyOtpError`          | `string`                                                                                                                                                                                                                                  | —       | Error message displayed below the OTP input after a failed verification attempt.                                                                 |
-| `label`                   | `FormLabelProps \| string`                                                                                                                                                                                                                | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `layoutType`              | `FormElementLayoutType`                                                                                                                                                                                                                   | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`                  | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`                 | `ColSpan`                                                                                                                                                                                                                                 | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Control `otpState` externally and update it via `onOtpStateChange` — the component does not manage its own state.
--   `onSendOtp`, `onVerifyOtp`, and `onResendOtp` must be async functions; throw an error inside them to trigger the corresponding error display (`sendOtpError`, `verifyOtpError`).
--   Always pass `fixedCountry` when `type="phone-number"` — the prop is required to lock the country selector.
--   Set `verifyOtpCountdownTimer` to match the actual OTP expiry window from your backend.
--   Pass `sendOtpError` and `verifyOtpError` from server responses so users receive actionable feedback.
--   `otpState` is externally controlled — the component does not manage its own flow state.
--   `fixedCountry` is required when `type="phone-number"`.
-
-## Anti-patterns
-
--   Do not try to manage the step sequence manually — use `otpState` and let `onOtpStateChange` drive transitions.
--   Do not use for non-identity-verification scenarios — for simple code inputs, use a plain `Form.Input`.
--   Do not omit `fixedCountry` for `type="phone-number"` — the country selector will be shown unexpectedly.
--   Do not use synchronous functions for `onSendOtp`, `onVerifyOtp`, or `onResendOtp` — they must return Promises.
diff --git a/skills/fds-build/resources/v4/components/form-predictive-text-input.md b/skills/fds-build/resources/v4/components/form-predictive-text-input.md
deleted file mode 100644
index 05bf4536ee..0000000000
--- a/skills/fds-build/resources/v4/components/form-predictive-text-input.md
+++ /dev/null
@@ -1,108 +0,0 @@
-# Form.PredictiveTextInput
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   The option set is too large for a static dropdown and must be fetched dynamically (e.g. address lookup, postal code search, product search, large dataset autocomplete).
--   Users need to type to narrow down results before selecting.
-
-## Usage
-
-### Location search — three extractors working together
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-interface Location {
-    id: string;
-    name: string;
-    address: string;
-}
-
-const LocationSearchExample = () => {
-    const [selected, setSelected] = useState<Location | undefined>();
-
-    const fetchOptions = async (input: string): Promise<Location[]> => {
-        const res = await api.searchLocations(input);
-        return res.results;
-    };
-
-    return (
-        <Form.PredictiveTextInput<Location, string>
-            label="Search location"
-            minimumCharacters={3} // fetch only after 3 chars typed
-            fetchOptions={fetchOptions}
-            // Populates the text field when an option is selected
-            valueExtractor={(item) => item.name}
-            // Populates each row in the dropdown list
-            listExtractor={(item) => `${item.name} — ${item.address}`}
-            // Displays the chosen value as a chip / confirmation label
-            displayValueExtractor={(item) => item.name}
-            selectedOption={selected}
-            onSelectOption={(item) => setSelected(item ?? undefined)}
-        />
-    );
-};
-```
-
-**How the three extractors divide responsibility:**
-
-| Extractor               | When it runs               | What it renders                  |
-| ----------------------- | -------------------------- | -------------------------------- |
-| `listExtractor`         | While the dropdown is open | Each option row in the list      |
-| `valueExtractor`        | After selection            | The text field value             |
-| `displayValueExtractor` | After selection            | The chip / confirmed-value label |
-
-Debounce `fetchOptions` internally (e.g. with `setTimeout` or a library) — the component calls it on every character change.
-
-## Props
-
-| Prop                    | Type                                            | Default         | Description                                                                                                                                                 |
-| ----------------------- | ----------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                        | —               | —                                                                                                                                                           |
-| `className`             | `string`                                        | —               | —                                                                                                                                                           |
-| `minimumCharacters`     | `number`                                        | 3               | Minimum number of characters the user must type before `fetchOptions` is called and the dropdown opens.                                                     |
-| `placeholder`           | `string`                                        | "Enter here..." | Placeholder text shown inside the input when it is empty.                                                                                                   |
-| `readOnly`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `disabled`              | `boolean`                                       | —               | —                                                                                                                                                           |
-| `error`                 | `boolean`                                       | —               | Applies error styling to the input wrapper.                                                                                                                 |
-| `selectedOption`        | `T`                                             | —               | The currently confirmed option. Updating this prop resets the displayed text and clears the dropdown options list. Pass `undefined` to clear the selection. |
-| `alignment`             | `DropdownAlignmentType`                         | —               | Horizontal alignment of the dropdown relative to the input element.                                                                                         |
-| `dropdownZIndex`        | `number`                                        | —               | CSS `z-index` applied to the dropdown overlay.                                                                                                              |
-| `dropdownRootNode`      | `RefObject<HTMLElement>`                        | document.body   | The root element that contains the dropdown element.                                                                                                        |
-| `dropdownWidth`         | `string`                                        | —               | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                  |
-| `fetchOptions` \*       | `(input: string) => Promise<T[]>`               | —               | Async function called with the current input string to retrieve matching options. A rejected promise triggers the error state in the dropdown.              |
-| `valueExtractor`        | `((item: T) => V)`                              | —               | Derives the submitted value `V` from a selected item `T`.                                                                                                   |
-| `listExtractor`         | `((item: T) => string \| ListItemDisplayProps)` | —               | Derives the display label for each option in the dropdown list.                                                                                             |
-| `displayValueExtractor` | `((option: T) => string)`                       | —               | Derives the text shown in the input field after an option is selected.                                                                                      |
-| `onSelectOption`        | `\| ((option: T, extractedValue: V) => void)`   | —               | Called when the user selects an option from the dropdown or clears the field.                                                                               |
-| `label`                 | `FormLabelProps \| string`                      | —               | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                    |
-| `errorMessage`          | `string \| React.ReactNode`                     | —               | Inline error text rendered below the input.                                                                                                                 |
-| `layoutType`            | `FormElementLayoutType`                         | —               | Controls whether the container uses flex layout or a responsive column grid.                                                                                |
-| `xxlCols`               | `ColSpan`                                       | —               | Column span at the `xxl` breakpoint.                                                                                                                        |
-| `xlCols`                | `ColSpan`                                       | —               | Column span at the `xl` breakpoint.                                                                                                                         |
-| `lgCols`                | `ColSpan`                                       | —               | Column span at the `lg` breakpoint.                                                                                                                         |
-| `mdCols`                | `ColSpan`                                       | —               | Column span at the `md` breakpoint.                                                                                                                         |
-| `smCols`                | `ColSpan`                                       | —               | Column span at the `sm` breakpoint.                                                                                                                         |
-| `xsCols`                | `ColSpan`                                       | —               | Column span at the `xs` breakpoint.                                                                                                                         |
-| `xxsCols`               | `ColSpan`                                       | —               | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set.            |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   `fetchOptions` is required — it must be async and return an array of option objects.
--   Debounce inside `fetchOptions` to avoid flooding the API on every keystroke.
--   Set `minimumCharacters` to a value that produces useful results — `3` is the default, but adjust for your data source.
--   Always provide `valueExtractor`, `listExtractor`, and `displayValueExtractor` — omitting any of these produces inconsistent display behaviour.
--   Use `selectedOption` and `onSelectOption` for controlled selection.
--   Set `errorMessage` when the selected option fails validation.
--   `fetchOptions` is called on every keystroke after `minimumCharacters` is reached — debounce inside the function if needed.
--   Generic type `T` is the option object shape; `V` is the extracted value type.
-
-## Anti-patterns
-
--   Do not use when the full option list is small and known upfront — use `Form.Select` or `Form.MultiSelect` instead.
--   Do not use `fetchOptions` without debouncing — each keystroke fires a new call.
--   Do not omit extractor functions — the component cannot determine what to display without them.
diff --git a/skills/fds-build/resources/v4/components/form-slider.md b/skills/fds-build/resources/v4/components/form-slider.md
deleted file mode 100644
index cdc911c2f5..0000000000
--- a/skills/fds-build/resources/v4/components/form-slider.md
+++ /dev/null
@@ -1,116 +0,0 @@
-# Form.Slider
-
-Import: `import { Form } from "@lifesg/react-design-system/form"`
-
-## When to use
-
--   Selecting a single numeric value within a bounded range (e.g. budget, age, percentage, rating).
--   When the relative position of a value matters more than typing an exact number.
-
-## Usage
-
-### Basic slider with display-only `onChange` and API-safe `onChangeEnd`
-
-```tsx
-import { useState } from "react";
-import { Form } from "@lifesg/react-design-system/form";
-
-const BudgetSlider = () => {
-    const [displayValue, setDisplayValue] = useState(500);
-
-    const handleChange = (value: number) => {
-        // Safe: fires continuously during drag — update display only
-        setDisplayValue(value);
-    };
-
-    const handleChangeEnd = (value: number) => {
-        // Safe: fires once on mouse/touch release — trigger API calls here
-        fetchResults({ maxBudget: value });
-    };
-
-    return (
-        <Form.Slider
-            label={`Budget: $${displayValue}`}
-            min={0}
-            max={2000}
-            step={100}
-            value={displayValue}
-            onChange={handleChange}
-            onChangeEnd={handleChangeEnd}
-            showSliderLabels
-            sliderLabelPrefix="$"
-            showIndicatorLabel
-            indicatorLabelPrefix="$"
-        />
-    );
-};
-```
-
-**Never put API calls or expensive state updates in `onChange`** — it fires on every pixel of drag movement. Use `onChangeEnd` instead.
-
-### Custom track colours
-
-`colors` takes a two-element array: `[leftTrackColor, rightTrackColor]`.
-
-```tsx
-<Form.Slider
-    label="Risk level"
-    min={0}
-    max={10}
-    colors={["#4caf50", "#e0e0e0"]}
-    showSliderLabels
-    sliderLabelSuffix=" / 10"
-/>
-```
-
-## Props
-
-| Prop                   | Type                                   | Default | Description                                                                                                                                      |
-| ---------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`                | `number`                               | 0       | The controlled value of the thumb.                                                                                                               |
-| `ariaLabel`            | `string`                               | —       | Accessible label for the thumb.                                                                                                                  |
-| `onChange`             | `((value: number) => void)`            | —       | Called on every selection change.                                                                                                                |
-| `onChangeEnd`          | `((value: number) => void)`            | —       | Called when a thumb is released after selection is complete.                                                                                     |
-| `className`            | `string`                               | —       | —                                                                                                                                                |
-| `id`                   | `string`                               | —       | —                                                                                                                                                |
-| `min`                  | `number`                               | 0       | The lower bound of the slider range.                                                                                                             |
-| `max`                  | `number`                               | 100     | The upper bound of the slider range.                                                                                                             |
-| `step`                 | `number`                               | 1       | The interval between selectable values.                                                                                                          |
-| `disabled`             | `boolean`                              | —       | —                                                                                                                                                |
-| `readOnly`             | `boolean`                              | —       | —                                                                                                                                                |
-| `colors`               | `(string)[]`                           | —       | Colours applied to each track segment in order. The array length should equal to `numOfThumbs + 1`.                                              |
-| `showSliderLabels`     | `boolean`                              | —       | Renders label text at the minimum and maximum ends of the track.                                                                                 |
-| `sliderLabelPrefix`    | `string`                               | —       | Text prepended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                         |
-| `sliderLabelSuffix`    | `string`                               | —       | Text appended to each slider label value. Ignored when `renderSliderLabel` is provided.                                                          |
-| `showIndicatorLabel`   | `boolean`                              | —       | Renders a label above the slider showing the current selection.                                                                                  |
-| `indicatorLabelPrefix` | `string`                               | —       | Text prepended to the indicator label value.                                                                                                     |
-| `indicatorLabelSuffix` | `string`                               | —       | Text appended to the indicator label value.                                                                                                      |
-| `renderSliderLabel`    | `((value: number) => React.ReactNode)` | —       | Custom renderer for the slider labels shown at the min and max track ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.    |
-| `label`                | `FormLabelProps \| string`             | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
-| `errorMessage`         | `string \| React.ReactNode`            | —       | Inline error text rendered below the input.                                                                                                      |
-| `layoutType`           | `FormElementLayoutType`                | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
-| `xxlCols`              | `ColSpan`                              | —       | Column span at the `xxl` breakpoint.                                                                                                             |
-| `xlCols`               | `ColSpan`                              | —       | Column span at the `xl` breakpoint.                                                                                                              |
-| `lgCols`               | `ColSpan`                              | —       | Column span at the `lg` breakpoint.                                                                                                              |
-| `mdCols`               | `ColSpan`                              | —       | Column span at the `md` breakpoint.                                                                                                              |
-| `smCols`               | `ColSpan`                              | —       | Column span at the `sm` breakpoint.                                                                                                              |
-| `xsCols`               | `ColSpan`                              | —       | Column span at the `xs` breakpoint.                                                                                                              |
-| `xxsCols`              | `ColSpan`                              | —       | Column span at the `xxs` (smallest) breakpoint. Acts as the base value. All larger breakpoints fall back to this when their own prop is not set. |
-
-## Rules
-
--   Always supply a `label` so the field is accessible.
--   Always set `min` and `max` to meaningful bounds for the use case.
--   Use `step` to restrict values to meaningful increments (e.g. `step={500}` for a budget slider).
--   Use `onChangeEnd` for expensive operations (API calls, heavy computations) — `onChange` fires on every pixel of movement.
--   Enable `showSliderLabels` so users know the range bounds.
--   Enable `showIndicatorLabel` so users can see the current value while dragging.
--   Provide `ariaLabel` when the label alone does not fully describe the slider's purpose to screen readers.
--   `onChange` fires continuously during drag; use `onChangeEnd` for expensive operations such as API calls.
--   `colors` array format is `[leftTrack, rightTrack]`.
-
-## Anti-patterns
-
--   Do not use `onChange` to trigger API calls — use `onChangeEnd` to avoid flooding the network.
--   Do not use when the user needs to enter a precise value — prefer a number input in that case.
--   Do not omit `min` and `max` — the defaults (0–100) may not be appropriate for the domain.
diff --git a/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md b/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
deleted file mode 100644
index 43c2def61d..0000000000
--- a/skills/fds-build/resources/v4/components/fullscreen-image-carousel.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# FullscreenImageCarousel
-
-Import: `import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel"`
-
-## When to use
-
-Use to display a fullscreen overlay carousel of images or custom content (e.g. PDFs, videos) with thumbnail navigation, zoom, and optional delete controls.
-
-## Sub-components
-
--   `FullscreenImageCarouselItemProps` — union of `FullscreenImageCarouselImageItemProps` and `FullscreenImageCarouselCustomItemProps`
-
-## Usage
-
-### Mixed image and custom items
-
-Items use a discriminated union on `type`. Image items may omit `type` (defaults to image); custom items **must** set `type: "custom"` and provide `renderContent`.
-
-```tsx
-import { useState } from "react";
-import { FullscreenImageCarousel } from "@lifesg/react-design-system/fullscreen-image-carousel";
-
-const DocViewer = () => {
-    const [show, setShow] = useState(false);
-
-    const items = [
-        // Image item — type may be omitted
-        {
-            src: "https://example.com/photo.jpg",
-            alt: "Site photo",
-            fileName: "photo.jpg",
-            fileSize: "1.2 MB",
-        },
-        // Custom item — type is required
-        {
-            type: "custom" as const,
-            itemLabel: "PDF",
-            thumbnailSrc: "https://example.com/pdf-thumb.svg",
-            renderContent: () => (
-                <iframe
-                    src="https://example.com/document.pdf"
-                    title="PDF preview"
-                    style={{ width: "100%", height: "100%", border: "none" }}
-                />
-            ),
-        },
-    ];
-
-    const handleDelete = (item, index) => {
-        // Remove the item from your state; the delete button only appears
-        // because onDelete is provided.
-        removeItem(index);
-    };
-
-    return (
-        <>
-            <button onClick={() => setShow(true)}>View files</button>
-            <FullscreenImageCarousel
-                show={show}
-                items={items}
-                onClose={() => setShow(false)}
-                onDelete={handleDelete} // omit to hide delete button
-                showFirstAndLastNav
-            />
-        </>
-    );
-};
-```
-
-## Props — `FullscreenImageCarouselRef`
-
-| Prop                  | Type                                 | Default | Description                                                               |
-| --------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------- |
-| `currentItemIndex` \* | `number`                             | —       | Zero-based index of the currently visible item.                           |
-| `setCurrentItem` \*   | `(currentItemIndex: number) => void` | —       | Navigates directly to the item at the given zero-based index.             |
-| `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
-| `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
-
-## Props — `FullscreenImageCarouselProps`
-
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
-
-## Props — `FullscreenImageCarouselImageItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Props — `FullscreenImageCarouselCustomItemProps`
-
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
-
-## Props — `ImageDimension`
-
-| Prop        | Type     | Default | Description |
-| ----------- | -------- | ------- | ----------- |
-| `width` \*  | `number` | —       | —           |
-| `height` \* | `number` | —       | —           |
-
-## Props — `FullscreenImageCarouselItemProps`
-
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
-
-## Rules
-
--   Always provide `show` and `items` — both are required.
--   Always wire `onClose` to set `show` to `false`; the component does not close itself.
--   Do not reorder the `items` array while a delete is in flight.
--   The delete button only appears when `onDelete` is provided — omit the prop to hide the button entirely.
-
-## Anti-patterns
-
--   Do not use for inline image galleries — this component renders as a fullscreen modal overlay.
diff --git a/skills/fds-build/resources/v4/components/histogram-slider.md b/skills/fds-build/resources/v4/components/histogram-slider.md
deleted file mode 100644
index 9c7501df95..0000000000
--- a/skills/fds-build/resources/v4/components/histogram-slider.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# HistogramSlider
-
-Import: `import { HistogramSlider } from "@lifesg/react-design-system/histogram-slider"`
-
-A range slider with a histogram distribution chart above it — used in filter panels where showing the value distribution helps users pick a range (e.g. price range, age range).
-
-## Props — `HistogramBinProps`
-
-| Prop          | Type     | Default | Description                                              |
-| ------------- | -------- | ------- | -------------------------------------------------------- |
-| `count` \*    | `number` | —       | Number of items that fall within this bin's value range. |
-| `minValue` \* | `number` | —       | Lower bound of this bin's value range.                   |
-
-## Props — `HistogramSliderProps`
-
-| Prop               | Type                                   | Default | Description                                                                                                                                             |
-| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `className`        | `string`                               | —       | —                                                                                                                                                       |
-| `id`               | `string`                               | —       | —                                                                                                                                                       |
-| `bins` \*          | `HistogramBinProps[]`                  | —       | The set of bins to render as bars.                                                                                                                      |
-| `interval` \*      | `number`                               | —       | Controls the slider's step increment and minimum selectable range.                                                                                      |
-| `disabled`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `readOnly`         | `boolean`                              | —       | —                                                                                                                                                       |
-| `value`            | `[number, number]`                     | —       | The selected range as `[start, end]`. When omitted, the selection is initialised to `[minValue, minValue + interval]` derived from the provided `bins`. |
-| `showRangeLabels`  | `boolean`                              | —       | When `true`, displays the current start and end values above the histogram.                                                                             |
-| `rangeLabelPrefix` | `string`                               | —       | Text prepended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                            |
-| `rangeLabelSuffix` | `string`                               | —       | Text appended to each range label value. Has no effect when `renderRangeLabel` is provided.                                                             |
-| `ariaLabels`       | `[string, string]`                     | —       | Accessible labels for the two slider thumbs, as `[startLabel, endLabel]`.                                                                               |
-| `aria-labelledby`  | `string`                               | —       | ID of an element that labels the slider group.                                                                                                          |
-| `aria-describedby` | `string`                               | —       | ID of an element that describes the slider group.                                                                                                       |
-| `renderRangeLabel` | `((value: number) => React.ReactNode)` | —       | Custom renderer for each range label value. When provided, overrides the `rangeLabelPrefix` and `rangeLabelSuffix` combination.                         |
-| `onChange`         | `((value: [number, number]) => void)`  | —       | Called on every selection change.                                                                                                                       |
-| `onChangeEnd`      | `((value: [number, number]) => void)`  | —       | Called when a thumb is released after selection is complete.                                                                                            |
-| `renderEmptyView`  | `(() => React.ReactNode)`              | —       | Rendered in place of the histogram and slider when all bins have a count of zero.                                                                       |
-
-## Rules
-
--   `onChange` fires continuously during drag — do not put API calls here; use `onChangeEnd`.
--   `interval` must match the gap between `minValue` of consecutive bins.
--   Always provide `ariaLabels` or `aria-labelledby` for accessibility.
--   Pair with `Filter` in a filter sidebar — `HistogramSlider` is not a `Form.*` component and does not use `label`/`errorMessage`.
diff --git a/skills/fds-build/resources/v4/components/image-button.md b/skills/fds-build/resources/v4/components/image-button.md
deleted file mode 100644
index bdcb2bd27c..0000000000
--- a/skills/fds-build/resources/v4/components/image-button.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# ImageButton
-
-Import: `import { ImageButton } from "@lifesg/react-design-system/image-button"`
-
-## Props
-
-| Prop                    | Type      | Default | Description                                                                  |
-| ----------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
-| `imgSrc` \*             | `string`  | —       | URL of the image to display inside the button.                               |
-| `selected`              | `boolean` | —       | Applies a selected visual style to indicate the button is the active choice. |
-| `error`                 | `boolean` | —       | Applies an error visual style to indicate a validation or selection error.   |
-| `focusableWhenDisabled` | `boolean` | false   | Keeps the button reachable via keyboard focus when `disabled` is `true`.     |
diff --git a/skills/fds-build/resources/v4/components/language-switcher.md b/skills/fds-build/resources/v4/components/language-switcher.md
deleted file mode 100644
index 655a6c359e..0000000000
--- a/skills/fds-build/resources/v4/components/language-switcher.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# LanguageSwitcher
-
-Import: `import { LanguageSwitcher } from "@lifesg/react-design-system/language-switcher"`
-
-## Props — `LanguageSwitcherProps`
-
-| Prop               | Type                                         | Default    | Description                                                                |
-| ------------------ | -------------------------------------------- | ---------- | -------------------------------------------------------------------------- |
-| `variant`          | `LanguageSwitcherVariant`                    | "dropdown" | Presentation mode.                                                         |
-| `selectedLanguage` | `LanguageSwitcherCode`                       | "en"       | The currently active language code.                                        |
-| `onSelectLanguage` | `((language: LanguageSwitcherCode) => void)` | —          | Called when the user selects a language different from `selectedLanguage`. |
-
-## Rules
-
--   `LanguageSwitcherCode` is the union of supported language codes: `"en" | "zh" | "ms" | "ta"`.
diff --git a/skills/fds-build/resources/v4/components/link-list.md b/skills/fds-build/resources/v4/components/link-list.md
deleted file mode 100644
index 471477e898..0000000000
--- a/skills/fds-build/resources/v4/components/link-list.md
+++ /dev/null
@@ -1,120 +0,0 @@
-# LinkList
-
-Import: `import { LinkList } from "@lifesg/react-design-system/link-list"`
-
-## When to use
-
-Use to present a set of related links — related articles, resources, or quick-access shortcuts. Use `style="small"` for compact contexts such as sidebars or footnotes.
-
-## Sub-components
-
-### LinkListItemProps
-
-| Prop                   | Type                                                   | Default | Description                                        |
-| ---------------------- | ------------------------------------------------------ | ------- | -------------------------------------------------- |
-| `title`                | `string`                                               | —       | Link label — required                              |
-| `description`          | `string`                                               | —       | First-level supporting text below the title        |
-| `secondaryDescription` | `string`                                               | —       | Second-level supporting text below the description |
-| `options`              | `T`                                                    | —       | Custom properties to pass to the item              |
-| `onClick`              | `(event: React.MouseEvent<HTMLAnchorElement>) => void` | —       | Per-item click handler — overrides `onItemClick`   |
-| `data-testid`          | `string`                                               | —       | Test identifier for the item                       |
-
-Inherits `HTMLAnchorElement` attributes (e.g. `href`, `target`).
-
-### Custom labels
-
-| Prop       | Type     | Default       | Description                    |
-| ---------- | -------- | ------------- | ------------------------------ |
-| `viewMore` | `string` | `"View more"` | Label for the show-more button |
-| `viewLess` | `string` | `"View less"` | Label for the show-less button |
-
-## Variants
-
-| `style`     | Usage                                                  |
-| ----------- | ------------------------------------------------------ |
-| `"default"` | Standard size — use in main content areas              |
-| `"small"`   | Compact — use in sidebars, footnotes, or dense layouts |
-
-| `loadMode` | Usage                                                         |
-| ---------- | ------------------------------------------------------------- |
-| `"eager"`  | All items loaded upfront; use `maxShown` to collapse the list |
-| `"lazy"`   | Items fetched on demand; requires `loadMore` and `onLoadMore` |
-
-## Usage
-
-```tsx
-import { LinkList } from "@lifesg/react-design-system/link-list";
-
-<LinkList
-    items={[
-        {
-            title: "Apply for a grant",
-            description: "Find out if you qualify.",
-            href: "/grants/apply",
-        },
-        { title: "Check application status", href: "/grants/status" },
-        { title: "Download forms", href: "/grants/forms" },
-    ]}
-    maxShown={2}
-/>;
-```
-
-## Props — `LinkListItemProps`
-
-| Prop                   | Type                                                        | Default | Description                                                                                          |
-| ---------------------- | ----------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `title` \*             | `string \| JSX.Element`                                     | —       | Primary label displayed as the link text.                                                            |
-| `description`          | `string \| JSX.Element`                                     | —       | Secondary text shown below the title.                                                                |
-| `secondaryDescription` | `JSX.Element`                                               | —       | Additional content rendered below the description. Accepts a JSX element for rich secondary content. |
-| `options`              | `T`                                                         | —       | Arbitrary custom data passed through to the `onItemClick` callback.                                  |
-| `onClick`              | `\| ((event: React.MouseEvent<HTMLAnchorElement>) => void)` | —       | Called when an item is clicked. This overrides the `onItemClick` event handler.                      |
-
-## Props — `LinkListBaseProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-
-## Props — `LinkListEagerProps`
-
-| Prop       | Type      | Default | Description                                                                                                                                                                               |
-| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `loadMode` | `"eager"` | —       | When `"eager"`, all items are rendered immediately.                                                                                                                                       |
-| `maxShown` | `number`  | —       | Maximum number of items shown before the list is truncated. Items beyond this count are hidden until the user activates the toggle. When omitted, all items are shown without truncation. |
-
-## Props — `LinkListLazyProps`
-
-| Prop            | Type                          | Default | Description                                                                               |
-| --------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `loadMode` \*   | `"lazy"`                      | —       | When `"lazy"`, items are loaded on demand.                                                |
-| `loadMore` \*   | `boolean`                     | —       | Whether more items are available to load. When `false`, the "View more" button is hidden. |
-| `onLoadMore` \* | `() => void \| Promise<void>` | —       | Called when the user activates the "View more" button.                                    |
-
-## Props — `LinkListProps`
-
-| Prop           | Type                                                                                      | Default   | Description                                                                                           |
-| -------------- | ----------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
-| `items` \*     | `LinkListItemProps<T>[]`                                                                  | —         | The list of link items to render.                                                                     |
-| `style`        | `LinkListStyle`                                                                           | "default" | Visual size variant applied to all items.                                                             |
-| `className`    | `string`                                                                                  | —         | —                                                                                                     |
-| `onItemClick`  | `\| (( item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement> ) => void)` | —         | Component-level click handler called for every item click, unless the item defines its own `onClick`. |
-| `customLabels` | `\| { viewMore?: string; viewLess?: string; }`                                            | —         | Overrides the default toggle button labels.                                                           |
-| `loadMode`     | `"eager"`                                                                                 | —         | When `"eager"`, all items are rendered immediately.                                                   |
-
-## Rules
-
--   Use `maxShown` when the list has many items to avoid overwhelming the user on first load (eager mode).
--   In `"lazy"` mode, both `loadMore` and `onLoadMore` are required.
--   `onItemClick` applies to all items; per-item `onClick` in `LinkListItemProps` overrides it for that item.
--   Use per-item `onClick` when individual items need different handling; use `onItemClick` for a uniform handler across all items.
--   Use `description` to give users enough context to choose the right link without clicking.
-
-## Anti-patterns
-
--   Using lazy mode without providing `onLoadMore` — the "View more" button will be non-functional.
--   Omitting `description` when link titles are ambiguous.
--   Using LinkList for non-link content — use a list or table instead.
diff --git a/skills/fds-build/resources/v4/components/local-nav.md b/skills/fds-build/resources/v4/components/local-nav.md
deleted file mode 100644
index 3fd0b9c364..0000000000
--- a/skills/fds-build/resources/v4/components/local-nav.md
+++ /dev/null
@@ -1,111 +0,0 @@
-# LocalNav
-
-Import: `import { LocalNavMenu, LocalNavDropdown } from "@lifesg/react-design-system/local-nav"`
-
-## When to use
-
-Use to let users navigate between sections on the same page (in-page navigation). Two components exist for different breakpoints — use both together for full responsive coverage.
-
-## Sub-components
-
-`LocalNavMenu`, `LocalNavDropdown`
-
-## Variants
-
-| Component          | Viewport          | Behaviour                                                              |
-| ------------------ | ----------------- | ---------------------------------------------------------------------- |
-| `LocalNavMenu`     | Desktop           | Vertical link list fixed to the left of page content, sticky on scroll |
-| `LocalNavDropdown` | Tablet and mobile | Renders inline, then sticks to top of viewport after scroll            |
-
-## Usage
-
-```tsx
-import {
-    LocalNavMenu,
-    LocalNavDropdown,
-} from "@lifesg/react-design-system/local-nav";
-
-const navItems = [
-    { title: "Overview", id: "overview" },
-    { title: "Eligibility", id: "eligibility" },
-    { title: "How to apply", id: "how-to-apply" },
-];
-
-{
-    /* Desktop */
-}
-<LocalNavMenu
-    items={navItems}
-    selectedItemIndex={activeIndex}
-    onNavItemSelect={(e, item, index) => {}}
-/>;
-
-{
-    /* Mobile / tablet */
-}
-<LocalNavDropdown
-    items={navItems}
-    selectedItemIndex={activeIndex}
-    defaultLabel="Jump to section"
-    onNavItemSelect={(e, item, index) => {}}
-/>;
-```
-
-## Props — `LocalNavItemProps`
-
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
-
-## Props — `LocalNavMenuItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                  |
-| ------------- | --------- | ------- | ------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item. |
-
-## Props — `LocalNavMenuProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                      |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------ |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps ) => React.ReactNode)`                            | —       | Custom renderer for each navigation item.        |
-| `className`          | `string`                                                                                                                   | —       | —                                                |
-| `id`                 | `string`                                                                                                                   | —       | —                                                |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.      |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.          |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item. |
-
-## Props — `LocalNavDropdownItemRenderProps`
-
-| Prop          | Type      | Default | Description                                                                                                                                |
-| ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `selected` \* | `boolean` | —       | Whether this item is the currently selected navigation item.                                                                               |
-| `stickied` \* | `boolean` | —       | Whether the dropdown is currently in its stickied (fixed) state. Use this to conditionally style items differently when the nav is pinned. |
-
-## Props — `LocalNavDropdownProps`
-
-| Prop                 | Type                                                                                                                       | Default | Description                                                                                                                                                                                                        |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `defaultLabel` \*    | `string \| React.ReactNode`                                                                                                | —       | Label shown in the collapsed trigger when no item is selected or when the dropdown is not stickied. Once the dropdown is stickied and an item is selected, the trigger displays the selected item's title instead. |
-| `stickyOffset`       | `number`                                                                                                                   | 0       | Distance in pixels from the top of the viewport while the dropdown is stickied.                                                                                                                                    |
-| `renderItem`         | `\| (( item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps ) => React.ReactNode)`                        | —       | Custom renderer for each item in the dropdown list.                                                                                                                                                                |
-| `className`          | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `id`                 | `string`                                                                                                                   | —       | —                                                                                                                                                                                                                  |
-| `onNavItemSelect` \* | `( e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number ) => void` | —       | Called when a navigation item is activated.                                                                                                                                                                        |
-| `items` \*           | `LocalNavItemProps[]`                                                                                                      | —       | The list of navigation items to render.                                                                                                                                                                            |
-| `selectedItemIndex`  | `number`                                                                                                                   | —       | Zero-based index of the currently selected item.                                                                                                                                                                   |
-
-## Rules
-
--   Use `LocalNavMenu` on desktop and `LocalNavDropdown` on tablet/mobile — render both and show/hide with CSS breakpoints.
--   Always implement scroll-spy: update `selectedItemIndex` as the user scrolls to keep the active item in sync with the visible section. This is not automatic.
--   Place `LocalNavMenu` on the left side of the page content area — not above it.
--   Set `stickyOffset` on `LocalNavDropdown` equal to the height of the fixed Navbar so the dropdown does not overlap it when sticky.
--   Keep item labels short — long labels cause overflow.
--   `defaultLabel` is required on `LocalNavDropdown` — it is the placeholder shown before any item is selected.
-
-## Anti-patterns
-
--   Do not use `LocalNavMenu` on tablet or mobile — use `LocalNavDropdown` instead.
--   Do not omit scroll-spy logic — without it, `selectedItemIndex` will not reflect the current section.
--   Do not place `LocalNavMenu` above the content — it must be a left sidebar.
diff --git a/skills/fds-build/resources/v4/components/masthead.md b/skills/fds-build/resources/v4/components/masthead.md
deleted file mode 100644
index 815ca760b9..0000000000
--- a/skills/fds-build/resources/v4/components/masthead.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Masthead
-
-Import: `import { Masthead } from "@lifesg/react-design-system/masthead"`
-
-## Props
-
-| Prop      | Type      | Default | Description                                                                                                       |
-| --------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
-| `stretch` | `boolean` | false   | Allows the masthead to span the full width of its container rather than constraining to the default layout width. |
-
-## Rules
-
--   No mandatory props.
--   `Masthead` is typically included via the `Navbar` `masthead` prop — use this standalone component only when rendering the masthead outside a Navbar context.
diff --git a/skills/fds-build/resources/v4/components/navbar.md b/skills/fds-build/resources/v4/components/navbar.md
deleted file mode 100644
index c904041390..0000000000
--- a/skills/fds-build/resources/v4/components/navbar.md
+++ /dev/null
@@ -1,269 +0,0 @@
-# Navbar
-
-Import: `import { Navbar } from "@lifesg/react-design-system/navbar"`
-
-## When to use
-
-Place at the top of every page. Required on all pages. Automatically collapses navigation items into a hamburger drawer on mobile.
-
-## Variants
-
-| `layout`    | When to use                                     |
-| ----------- | ----------------------------------------------- |
-| `"default"` | Centered content container — standard pages     |
-| `"stretch"` | Full-width content — must match Footer `layout` |
-
-## Usage
-
-### Complete Navbar with link items, a submenu, and an action button
-
-`NavItemProps` is a discriminated union on `itemType`. The default (no `itemType`) is a link item. Use `itemType: "component"` for custom elements like an avatar with a dropdown.
-
-```tsx
-import { useState } from "react";
-import { Navbar } from "@lifesg/react-design-system/navbar";
-
-const AppNavbar = () => {
-    const [selectedId, setSelectedId] = useState("home");
-
-    return (
-        <Navbar
-            masthead
-            selectedId={selectedId}
-            onItemClick={(item) => item.id && setSelectedId(item.id)}
-            items={{
-                desktop: [
-                    // itemType defaults to "link"
-                    {
-                        id: "home",
-                        children: "Home",
-                        href: "/",
-                    },
-                    {
-                        id: "guides",
-                        children: "Guides",
-                        href: "/guides",
-                        // subMenu items share the same shape as top-level link items
-                        subMenu: [
-                            {
-                                id: "guides-start",
-                                children: "Getting started",
-                                href: "/guides/start",
-                            },
-                            {
-                                id: "guides-api",
-                                children: "API reference",
-                                href: "/guides/api",
-                            },
-                        ],
-                    },
-                    {
-                        // itemType: "component" — renders arbitrary JSX; no href or id needed
-                        itemType: "component",
-                        children: <UserAvatar />,
-                    },
-                ],
-            }}
-            actionButtons={{
-                desktop: [
-                    {
-                        type: "button",
-                        args: { children: "Log in", styleType: "secondary" },
-                    },
-                ],
-            }}
-            resources={{
-                primary: { brandName: "MyService", logoSrc: "/logo.svg" },
-            }}
-        />
-    );
-};
-```
-
-Key points:
-
--   Omit `itemType` (or set `itemType: "link"`) for standard anchor items.
--   `subMenu` accepts the same `NavItemCommonProps` shape as top-level items.
--   `itemType: "component"` items take `children: JSX.Element`; they do not accept `id`, `href`, or `subMenu`.
--   `selectedId` matches against the `id` field of link items to highlight the active page.
-
-## Props — `NavItemLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemComponentProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavItemCommonProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `NavItemsProps`
-
-| Prop         | Type                | Default | Description                                                                |
-| ------------ | ------------------- | ------- | -------------------------------------------------------------------------- |
-| `desktop` \* | `NavItemProps<T>[]` | —       | Items rendered in the desktop navbar.                                      |
-| `mobile`     | `NavItemProps<T>[]` | —       | Items rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarActionButtonDownloadProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonCtaProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"button"`    | —       | —                                                                                                      |
-| `args` \*       | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonComponentProps`
-
-| Prop            | Type                         | Default | Description                                                                                            |
-| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"component"`                | —       | —                                                                                                      |
-| `args`          | `NavbarButtonComponentProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`                    | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarActionButtonsProps`
-
-| Prop         | Type                  | Default | Description                                                                         |
-| ------------ | --------------------- | ------- | ----------------------------------------------------------------------------------- |
-| `desktop` \* | `NavbarButtonProps[]` | —       | Action buttons rendered in the desktop navbar.                                      |
-| `mobile`     | `NavbarButtonProps[]` | —       | Action buttons rendered in the mobile drawer. Falls back to `desktop` when omitted. |
-
-## Props — `NavbarBrandingProps`
-
-| Prop           | Type     | Default | Description                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------- |
-| `brandName` \* | `string` | —       | The name of the brand, used for accessibility and alt text. |
-| `logoSrc` \*   | `string` | —       | The source URL for the brand logo image.                    |
-
-## Props — `NavbarResourcesProps`
-
-| Prop        | Type                  | Default | Description                                                         |
-| ----------- | --------------------- | ------- | ------------------------------------------------------------------- |
-| `primary`   | `NavbarBrandingProps` | —       | When omitted, a default logo derived from the active theme is used. |
-| `secondary` | `NavbarBrandingProps` | —       | When omitted, the secondary brand slot is hidden.                   |
-
-## Props — `NavbarSharedProps`
-
-| Prop                | Type                       | Default | Description                                                                |
-| ------------------- | -------------------------- | ------- | -------------------------------------------------------------------------- |
-| `resources`         | `NavbarResourcesProps`     | —       | Branding and logo resources for the navbar.                                |
-| `actionButtons`     | `NavbarActionButtonsProps` | —       | Action buttons rendered in the navbar and mobile drawer.                   |
-| `hideNavBranding`   | `boolean`                  | false   | Hides all brand logos from the navbar and drawer.                          |
-| `hideLinkIndicator` | `boolean`                  | false   | Hides the active-item underline indicator across desktop and drawer views. |
-
-## Props — `NavbarDrawerProps`
-
-| Prop                | Type                                                                           | Default | Description                                                                         |
-| ------------------- | ------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `show` \*           | `boolean`                                                                      | —       | Controls whether the drawer is visible.                                             |
-| `children` \*       | `JSX.Element \| JSX.Element[]`                                                 | —       | —                                                                                   |
-| `onClose`           | `(() => void)`                                                                 | —       | Called when the drawer requests to be closed via the close button or overlay click. |
-| `onBrandClick`      | `\| (( event: React.MouseEvent<HTMLAnchorElement>, type: BrandType ) => void)` | —       | Called when a brand logo inside the drawer is clicked.                              |
-| `drawerLabel`       | `string`                                                                       | —       | Accessible label announced for the mobile navigation drawer.                        |
-| `mobileMenuRef`     | `React.RefObject<HTMLButtonElement>`                                           | —       | Ref to the mobile menu button used to return focus when the drawer closes.          |
-| `resources`         | `NavbarResourcesProps`                                                         | —       | Branding and logo resources for the navbar.                                         |
-| `actionButtons`     | `NavbarActionButtonsProps`                                                     | —       | Action buttons rendered in the navbar and mobile drawer.                            |
-| `hideNavBranding`   | `boolean`                                                                      | false   | Hides all brand logos from the navbar and drawer.                                   |
-| `hideLinkIndicator` | `boolean`                                                                      | false   | Hides the active-item underline indicator across desktop and drawer views.          |
-
-## Props — `NavbarProps`
-
-| Prop                        | Type                                                            | Default                | Description                                                                                                                                        |
-| --------------------------- | --------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `items` \*                  | `NavItemsProps<T>`                                              | —                      | —                                                                                                                                                  |
-| `className`                 | `string`                                                        | —                      | —                                                                                                                                                  |
-| `id`                        | `string`                                                        | —                      | —                                                                                                                                                  |
-| `selectedId`                | `string`                                                        | —                      | The currently selected navigation item identifier. Must match the `id` of one of the rendered items.                                               |
-| `compress`                  | `boolean`                                                       | false                  | Reduces the height and logo size of the navbar.                                                                                                    |
-| `fixed`                     | `boolean`                                                       | true                   | Pins the navbar to the top of the viewport while the page scrolls.                                                                                 |
-| `drawerDismissalExclusions` | `DrawerDismissalMethod[]`                                       | —                      | Drawer dismissal methods that should be suppressed. The drawer will not close when the user performs any of the listed actions.                    |
-| `hideNavElements`           | `boolean`                                                       | false                  | Hides nav items and action buttons, leaving only the brand area visible.                                                                           |
-| `onBrandClick`              | `((type: BrandType) => void)`                                   | —                      | Called when a brand logo is clicked. `type` identifies which brand slot was activated.                                                             |
-| `onItemClick`               | `\| ((item: NavItemProps<T> \| NavItemCommonProps<T>) => void)` | —                      | Called when a navigation item is activated from the desktop bar or the mobile drawer. The item's full props object is passed as the argument.      |
-| `onActionButtonClick`       | `\| ((actionButton: NavbarButtonProps) => void)`                | —                      | Called when an action button without its own `onClick` handler is activated. The button's full props object is passed as the argument.             |
-| `masthead`                  | `boolean`                                                       | true                   | Renders the `Masthead` (SGDS official government banner) above the navbar.                                                                         |
-| `layout`                    | `"default" \| "stretch"`                                        | "default"              | Controls how the navbar content fills its container. `"stretch"` expands to the full container width; `"default"` uses the standard content width. |
-| `headerLabel`               | `string`                                                        | "Main navigation menu" | Accessible label announced for the main navigation header.                                                                                         |
-| `drawerLabel`               | `string`                                                        | —                      | Accessible label announced for the mobile navigation drawer.                                                                                       |
-| `resources`                 | `NavbarResourcesProps`                                          | —                      | Branding and logo resources for the navbar.                                                                                                        |
-| `actionButtons`             | `NavbarActionButtonsProps`                                      | —                      | Action buttons rendered in the navbar and mobile drawer.                                                                                           |
-| `hideNavBranding`           | `boolean`                                                       | false                  | Hides all brand logos from the navbar and drawer.                                                                                                  |
-| `hideLinkIndicator`         | `boolean`                                                       | false                  | Hides the active-item underline indicator across desktop and drawer views.                                                                         |
-
-## Props — `NavItemProps`
-
-| Prop          | Type          | Default | Description |
-| ------------- | ------------- | ------- | ----------- |
-| `itemType` \* | `"component"` | —       | —           |
-| `children` \* | `JSX.Element` | —       | —           |
-
-## Props — `NavbarButtonProps`
-
-| Prop            | Type          | Default | Description                                                                                            |
-| --------------- | ------------- | ------- | ------------------------------------------------------------------------------------------------------ |
-| `type` \*       | `"download"`  | —       | —                                                                                                      |
-| `args`          | `ButtonProps` | —       | —                                                                                                      |
-| `uncollapsible` | `boolean`     | false   | When `true`, the button remains visible outside the mobile drawer rather than being collapsed into it. |
-
-## Props — `NavbarDrawerApi`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Props — `NavbarDrawerHandle`
-
-| Prop               | Type         | Default | Description                                                                   |
-| ------------------ | ------------ | ------- | ----------------------------------------------------------------------------- |
-| `dismissDrawer` \* | `() => void` | —       | Programmatically closes the mobile navigation drawer with its exit animation. |
-
-## Rules
-
--   Always set `masthead` — all government services must display the masthead.
--   Always provide a meaningful `id` on each `NavItemCommonProps` item — used by `selectedId` to highlight the active page.
--   `items.desktop` is required; the component crashes without it.
--   `items.mobile` is optional — falls back to `desktop` if omitted.
--   `layout` must match the `Footer` `layout` prop; do not mix `"default"` and `"stretch"`.
--   Limit action buttons to 2–3 maximum.
--   Use SVG format for brand logos.
--   When using `fixed`, add corresponding top padding to page content to prevent overlap.
--   Set `uncollapsible: true` on action buttons that must remain visible on mobile (e.g. avatar).
--   Use `itemType: "component"` for custom nav elements such as an avatar with a `Menu` dropdown.
--   Pass `type: "component"` with `args: { render: <Element /> }` for custom action button elements.
--   `BrandType` is `"primary" | "secondary"` — passed to `onBrandClick`.
--   The `"download"` button type is pre-programmed for LifeSG purposes.
--   `NavbarButtonComponentProps` accepts a `render: JSX.Element` field for custom components.
-
-## Anti-patterns
-
--   Do not omit `masthead` — it is required for government compliance.
--   Do not supply a custom `resources.primary.logoSrc` unless the service has its own brand logo — omit `resources` to let the theme render its built-in logo.
--   Do not use `hideNavElements` as a default state — it is for special page states only (e.g. maintenance).
--   Do not use `fixed: false` unless the layout explicitly requires a non-fixed header.
--   Do not add more than 3 action buttons — the navbar becomes visually cluttered.
diff --git a/skills/fds-build/resources/v4/components/notification-banner.md b/skills/fds-build/resources/v4/components/notification-banner.md
deleted file mode 100644
index 1db204b125..0000000000
--- a/skills/fds-build/resources/v4/components/notification-banner.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# NotificationBanner
-
-Import: `import { NotificationBanner } from "@lifesg/react-design-system/notification-banner"`
-
-## When to use
-
-Use for notices that must always be visible to the user — maintenance windows, policy changes, mandatory announcements. Unlike Toast, it does not auto-dismiss. Unlike Alert, it applies to the entire page, not a specific section.
-
-## Sub-components
-
--   `NotificationBanner.Link` — Inherits `TypographyLinkProps`. Use for links within banner content.
-
-## HOC
-
-```ts
-withNotificationBanner(data: NotificationContentAttributes[])
-```
-
-### NotificationContentAttributes
-
-| Prop              | Type                                       | Default | Description                                      |
-| ----------------- | ------------------------------------------ | ------- | ------------------------------------------------ |
-| `type`            | `"text"` \| `"link"`                       | —       | Type of content — required                       |
-| `content`         | `string`                                   | —       | Text content — required                          |
-| `otherAttributes` | `TypographyLinkProps` \| `TypographyProps` | —       | Additional props passed to the content component |
-
-## Usage
-
-```tsx
-import { NotificationBanner } from "@lifesg/react-design-system/notification-banner";
-
-<NotificationBanner dismissible sticky onDismiss={() => {}}>
-    Scheduled maintenance on 1 Feb 2026, 2–4 AM.{" "}
-    <NotificationBanner.Link href="/status">
-        View status
-    </NotificationBanner.Link>
-</NotificationBanner>;
-```
-
-## Props — `NotificationBannerProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `NotificationBannerWithForwardedRefProps`
-
-| Prop                 | Type                                            | Default | Description                                                                                                                                            |
-| -------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `forwardedRef`       | `React.Ref<HTMLDivElement>`                     | —       | —                                                                                                                                                      |
-| `children`           | `React.ReactNode`                               | —       | —                                                                                                                                                      |
-| `dismissible`        | `boolean`                                       | true    | Whether the dismiss button is rendered. The caller is responsible for dismissing the banner in the callback.                                           |
-| `visible`            | `boolean`                                       | true    | Controls the visibility of the banner.                                                                                                                 |
-| `sticky`             | `boolean`                                       | true    | Whether the banner sticks to the top of the viewport while the page scrolls.                                                                           |
-| `icon`               | `JSX.Element`                                   | —       | An optional icon element rendered at the leading edge of the banner.                                                                                   |
-| `onDismiss`          | `(() => void)`                                  | —       | Called when the user activates the dismiss button and `dismissible` is `true`.                                                                         |
-| `maxCollapsedHeight` | `number`                                        | —       | Maximum height in pixels for the content area. When the rendered content exceeds this value, the overflow is clipped.                                  |
-| `actionButton`       | `React.ButtonHTMLAttributes<HTMLButtonElement>` | —       | An action button rendered inside the content area. When `actionButton.onClick` is provided it stops propagation to the banner's own `onClick` handler. |
-
-## Props — `ContentLinkAttributes`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `ContentTextAttributes`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Props — `NotificationContentAttributes`
-
-| Prop              | Type                                     | Default | Description                                                      |
-| ----------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `type` \*         | `ContentType`                            | —       | Determines how `content` is rendered inside the banner.          |
-| `content` \*      | `string`                                 | —       | The text string or link label to display.                        |
-| `otherAttributes` | `TypographyLinkProps \| TypographyProps` | —       | Additional props forwarded to the rendered text or link element. |
-
-## Rules
-
--   Place directly below the Navbar — above all page content.
--   Use for page-wide or system-wide notices only — not for section-specific messages.
--   Use `dismissible={false}` for mandatory notices users must not be able to dismiss.
--   Use `NotificationBanner.Link` for all links within the banner — renders with the external link indicator automatically.
--   Use `maxCollapsedHeight` for long notices to avoid overwhelming the layout.
--   Use the `withNotificationBanner` HOC for banner content driven from a backend or external data source.
-
-## Anti-patterns
-
--   Using NotificationBanner for section-specific messages — use Alert instead.
--   Using raw anchor tags inside banner content — use `NotificationBanner.Link`.
--   Placing the banner below page content — it must sit directly below the Navbar.
diff --git a/skills/fds-build/resources/v4/components/pagination.md b/skills/fds-build/resources/v4/components/pagination.md
deleted file mode 100644
index f322cfb154..0000000000
--- a/skills/fds-build/resources/v4/components/pagination.md
+++ /dev/null
@@ -1,103 +0,0 @@
-# Pagination
-
-Import: `import { Pagination } from "@lifesg/react-design-system/pagination"`
-
-## When to use
-
-Use below lists or tables when content is split across multiple pages.
-
-## Usage
-
-### Basic pagination (1-based indexing)
-
-```tsx
-import { useState } from "react";
-import { Pagination } from "@lifesg/react-design-system/pagination";
-
-const ResultsList = () => {
-    const totalItems = 243;
-    const pageSize = 10;
-    // activePage is 1-based: page 1 is the first page, not page 0
-    const [activePage, setActivePage] = useState(1);
-
-    return (
-        <>
-            <MyResultsTable
-                items={results.slice(
-                    (activePage - 1) * pageSize,
-                    activePage * pageSize
-                )}
-            />
-            <Pagination
-                totalItems={totalItems}
-                pageSize={pageSize}
-                activePage={activePage}
-                onPageChange={(page) => setActivePage(page)} // page is 1-based
-                showFirstAndLastNav
-            />
-        </>
-    );
-};
-```
-
-### With page size changer
-
-`onPageSizeChange` receives `(page, pageSize)` — reset to page 1 when size changes.
-
-```tsx
-const [activePage, setActivePage] = useState(1);
-const [pageSize, setPageSize] = useState(10);
-
-<Pagination
-    totalItems={500}
-    pageSize={pageSize}
-    activePage={activePage}
-    onPageChange={(page) => setActivePage(page)}
-    onPageSizeChange={(page, size) => {
-        setPageSize(size);
-        setActivePage(page); // component resets to page 1 on size change
-    }}
-    showFirstAndLastNav
-    showPageSizeChanger
-/>;
-```
-
-## Props — `PaginationProps`
-
-| Prop                  | Type                                         | Default             | Description                                                                                                   |
-| --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`                  | `string`                                     | —                   | —                                                                                                             |
-| `className`           | `string`                                     | —                   | —                                                                                                             |
-| `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
-| `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
-| `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
-| `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
-| `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
-| `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
-| `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
-
-## Props — `PageSizeItemProps`
-
-| Prop       | Type     | Default | Description |
-| ---------- | -------- | ------- | ----------- |
-| `value` \* | `number` | —       | —           |
-| `label` \* | `string` | —       | —           |
-
-## Rules
-
--   `activePage` is 1-based — the first page is `1`, not `0`.
--   Always provide `onPageChange` to update `activePage` when the user changes page.
--   Provide `onPageSizeChange` when `showPageSizeChanger` is enabled.
--   Always center-align pagination below the results list.
--   Place pagination below the results — never above.
--   When total pages exceed 7, the component automatically shows an ellipsis — no additional props needed.
--   The page size changer is only visible in the desktop viewport.
--   The selected option in the page size changer takes precedence over `pageSize`.
-
-## Anti-patterns
-
--   Do not use `showFirstAndLastNav` and `showPageSizeChanger` together unless the dataset is large enough to warrant both — avoid cluttering the interface with excessive controls.
--   Do not left- or right-align pagination.
--   Do not place pagination above the results.
--   Do not use `pageSize` and a `pageSizeOptions` selection simultaneously without handling `onPageSizeChange` — the changer selection overrides `pageSize`.
diff --git a/skills/fds-build/resources/v4/components/pill.md b/skills/fds-build/resources/v4/components/pill.md
deleted file mode 100644
index 0a9fc887f9..0000000000
--- a/skills/fds-build/resources/v4/components/pill.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# Pill
-
-Import: `import { Pill } from "@lifesg/react-design-system/pill"`
-
-## When to use
-
-Use to communicate a status — application state, approval outcome, or processing stage. For categories, filters, or tagging, use Tag instead.
-
-## Variants
-
-| `type`      | Usage                                                    |
-| ----------- | -------------------------------------------------------- |
-| `"outline"` | Subtle, secondary label — default for most uses          |
-| `"solid"`   | Higher emphasis — use when the status needs to stand out |
-
-| `colorType` | Semantic use                  |
-| ----------- | ----------------------------- |
-| `"green"`   | Success, active, approved     |
-| `"red"`     | Error, rejected, danger       |
-| `"yellow"`  | Warning, pending, in progress |
-| `"blue"`    | Informational                 |
-| `"grey"`    | Neutral, inactive, draft      |
-| `"primary"` | Theme primary color           |
-| `"black"`   | Default, no semantic meaning  |
-
-## Usage
-
-```tsx
-import { Pill } from "@lifesg/react-design-system/pill";
-
-<Pill type="outline" colorType="green">
-    Approved
-</Pill>;
-```
-
-## Props — `PillProps`
-
-| Prop        | Type            | Default | Description                          |
-| ----------- | --------------- | ------- | ------------------------------------ |
-| `type` \*   | `PillType`      | —       | Visual style variant for the pill.   |
-| `colorType` | `PillColorType` | "black" | Color theme applied to the pill.     |
-| `icon`      | `JSX.Element`   | —       | Icon rendered before the label text. |
-
-## Rules
-
--   Use color semantically — do not use `"red"` for non-error states.
--   Use `"solid"` sparingly — reserve for statuses that need emphasis.
--   Keep label text to 1–2 words — text does not wrap inside a pill.
--   Pill is a static, non-interactive label — it does not accept `onClick`. Use Tag with `interactive` for clickable labels.
-
-## Anti-patterns
-
--   Using Pill for categories or filters — use Tag instead.
--   Using `"red"` for non-error states.
--   Labels longer than 2–3 words — text overflow is not handled.
diff --git a/skills/fds-build/resources/v4/components/progress-indicator.md b/skills/fds-build/resources/v4/components/progress-indicator.md
deleted file mode 100644
index 6cc2ddcc3b..0000000000
--- a/skills/fds-build/resources/v4/components/progress-indicator.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# ProgressIndicator
-
-Import: `import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator"`
-
-## When to use
-
-Use in multi-step forms or wizards to show the user's position within the flow.
-
-## Usage
-
-```tsx
-import { ProgressIndicator } from "@lifesg/react-design-system/progress-indicator";
-
-const steps = [
-    { label: "Personal details" },
-    { label: "Documents" },
-    { label: "Review" },
-];
-
-<ProgressIndicator
-    steps={steps}
-    currentIndex={1}
-    displayExtractor={(step) => step.label}
-/>;
-```
-
-## Props
-
-| Prop               | Type                    | Default | Description                                                                                              |
-| ------------------ | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `steps` \*         | `T[]`                   | —       | Ordered list of step items to render as progress bars and labels.                                        |
-| `currentIndex` \*  | `number`                | —       | Zero-based index of the current active step. All steps at or before this index are visually highlighted. |
-| `displayExtractor` | `((item: T) => string)` | —       | Derives the display label for a step item.                                                               |
-| `className`        | `string`                | —       | —                                                                                                        |
-| `id`               | `string`                | —       | —                                                                                                        |
-
-## Rules
-
--   `currentIndex` is zero-based — the first step is `0`.
--   Always provide `displayExtractor` when `steps` contains objects — without it, step labels will not render.
--   Update `currentIndex` as the user moves between steps.
--   Do not use `fadeColor` or `fadePosition` — these props are deprecated and have no effect in v3.
-
-## Anti-patterns
-
--   Do not use ProgressIndicator on single-step pages.
--   Do not use it as a general progress bar for loading states — use a loading spinner or skeleton instead.
diff --git a/skills/fds-build/resources/v4/components/radio-button.md b/skills/fds-build/resources/v4/components/radio-button.md
deleted file mode 100644
index 3c0e1a0dcd..0000000000
--- a/skills/fds-build/resources/v4/components/radio-button.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# RadioButton
-
-Import: `import { RadioButton } from "@lifesg/react-design-system/radio-button"`
-
-## When to use
-
--   User must choose exactly one option from a small set (typically 2–5 options).
--   Options are mutually exclusive.
-
-Prefer `Toggle` with `type="radio"` over bare `RadioButton` when building form inputs that need a visible card-style label container.
-
-## Variants
-
-| `displaySize` | When to use                    |
-| ------------- | ------------------------------ |
-| `"default"`   | Standard use                   |
-| `"small"`     | Dense layouts, inline controls |
-
-## Usage
-
-```tsx
-import { RadioButton } from "@lifesg/react-design-system/radio-button";
-
-<div role="radiogroup" aria-labelledby="group-label">
-    <label>
-        <RadioButton
-            name="plan"
-            value="basic"
-            checked={selected === "basic"}
-            onChange={(e) => {}}
-        />
-        Basic
-    </label>
-    <label>
-        <RadioButton
-            name="plan"
-            value="pro"
-            checked={selected === "pro"}
-            onChange={(e) => {}}
-        />
-        Pro
-    </label>
-</div>;
-```
-
-## Props — `RadioButtonProps`
-
-| Prop                    | Type              | Default   | Description                                                                                                             |
-| ----------------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `checked`               | `boolean`         | —         | The selected state of the component                                                                                     |
-| `disabled`              | `boolean`         | —         | —                                                                                                                       |
-| `displaySize`           | `RadioButtonSize` | "default" | Visual size of the radio button icon.                                                                                   |
-| `focusableWhenDisabled` | `boolean`         | —         | When `true` and `disabled` is also `true`, the radio button remains keyboard-focusable. `onChange` is still suppressed. |
-
-## Rules
-
--   Always wrap a group in `role="radiogroup"` with a visible group label (`aria-labelledby`).
--   Always set the same `name` on all buttons in a group for native radio behaviour.
--   Always pair each button with a visible label — wrap in `<label>` or use `aria-label`.
--   Never render a single `RadioButton` in isolation — radio inputs only make sense in groups.
-
-## Anti-patterns
-
--   Do not use `RadioButton` for binary yes/no questions in forms — use `Toggle` with `type="yes"` / `type="no"`.
--   Do not use `RadioButton` when multiple selections are allowed — use `Checkbox` instead.
--   Do not omit the `name` prop — without it, browsers cannot enforce mutual exclusivity natively.
diff --git a/skills/fds-build/resources/v4/components/schedule.md b/skills/fds-build/resources/v4/components/schedule.md
deleted file mode 100644
index fd7490feda..0000000000
--- a/skills/fds-build/resources/v4/components/schedule.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Schedule
-
-Import: `import { Schedule } from "@lifesg/react-design-system/schedule"`
-
-## Sub-components
-
--   `ScheduleEntityProps` — a service/resource row with its time slots
--   `ScheduleSlotProps` — a single bookable timeslot cell
--   `SchedulePopoverProps` — popover config for a slot
-
-## Props — `ScheduleEntityProps`
-
-| Prop       | Type                  | Default | Description                                                |
-| ---------- | --------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*    | `string`              | —       | Unique identifier.                                         |
-| `name` \*  | `string`              | —       | Display name shown in the column header.                   |
-| `slots` \* | `ScheduleSlotProps[]` | —       | All time slots belonging to this service across all dates. |
-
-## Props — `SchedulePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                  |
-| ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------ |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction type that opens the popover.                     |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | The popover body.                                            |
-| `delay`      | `{ open?: number; close?: number }`                | —       | Open and close delay in milliseconds.                        |
-| `offset`     | `number`                                           | —       | Distance in pixels between the slot element and the popover. |
-
-## Props — `ScheduleProps`
-
-| Prop                      | Type                                                          | Default | Description                                                                                                                |
-| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `id`                      | `string`                                                      | —       | —                                                                                                                          |
-| `className`               | `string`                                                      | —       | —                                                                                                                          |
-| `view`                    | `ScheduleView`                                                | "day"   | The layout view.                                                                                                           |
-| `date` \*                 | `string`                                                      | —       | The currently displayed date in `YYYY-MM-DD` format. Slots are filtered to match this date in the day view.                |
-| `emptyContentMessage`     | `string`                                                      | —       | Message shown inside the empty-state illustration when `serviceData` is empty.                                             |
-| `serviceData` \*          | `ScheduleEntityProps[]`                                       | —       | Array of service entities to render. Each entity maps to a column in the week view, or to a carousel item in the day view. |
-| `loading`                 | `boolean`                                                     | false   | When `true` the schedule renders a loading animation in place of slot content.                                             |
-| `minTime`                 | `string`                                                      | "00:00" | Earliest time shown on the time axis, in `HH:mm` format.                                                                   |
-| `maxTime`                 | `string`                                                      | "23:59" | Latest time shown on the time axis, in `HH:mm` format.                                                                     |
-| `initialScrollTime`       | `string`                                                      | —       | Time the schedule scrolls to on first render, in `HH:mm` format.                                                           |
-| `minDate`                 | `string`                                                      | —       | Earliest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                   |
-| `maxDate`                 | `string`                                                      | —       | Latest selectable date in the calendar picker, in `YYYY-MM-DD` format.                                                     |
-| `onPreviousDayClick` \*   | `(currentDate: string) => void`                               | —       | Called when the user navigates to the previous day.                                                                        |
-| `onNextDayClick` \*       | `(currentDate: string) => void`                               | —       | Called when the user navigates to the next day.                                                                            |
-| `onCalendarDateSelect` \* | `(currentDate: string) => void`                               | —       | Called when the user picks a date from the calendar popover.                                                               |
-| `onTodayClick` \*         | `() => void`                                                  | —       | Called when the user clicks the "Today" button in the header.                                                              |
-| `onEmptySlotClick`        | `((slot: ScheduleEmptySlotProps) => void)`                    | —       | Called when the user clicks a cell without any time slots in the day view.                                                 |
-| `emptySlotPopover`        | `\| ((slot: ScheduleEmptySlotProps) => SchedulePopoverProps)` | —       | When provided, a popover is attached to each empty slot in the day view instead of calling `onEmptySlotClick` directly.    |
-| `blockedMessage`          | `string`                                                      | —       | Message displayed inside blocked slots.                                                                                    |
-| `onClickHiddenSlots`      | `((hiddenServices: string[]) => void)`                        | —       | Called in the week view when the user clicks a cell that contains hidden overflow slots.                                   |
-
-## Props — `ScheduleSlotProps`
-
-| Prop            | Type                                                          | Default | Description                                                |
-| --------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
-| `id` \*         | `string`                                                      | —       | Unique identifier for the slot.                            |
-| `startTime` \*  | `string`                                                      | —       | Slot start time in `HH:mm` format.                         |
-| `endTime` \*    | `string`                                                      | —       | Slot end time in `HH:mm` format.                           |
-| `status` \*     | `ScheduleCellType`                                            | —       | Visual state of the slot.                                  |
-| `capacity`      | `number`                                                      | —       | Total number of bookable places in this slot.              |
-| `date` \*       | `string`                                                      | —       | Date this slot belongs to in `YYYY-MM-DD` format.          |
-| `booked`        | `number`                                                      | —       | Number of confirmed bookings already made for this slot.   |
-| `customPopover` | `SchedulePopoverProps`                                        | —       | Attaches a popover to this slot with custom configuration. |
-| `onClick`       | `\| ((data: ScheduleSlotProps, e: React.MouseEvent) => void)` | —       | Called when the user clicks this slot.                     |
-
-## Props — `ScheduleEmptySlotProps`
-
-| Prop           | Type     | Default | Description                                     |
-| -------------- | -------- | ------- | ----------------------------------------------- |
-| `startTime` \* | `string` | —       | Slot start time in `HH:mm` format.              |
-| `endTime` \*   | `string` | —       | Slot end time in `HH:mm` format.                |
-| `name` \*      | `string` | —       | Name of the service this empty slot belongs to. |
-
-## Rules
-
--   `date`, `serviceData`, `onPreviousDayClick`, and `onNextDayClick` are mandatory.
--   Avoid combining a per-slot `onClick` with `customPopover` using `trigger: "click"` on the same slot — they conflict.
diff --git a/skills/fds-build/resources/v4/components/sidenav.md b/skills/fds-build/resources/v4/components/sidenav.md
deleted file mode 100644
index e129772477..0000000000
--- a/skills/fds-build/resources/v4/components/sidenav.md
+++ /dev/null
@@ -1,183 +0,0 @@
-# Sidenav
-
-Import: `import { Sidenav } from "@lifesg/react-design-system/sidenav"`
-
-## When to use
-
-Use for section-level navigation in admin dashboards or portals. The Sidenav sits fixed to the left and fills the full viewport height below the Navbar, which is always present at the top.
-
-Do not use for:
-
--   Consumer-facing pages (use Navbar nav items or LocalNav instead)
--   Simple single-section apps
-
-## Sub-components
-
-```
-Sidenav                          ← fixed sidebar container
-├── Sidenav.Group                ← logical section (optional separator)
-│   ├── Sidenav.Item             ← top-level nav link (no children)
-│   ├── Sidenav.DrawerItem       ← expandable item with sub-links
-│   │   ├── Sidenav.DrawerSubitem
-│   │   └── Sidenav.DrawerSubitem
-│   └── Sidenav.Item
-└── Sidenav.Group
-    └── Sidenav.Item
-```
-
-`Sidenav.Group` is the only valid direct child of `Sidenav`. Use `Sidenav.Item` for leaf links, `Sidenav.DrawerItem` when a nav entry has sub-items. `Sidenav.DrawerSubitem` can only nest inside `Sidenav.DrawerItem`.
-
-## Variants
-
-| Depth    | Components used                              |
-| -------- | -------------------------------------------- |
-| 1 level  | `Sidenav` → `Sidenav.Group` → `Sidenav.Item` |
-| 2 levels | + `Sidenav.DrawerItem`                       |
-| 3 levels | + `Sidenav.DrawerSubitem`                    |
-
-## Usage
-
-### 2-group, 3-item nav with full nesting
-
-```tsx
-import { CalendarIcon } from "@lifesg/react-icons/calendar";
-import { DocIcon } from "@lifesg/react-icons/doc";
-import { Square2x2Icon } from "@lifesg/react-icons/square-2x2";
-import { useState } from "react";
-import { Sidenav } from "@lifesg/react-design-system/sidenav";
-
-const AdminSidenav = () => {
-    const [selectedId, setSelectedId] = useState("dashboard");
-
-    return (
-        <Sidenav>
-            {/* Group 1 — top-level items with no sub-items: onClick fires */}
-            <Sidenav.Group separator>
-                <Sidenav.Item
-                    id="dashboard"
-                    title="Dashboard"
-                    icon={<Square2x2Icon />}
-                    selected={selectedId === "dashboard"}
-                    onClick={(id) => setSelectedId(id)}
-                />
-            </Sidenav.Group>
-
-            {/* Group 2 — Reports has sub-items so onClick is omitted;
-                clicking it opens the drawer instead */}
-            <Sidenav.Group>
-                <Sidenav.Item
-                    id="reports"
-                    title="Reports"
-                    icon={<DocIcon />}
-                    selected={
-                        selectedId === "monthly-reports" ||
-                        selectedId === "annual-reports"
-                    }
-                >
-                    {/* DrawerItem with no children: onClick fires */}
-                    <Sidenav.DrawerItem
-                        id="monthly-reports"
-                        title="Monthly reports"
-                        onClick={(id) => setSelectedId(id)}
-                    />
-                    {/* DrawerItem with children: onClick is omitted */}
-                    <Sidenav.DrawerItem
-                        id="annual-reports"
-                        title="Annual reports"
-                        selected={selectedId === "annual-reports"}
-                    >
-                        <Sidenav.DrawerSubitem
-                            id="annual-summary"
-                            title="Summary"
-                            onClick={(id) => setSelectedId(id)}
-                        />
-                        <Sidenav.DrawerSubitem
-                            id="annual-detail"
-                            title="Detailed breakdown"
-                            onClick={(id) => setSelectedId(id)}
-                        />
-                    </Sidenav.DrawerItem>
-                </Sidenav.Item>
-                <Sidenav.Item
-                    id="bookings"
-                    title="Bookings"
-                    icon={<CalendarIcon />}
-                    selected={selectedId === "bookings"}
-                    onClick={(id) => setSelectedId(id)}
-                />
-            </Sidenav.Group>
-        </Sidenav>
-    );
-};
-```
-
-Key wiring notes:
-
--   `onClick` on `Sidenav.Item` is only attached when the item has **no** `children` — if children are present, clicking opens the drawer instead and `onClick` is ignored.
--   The same rule applies to `Sidenav.DrawerItem`: omit `onClick` when it wraps `DrawerSubitem` children.
--   Track `selectedId` in parent state; pass `selected={selectedId === id}` down to whichever level is active.
--   `separator` on `Sidenav.Group` draws a dividing line below that group.
-
-## Props — `SidenavProps`
-
-| Prop          | Type              | Default   | Description                                                               |
-| ------------- | ----------------- | --------- | ------------------------------------------------------------------------- |
-| `fixed`       | `boolean`         | true      | Pins the sidebar to the left edge of the viewport while the page scrolls. |
-| `children` \* | `React.ReactNode` | —         | Navigation groups and items. Accepts `Sidenav.Group` elements.            |
-| `aria-label`  | `string`          | "Sidebar" | Accessible label announced for the sidebar navigation landmark.           |
-| `id`          | `string`          | —         | —                                                                         |
-| `className`   | `string`          | —         | —                                                                         |
-
-## Props — `SidenavGroupProps`
-
-| Prop          | Type              | Default | Description                                                         |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------- |
-| `separator`   | `boolean`         | —       | Renders a horizontal divider after the last item in the group.      |
-| `children` \* | `React.ReactNode` | —       | Navigation items within the group. Accepts `Sidenav.Item` elements. |
-| `aria-label`  | `string`          | —       | Accessible label for this navigation group.                         |
-| `id`          | `string`          | —       | —                                                                   |
-| `className`   | `string`          | —       | —                                                                   |
-
-## Props — `SidenavItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                              |
-| ----------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | Label displayed below the icon.                                                                                                                          |
-| `icon` \*   | `React.ReactNode`        | —       | Icon displayed above the title.                                                                                                                          |
-| `selected`  | `boolean`                | —       | Sets the item as initially selected on mount.                                                                                                            |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no drawer children. When `children` are provided, clicking opens the drawer without invoking this callback. |
-| `children`  | `React.ReactNode`        | —       | Drawer content displayed to the right of the sidebar when the item is active. Accepts `Sidenav.DrawerItem` elements.                                     |
-| `id`        | `string`                 | —       | —                                                                                                                                                        |
-| `className` | `string`                 | —       | —                                                                                                                                                        |
-
-## Props — `SidenavDrawerItemProps`
-
-| Prop        | Type                     | Default | Description                                                                                                                                                               |
-| ----------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                                                                                                                                                      |
-| `children`  | `React.ReactNode`        | —       | Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem` elements. When provided, clicking toggles the collapsed/expanded state instead of invoking `onClick`. |
-| `onClick`   | `((id: string) => void)` | —       | Called when the item is activated and it has no sub-item children.                                                                                                        |
-| `id`        | `string`                 | —       | —                                                                                                                                                                         |
-| `className` | `string`                 | —       | —                                                                                                                                                                         |
-
-## Props — `SidenavDrawerSubitemProps`
-
-| Prop        | Type                     | Default | Description                            |
-| ----------- | ------------------------ | ------- | -------------------------------------- |
-| `title` \*  | `string`                 | —       | The displayed label.                   |
-| `onClick`   | `((id: string) => void)` | —       | Called when the sub-item is activated. |
-| `id`        | `string`                 | —       | —                                      |
-| `className` | `string`                 | —       | —                                      |
-
-## Rules
-
--   Always provide `icon` on `Sidenav.Item` — it is required for the collapsed state.
--   Maximum depth is 3 levels: `Item` → `DrawerItem` → `DrawerSubitem`.
--   Use `Sidenav.Group` with `separator` to visually separate unrelated sections.
--   `onClick` on `Sidenav.Item` and `Sidenav.DrawerItem` only fires when the item has no children — do not attach click handlers to items that have sub-items.
-
-## Anti-patterns
-
--   Do not omit `icon` on `Sidenav.Item` — the component is designed around icon + label.
--   Do not nest deeper than 3 levels.
--   Do not use `Sidenav` on consumer-facing pages — it is suited to admin portals.
diff --git a/skills/fds-build/resources/v4/components/singpass-button.md b/skills/fds-build/resources/v4/components/singpass-button.md
deleted file mode 100644
index c9809ab886..0000000000
--- a/skills/fds-build/resources/v4/components/singpass-button.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# SingpassButton
-
-Import: `import { SingpassButton } from "@lifesg/react-design-system/singpass-button"`
-
-## Props — `SingpassButtonProps`
-
-| Prop        | Type                      | Default        | Description                                                             |
-| ----------- | ------------------------- | -------------- | ----------------------------------------------------------------------- |
-| `styleType` | `SingpassButtonStyleType` | "white-filled" | Visual style variant controlling the button background and logo colour. |
-| `sizeType`  | `SingpassButtonSizeType`  | "default"      | Size variant of the button.                                             |
-
-## Rules
-
--   Do not custom style — Singpass branding guidelines require using the component as-is.
diff --git a/skills/fds-build/resources/v4/components/smart-app-banner.md b/skills/fds-build/resources/v4/components/smart-app-banner.md
deleted file mode 100644
index 7ebe6f9d7e..0000000000
--- a/skills/fds-build/resources/v4/components/smart-app-banner.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# SmartAppBanner
-
-Import: `import { SmartAppBanner } from "@lifesg/react-design-system/smart-app-banner"`
-
-## Props — `SmartAppBannerProps`
-
-| Prop           | Type                         | Default                                                                    | Description                                                                   |
-| -------------- | ---------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `show` \*      | `boolean`                    | —                                                                          | Controls whether the banner is visible.                                       |
-| `href` \*      | `string`                     | —                                                                          | Destination URL opened in a new tab when the banner or CTA button is clicked. |
-| `content` \*   | `SmartAppBannerContentProps` | —                                                                          | Text, labels, and rating content rendered inside the banner.                  |
-| `offset`       | `number`                     | 0                                                                          | Top offset in pixels applied to the banner's position.                        |
-| `icon`         | `string`                     | "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png" | URL of the app icon image displayed in the banner.                            |
-| `animated`     | `boolean`                    | false                                                                      | Applies a slide-in entrance animation to the banner.                          |
-| `className`    | `string`                     | —                                                                          | —                                                                             |
-| `onDismiss` \* | `() => void`                 | —                                                                          | Called when the user clicks the dismiss button.                               |
-| `onClick`      | `(() => void)`               | —                                                                          | Called when the user clicks on the banner or the CTA button.                  |
-
-## Props — `SmartAppBannerContentProps`
-
-| Prop               | Type     | Default | Description                                                                    |
-| ------------------ | -------- | ------- | ------------------------------------------------------------------------------ |
-| `title` \*         | `string` | —       | Primary heading text, typically the app name.                                  |
-| `buttonLabel` \*   | `string` | —       | Label text for the CTA button.                                                 |
-| `iconAriaLabel`    | `string` | ""      | Alt text for the app icon image.                                               |
-| `buttonAriaLabel`  | `string` | —       | Accessible label for the CTA button. Falls back to `buttonLabel` when omitted. |
-| `message`          | `string` | —       | Secondary description text displayed beneath the title.                        |
-| `numberOfStars` \* | `number` | —       | App store rating rendered as up to 5 star icons.                               |
diff --git a/skills/fds-build/resources/v4/components/tab.md b/skills/fds-build/resources/v4/components/tab.md
deleted file mode 100644
index 3e4b633a9f..0000000000
--- a/skills/fds-build/resources/v4/components/tab.md
+++ /dev/null
@@ -1,107 +0,0 @@
-# Tab
-
-Import: `import { Tab } from "@lifesg/react-design-system/tab"`
-
-## When to use
-
-Use to switch between related views within the same context — not for navigating between pages.
-
-## Sub-components
-
-```
-Tab                          ← tab strip container, manages active state
-├── Tab.Item                 ← individual tab (title + panel content)
-├── Tab.Item
-└── Tab.Item
-```
-
-All direct children of `Tab` must be `Tab.Item`. `Tab.Item` renders both the tab label and its associated panel content.
-
-## Variants
-
-| Mode                         | When to use                                |
-| ---------------------------- | ------------------------------------------ |
-| Uncontrolled (default)       | Tab manages its own active state           |
-| Controlled (`currentActive`) | Parent needs to control which tab is shown |
-
-## Props — `TabProps`
-
-| Prop                     | Type                                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `JSX.Element \| JSX.Element[]`             | —       | —                                                                                                                                                                                                                                      |
-| `initialActive`          | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                                                 |
-| `currentActive`          | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes.                   |
-| `className`              | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `id`                     | `string`                                   | —       | —                                                                                                                                                                                                                                      |
-| `onTabClick`             | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                                                |
-| `fullWidthIndicatorLine` | `boolean`                                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet`                 | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabItemProps`
-
-| Prop          | Type                           | Default | Description                                                                         |
-| ------------- | ------------------------------ | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*    | `string`                       | —       | Text label rendered in the tab link bar for this panel.                             |
-| `children` \* | `JSX.Element \| JSX.Element[]` | —       | —                                                                                   |
-| `titleAddon`  | `TitleAddonProps`              | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `className`   | `string`                       | —       | —                                                                                   |
-| `id`          | `string`                       | —       | —                                                                                   |
-| `width`       | `string`                       | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TitleAddonProps`
-
-| Prop         | Type                | Default | Description                                       |
-| ------------ | ------------------- | ------- | ------------------------------------------------- |
-| `content` \* | `JSX.Element`       | —       | The element rendered as the addon.                |
-| `position`   | `"left" \| "right"` | "right" | Which side of the tab title the addon appears on. |
-
-## Props — `TabContextProps`
-
-| Prop            | Type                                       | Default | Description                                                                                                                                                                                                          |
-| --------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*   | `React.ReactNode`                          | —       | —                                                                                                                                                                                                                    |
-| `initialActive` | `number`                                   | 0       | Zero-based index of the tab panel displayed on first render. Ignored when `currentActive` is provided.                                                                                                               |
-| `currentActive` | `number`                                   | —       | Zero-based index of the currently active tab panel. When provided, the component operates in controlled mode — the caller is responsible for updating this value in response to `onTabClick` to reflect tab changes. |
-| `onTabClick`    | `((title: string, index: number) => void)` | —       | Called when the user clicks a tab link.                                                                                                                                                                              |
-
-## Props — `TabListProps`
-
-| Prop                     | Type                       | Default | Description                                                                                                                                                                                                                            |
-| ------------------------ | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*            | `React.ReactNode`          | —       | —                                                                                                                                                                                                                                      |
-| `fullWidthIndicatorLine` | `boolean`                  | false   | Extends all tab indicator lines to the full width of the tab bar instead of matching only the tab link width.                                                                                                                          |
-| `fadeColor`              | `string[] \| FadeColorSet` | —       | Background color(s) used for the fade overlays at the edges of the scrollable tab link bar. Pass a `string[]` to apply the same gradient stop colors on both edges, or a `FadeColorSet` to specify left and right edges independently. |
-
-## Props — `TabListItemProps`
-
-| Prop         | Type              | Default | Description                                                                         |
-| ------------ | ----------------- | ------- | ----------------------------------------------------------------------------------- |
-| `title` \*   | `string`          | —       | Text label rendered in the tab link bar for this item.                              |
-| `titleAddon` | `TitleAddonProps` | —       | Optional addon element rendered alongside the tab title in the link bar.            |
-| `width`      | `string`          | —       | Explicit width for this tab link in the tab bar. Accepts any valid CSS width value. |
-
-## Props — `TabPanelProps`
-
-| Prop          | Type              | Default | Description                                                              |
-| ------------- | ----------------- | ------- | ------------------------------------------------------------------------ |
-| `index` \*    | `number`          | —       | Zero-based index identifying which active tab this panel corresponds to. |
-| `children` \* | `React.ReactNode` | —       | —                                                                        |
-| `className`   | `string`          | —       | —                                                                        |
-| `id`          | `string`          | —       | —                                                                        |
-
-## Rules
-
--   When `currentActive` is set, the component is in controlled mode — you must update it via `onTabClick`.
--   Tab order is determined by the order of `Tab.Item` children.
--   Keep tab labels short — labels truncate beyond 20 characters on tablet and mobile.
--   Use controlled mode (`currentActive` + `onTabClick`) only when the parent needs to sync tab state with external logic (e.g. URL params, deep links).
--   Use `titleAddon` with a `Badge` to show counts or status indicators on tab labels.
--   Set `headingLevel` to match the component's position in the page heading hierarchy.
--   Set `fadeColor` to match the page background so the horizontal scroll fade blends correctly on mobile.
-
-## Anti-patterns
-
--   Do not use tabs for page-level navigation — use Navbar or LocalNav instead.
--   Do not use more than 5–6 tabs — consider a different navigation pattern for many sections.
--   Do not use long labels — they truncate on mobile and tablet.
--   Do not set `currentActive` without also providing `onTabClick` — the tab state will be stuck.
diff --git a/skills/fds-build/resources/v4/components/table.md b/skills/fds-build/resources/v4/components/table.md
deleted file mode 100644
index 9c6726931f..0000000000
--- a/skills/fds-build/resources/v4/components/table.md
+++ /dev/null
@@ -1,65 +0,0 @@
-# Table
-
-Import: `import { Table } from "@lifesg/react-design-system/table"`
-
-## When to use
-
--   Displaying read-only structured data with no sorting, selection, or pagination needed.
--   Use `DataTable` instead when you need sortable columns, row selection, or pagination controls.
-
-## Composition
-
-`Table` is a thin styled wrapper over semantic HTML table elements:
-
-| Sub-component      | Renders as             |
-| ------------------ | ---------------------- |
-| `Table.Container`  | `<div>` scroll wrapper |
-| `Table`            | `<table>`              |
-| `Table.Head`       | `<thead>`              |
-| `Table.Body`       | `<tbody>`              |
-| `Table.Row`        | `<tr>`                 |
-| `Table.HeaderCell` | `<th>`                 |
-| `Table.Cell`       | `<td>`                 |
-
-Always wrap with `Table.Container` so the table scrolls horizontally on narrow viewports.
-
-## Usage
-
-```tsx
-import { Table } from "@lifesg/react-design-system/table";
-import { Typography } from "@lifesg/react-design-system/typography";
-
-const ServiceTable = () => (
-    <Table.Container>
-        <Table>
-            <Table.Head>
-                <Table.Row>
-                    <Table.HeaderCell>Service</Table.HeaderCell>
-                    <Table.HeaderCell>Status</Table.HeaderCell>
-                    <Table.HeaderCell>Last updated</Table.HeaderCell>
-                </Table.Row>
-            </Table.Head>
-            <Table.Body>
-                <Table.Row>
-                    <Table.Cell>MyService</Table.Cell>
-                    <Table.Cell>Active</Table.Cell>
-                    <Table.Cell>1 Jan 2024</Table.Cell>
-                </Table.Row>
-            </Table.Body>
-        </Table>
-    </Table.Container>
-);
-```
-
-## Rules
-
--   Always wrap in `Table.Container` — it provides horizontal scroll on small viewports.
--   Use `Table.HeaderCell` (`<th>`) for column headers, not `Table.Cell`.
--   Use `DataTable` for sortable, selectable, or paginated tables — `Table` is read-only only.
--   All props pass through to the underlying HTML element — use `style` or `className` for custom layout only when DS tokens don't cover the need.
-
-## Anti-patterns
-
--   Do not use `Table` when rows need to be selected or sorted — use `DataTable`.
--   Do not nest tables.
--   Do not omit `Table.Container` — the table will overflow on mobile without it.
diff --git a/skills/fds-build/resources/v4/components/tag.md b/skills/fds-build/resources/v4/components/tag.md
deleted file mode 100644
index bd2baedf88..0000000000
--- a/skills/fds-build/resources/v4/components/tag.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# Tag
-
-Import: `import { Tag } from "@lifesg/react-design-system/tag"`
-
-## When to use
-
-Use to label categories, apply filters, or tag items. Can be static or interactive — set `interactive` to render as a button for toggleable filters or selectable categories. For status labels, use Pill instead.
-
-## Variants
-
-| `type`      | Usage                                                 |
-| ----------- | ----------------------------------------------------- |
-| `"outline"` | Subtle, secondary label — default for most uses       |
-| `"solid"`   | Higher emphasis — use when the tag needs to stand out |
-
-| `colorType` | Semantic use                  |
-| ----------- | ----------------------------- |
-| `"green"`   | Success, active, approved     |
-| `"red"`     | Error, rejected, danger       |
-| `"yellow"`  | Warning, pending, in progress |
-| `"blue"`    | Informational                 |
-| `"grey"`    | Neutral, inactive, draft      |
-| `"primary"` | Theme primary color           |
-| `"black"`   | Default, no semantic meaning  |
-
-## Usage
-
-```tsx
-import { Tag } from "@lifesg/react-design-system/tag";
-
-{
-    /* Static category tag */
-}
-<Tag type="outline" colorType="blue">
-    Health
-</Tag>;
-
-{
-    /* Interactive filter tag */
-}
-<Tag type="solid" colorType="primary" interactive onClick={() => {}}>
-    Finance
-</Tag>;
-```
-
-## Props — `TagProps`
-
-| Prop           | Type                | Default | Description                                                                                                                                          |
-| -------------- | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*      | `TagType`           | —       | Visual style variant.                                                                                                                                |
-| `colorType`    | `TagColorType`      | "black" | Color theme applied to the tag.                                                                                                                      |
-| `icon`         | `JSX.Element`       | —       | Optional icon rendered alongside the label. The position is controlled by `iconPosition`.                                                            |
-| `iconPosition` | `"left" \| "right"` | "left"  | Position of the icon relative to the label text.                                                                                                     |
-| `interactive`  | `boolean`           | false   | When `true`, renders the tag as a `<button>` element to support click and keyboard interactions. When `false`, renders as a non-interactive `<div>`. |
-
-## Rules
-
--   When `interactive` is `true`, the component renders as a `<button>` with an extended touch target on mobile.
--   Always pair `interactive` with `onClick` — interactive tags are larger on mobile to extend the touch target.
--   Use color semantically — do not use `"red"` for non-error states.
--   Keep label text short — text does not wrap inside a tag.
--   Use Tag for categories, filters, and tagging — use Pill for statuses.
-
-## Anti-patterns
-
--   Using Tag for status labels — use Pill instead.
--   Setting `interactive` without providing an `onClick` handler.
--   Using `"red"` for non-error states.
diff --git a/skills/fds-build/resources/v4/components/text-list.md b/skills/fds-build/resources/v4/components/text-list.md
deleted file mode 100644
index cc8e8f826b..0000000000
--- a/skills/fds-build/resources/v4/components/text-list.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# TextList
-
-Import: `import { TextList } from "@lifesg/react-design-system/text-list"`
-
-## When to use
-
-Use for semantic list content. For navigation links, use `LinkList` instead.
-
-## Sub-components
-
-| Sub-component | Renders | When to use                                  |
-| ------------- | ------- | -------------------------------------------- |
-| `TextList.Ul` | `<ul>`  | Unordered list — items without a sequence    |
-| `TextList.Ol` | `<ol>`  | Ordered list — numbered or lettered sequence |
-
-## Props — `OrderedListProps`
-
-| Prop               | Type                           | Default   | Description                                                             |
-| ------------------ | ------------------------------ | --------- | ----------------------------------------------------------------------- |
-| `counterType`      | `CounterType`                  | "decimal" | Counter style applied to each list item.                                |
-| `counterSeparator` | `string`                       | ")"       | Character or string rendered after each counter value.                  |
-| `reversed`         | `boolean`                      | —         | The counter is decremented from the start value instead of incremented. |
-| `start`            | `number`                       | —         | The value to start the list count from.                                 |
-| `children` \*      | `JSX.Element \| JSX.Element[]` | —         | —                                                                       |
-| `bottomMargin`     | `number`                       | —         | Bottom margin in pixels applied to each list item except the last.      |
-| `size`             | `TextListSize`                 | —         | Text size applied to the list content.                                  |
-| `id`               | `string`                       | —         | —                                                                       |
-| `className`        | `string`                       | —         | —                                                                       |
-
-## Props — `UnorderedListProps`
-
-| Prop           | Type                             | Default | Description                                                                                                                                                      |
-| -------------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `bulletType`   | `BulletType \| CustomBulletIcon` | "disc"  | Marker style for list items. Pass a `BulletType` token for a predefined marker, or any React node to render a custom decorative icon before each item's content. |
-| `children` \*  | `JSX.Element \| JSX.Element[]`   | —       | —                                                                                                                                                                |
-| `bottomMargin` | `number`                         | —       | Bottom margin in pixels applied to each list item except the last.                                                                                               |
-| `size`         | `TextListSize`                   | —       | Text size applied to the list content.                                                                                                                           |
-| `id`           | `string`                         | —       | —                                                                                                                                                                |
-| `className`    | `string`                         | —       | —                                                                                                                                                                |
-
-## Rules
-
--   Children must be `<li>` elements.
--   Use `bulletType` as a `ReactNode` to render a custom icon bullet — the icon is automatically marked `aria-hidden`.
diff --git a/skills/fds-build/resources/v4/components/time-slot-bar-week.md b/skills/fds-build/resources/v4/components/time-slot-bar-week.md
deleted file mode 100644
index 7a5318eafc..0000000000
--- a/skills/fds-build/resources/v4/components/time-slot-bar-week.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# TimeSlotBarWeek
-
-Import: `import { TimeSlotBarWeek } from "@lifesg/react-design-system/time-slot-bar-week"`
-
-## Sub-components
-
--   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
--   `TimeSlot` — shape of each slot in the `slots` map
--   `TimeSlotBarStyleAttributes` — visual styling for a slot
-
-## YearMonthWeekDisplay
-
-| Prop    | Type                                                | Description                                            |
-| ------- | --------------------------------------------------- | ------------------------------------------------------ |
-| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
-| `year`  | `number`                                            | Visible year                                           |
-| `month` | `number`                                            | Visible month (1–12)                                   |
-
-## TimeSlot
-
-| Prop              | Type                         | Description                        |
-| ----------------- | ---------------------------- | ---------------------------------- |
-| `id` \*           | `string`                     | Unique identifier of the slot      |
-| `startTime` \*    | `string`                     | Start time (`HH:mm`)               |
-| `endTime` \*      | `string`                     | End time (`HH:mm`)                 |
-| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                     |
-| `label`           | `string`                     | Text content within the slot cell  |
-| `clickable`       | `boolean`                    | Whether the slot cell is clickable |
-
-## TimeSlotBarStyleAttributes
-
-| Prop                 | Type                     | Default     | Description                                       |
-| -------------------- | ------------------------ | ----------- | ------------------------------------------------- |
-| `backgroundColor` \* | `string`                 | —           | The color of the slot                             |
-| `styleType`          | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
-| `backgroundColor2`   | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
-
-## Props — `TimeSlotBarWeekProps`
-
-| Prop                      | Type                                           | Default    | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —          | —                                                                                                     |
-| `id`                      | `string`                                       | —          | —                                                                                                     |
-| `slots` \*                | `{ [date: string]: TimeSlot[] }`               | —          | Map of date strings (YYYY-MM-DD) to the time slot arrays to render for that date.                     |
-| `startTime`               | `string`                                       | —          | The start boundary of the visible time range, in HH:mm format.                                        |
-| `endTime`                 | `string`                                       | —          | The end boundary of the visible time range, in HH:mm format.                                          |
-| `value`                   | `string`                                       | —          | The currently selected date in YYYY-MM-DD format. Controls the highlighted day column.                |
-| `interval`                | `number`                                       | 30         | Duration in minutes that each time slot cell represents.                                              |
-| `variant`                 | `TimeSlotCellsVariant`                         | "flexible" | Controls how time slot cells are sized within each day column.                                        |
-| `maxVisibleCellHeight`    | `number`                                       | —          | Maximum height in pixels for the time slot area before it becomes truncated.                          |
-| `showNavigationHeader`    | `boolean`                                      | true       | Whether to show the month/year pickers and the prev/next week navigation arrows above the week grid.  |
-| `enableSelection`         | `boolean`                                      | true       | When `true`, the user can click a day column to select that date, triggering `onChange`.              |
-| `currentCalendarDate`     | `string`                                       | —          | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —          | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —          | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —          | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —          | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —          | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —          | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —          | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —          | Specifies if the calendar should display only dates for the selected month                            |
-
-## Rules
-
--   `slots` is mandatory.
--   `startTime`/`endTime` on the component must be full hours (e.g. `"08:00"`, `"13:00"`).
diff --git a/skills/fds-build/resources/v4/components/time-slot-bar.md b/skills/fds-build/resources/v4/components/time-slot-bar.md
deleted file mode 100644
index e8f366f749..0000000000
--- a/skills/fds-build/resources/v4/components/time-slot-bar.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# TimeSlotBar
-
-Import: `import { TimeSlotBar } from "@lifesg/react-design-system/time-slot-bar"`
-
-## TimeSlot
-
-| Prop              | Type                         | Default | Description                                |
-| ----------------- | ---------------------------- | ------- | ------------------------------------------ |
-| `id` \*           | `string`                     | —       | Unique identifier of the slot              |
-| `startTime` \*    | `string`                     | —       | Slot start time in `HH:mm` (15-min blocks) |
-| `endTime` \*      | `string`                     | —       | Slot end time in `HH:mm` (15-min blocks)   |
-| `styleAttributes` | `TimeSlotBarStyleAttributes` | —       | Styling for this slot                      |
-| `label`           | `string`                     | —       | Text content within the slot cell          |
-| `clickable`       | `boolean`                    | —       | Whether the slot cell is clickable         |
-
-## TimeSlotBarStyleAttributes
-
-| Prop                    | Type                     | Default     | Description                                                            |
-| ----------------------- | ------------------------ | ----------- | ---------------------------------------------------------------------- |
-| `backgroundColor` \*    | `string`                 | —           | Slot color                                                             |
-| `styleType`             | `"default" \| "stripes"` | `"default"` | Style type of the slot                                                 |
-| `backgroundColor2`      | `string`                 | —           | Secondary color; used with `styleType="stripes"`                       |
-| `hoverBackgroundColor`  | `string`                 | —           | Background on hover; only when `clickable`                             |
-| `hoverBackgroundColor2` | `string`                 | —           | Secondary hover color for `styleType="stripes"`; only when `clickable` |
-
-## Props — `TimeSlotBarRef`
-
-| Prop             | Type         | Default | Description                                                                                     |
-| ---------------- | ------------ | ------- | ----------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the bar back to `initialScrollTime`, or to the start if `initialScrollTime` is not set. |
-
-## Props — `TimeSlotBarProps`
-
-| Prop                     | Type                           | Default   | Description                                                                                                                                                                          |
-| ------------------------ | ------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`              | `string`                       | —         | —                                                                                                                                                                                    |
-| `variant`                | `TimeSlotBarVariant`           | "default" | Visual density of the bar.                                                                                                                                                           |
-| `startTime` \*           | `string`                       | —         | Start of the visible time range in `HH:mm` format.                                                                                                                                   |
-| `endTime` \*             | `string`                       | —         | End of the visible time range in `HH:mm` format.                                                                                                                                     |
-| `initialScrollTime`      | `string`                       | —         | Time position the bar scrolls to on mount, in `HH:mm` format. When `roundInitialScrollTime` is `true`, the value is rounded down to the nearest 30-minute interval before scrolling. |
-| `slots` \*               | `TimeSlot[]`                   | —         | The individual time slots shown within the configured time range.                                                                                                                    |
-| `onSlotClick` \*         | `(timeSlot: TimeSlot) => void` | —         | Called when the user clicks a slot cell.                                                                                                                                             |
-| `onClick`                | `() => void`                   | —         | Called when the user clicks an empty slot.                                                                                                                                           |
-| `styleAttributes`        | `TimeSlotBarStyleAttributes`   | —         | Styling applied to the bar background region not covered by any slot. Required to make the background region visible or interactive.                                                 |
-| `roundInitialScrollTime` | `boolean`                      | true      | When `true`, `initialScrollTime` is rounded down to the nearest 30-minute interval before the bar scrolls to it.                                                                     |
-
-## Props — `TimeSlot`
-
-| Prop                 | Type                         | Default | Description                                                                                                      |
-| -------------------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| `id` \*              | `string`                     | —       | Unique identifier for this slot.                                                                                 |
-| `startTime` \*       | `string`                     | —       | Start boundary of the slot in `HH:mm` format.                                                                    |
-| `endTime` \*         | `string`                     | —       | End boundary of the slot in `HH:mm` format.                                                                      |
-| `label`              | `string`                     | —       | Text rendered inside the slot cell. Replaced with `"..."` when the cell is too narrow to display the full label. |
-| `clickable`          | `boolean`                    | true    | Whether the slot responds to clicks.                                                                             |
-| `styleAttributes` \* | `TimeSlotBarStyleAttributes` | —       | Visual styling for the slot.                                                                                     |
-| `ariaLabel`          | `string`                     | —       | Accessible label for this slot.                                                                                  |
diff --git a/skills/fds-build/resources/v4/components/time-slot-week-view.md b/skills/fds-build/resources/v4/components/time-slot-week-view.md
deleted file mode 100644
index 9dc74a2177..0000000000
--- a/skills/fds-build/resources/v4/components/time-slot-week-view.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# TimeSlotWeekView
-
-Import: `import { TimeSlotWeekView } from "@lifesg/react-design-system/time-slot-week-view"`
-
-## Sub-components
-
--   `YearMonthWeekDisplay` — returned by `onWeekDisplayChange`
--   `TimeSlot` — shape of each slot in the `slots` map
--   `TimeSlotBarStyleAttributes` — visual styling for a slot
-
-## YearMonthWeekDisplay
-
-| Prop    | Type                                                | Description                                            |
-| ------- | --------------------------------------------------- | ------------------------------------------------------ |
-| `week`  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | First and last days of the visible week (`YYYY-MM-DD`) |
-| `year`  | `number`                                            | Visible year                                           |
-| `month` | `number`                                            | Visible month (1–12)                                   |
-
-## TimeSlot
-
-| Prop              | Type                         | Description                                                       |
-| ----------------- | ---------------------------- | ----------------------------------------------------------------- |
-| `id` \*           | `string`                     | Unique identifier of the slot                                     |
-| `startTime` \*    | `string`                     | Start time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45) |
-| `endTime` \*      | `string`                     | End time (`HH:mm`; minutes in 15-minute blocks: 00, 15, 30, 45)   |
-| `styleAttributes` | `TimeSlotBarStyleAttributes` | Visual styling                                                    |
-| `label`           | `string`                     | Text content within the slot cell                                 |
-| `clickable`       | `boolean`                    | Whether the slot cell is clickable                                |
-
-## TimeSlotBarStyleAttributes
-
-| Prop             | Type                     | Default     | Description                                       |
-| ---------------- | ------------------------ | ----------- | ------------------------------------------------- |
-| `color` \*       | `string`                 | —           | The color of the slot                             |
-| `styleType`      | `"default" \| "stripes"` | `"default"` | The style type of the slot                        |
-| `secondaryColor` | `string`                 | —           | Secondary color; used with `styleType: "stripes"` |
-
-## Props — `TimeSlotWeekViewProps`
-
-| Prop                      | Type                                           | Default | Description                                                                                           |
-| ------------------------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
-| `className`               | `string`                                       | —       | —                                                                                                     |
-| `id`                      | `string`                                       | —       | —                                                                                                     |
-| `value`                   | `string`                                       | —       | The currently selected date in `YYYY-MM-DD` format. Controls the highlighted day in the week view.    |
-| `slots`                   | `{ [date: string]: TimeSlot[] }`               | —       | Map of date strings (YYYY-MM-DD) to an array of `TimeSlot` entries displayed in that day's column.    |
-| `showNavigationHeader`    | `boolean`                                      | true    | Whether to show the month/year picker and the prev/next week navigation arrows above the week grid.   |
-| `enableSelection`         | `boolean`                                      | true    | When `true`, the user can click a day column to select that date, triggering `onChange`               |
-| `currentCalendarDate`     | `string`                                       | —       | The date used to determine which week is shown on first render, in YYYY-MM-DD format.                 |
-| `onSlotClick`             | `((date: string, timeSlot: TimeSlot) => void)` | —       | Called when the user clicks a time slot cell.                                                         |
-| `onChange`                | `((value: string) => void)`                    | —       | Called when the user selects a date. Requires `enableSelection` to be `true`.                         |
-| `onWeekDisplayChange`     | `((value: YearMonthWeekDisplay) => void)`      | —       | Called when the visible week changes due to navigation.                                               |
-| `minDate`                 | `string`                                       | —       | The minimum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `maxDate`                 | `string`                                       | —       | The maximum date that can be selected (inclusive) in 'YYYY-MM-DD' format.                             |
-| `disabledDates`           | `string[]`                                     | —       | Dates to disable in `YYYY-MM-DD` format. Example: `["2023-04-30"]`                                    |
-| `allowDisabledSelection`  | `boolean`                                      | —       | Specifies if dates normally disabled by `minDate`, `maxDate` and `disabledDates` are still selectable |
-| `showActiveMonthDaysOnly` | `boolean`                                      | —       | Specifies if the calendar should display only dates for the selected month                            |
-
-## Props — `YearMonthWeekDisplay`
-
-| Prop       | Type                                                | Default | Description                                                               |
-| ---------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
-| `week` \*  | `{ firstDayOfWeek: string; lastDayOfWeek: string }` | —       | The first and last days of the newly displayed week in YYYY-MM-DD format. |
-| `year` \*  | `number`                                            | —       | —                                                                         |
-| `month` \* | `number`                                            | —       | `month` is 1-indexed                                                      |
-
-## Rules
-
--   `slots` is mandatory.
--   `TimeSlot` minutes must be in 15-minute blocks (00, 15, 30, 45).
--   `TimeSlotBarStyleAttributes` uses `color`/`secondaryColor` — not `backgroundColor`/`backgroundColor2` as in `TimeSlotBarWeek`.
diff --git a/skills/fds-build/resources/v4/components/timeline.md b/skills/fds-build/resources/v4/components/timeline.md
deleted file mode 100644
index 5efdb5c83e..0000000000
--- a/skills/fds-build/resources/v4/components/timeline.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# Timeline
-
-Import: `import { Timeline } from "@lifesg/react-design-system/timeline"`
-
-## When to use
-
-Use to communicate a process, application history, or sequence of steps. Use the `numeric` variant for numbered step-by-step instructions.
-
-## Sub-components
-
-### TimelineItemProps
-
-| Prop       | Type                                                                                                         | Default | Description                                            |
-| ---------- | ------------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------ |
-| `title`    | `string`                                                                                                     | —       | Item title — required                                  |
-| `content`  | `JSX.Element`                                                                                                | —       | Item content — required                                |
-| `variant`  | `"completed" \| "current" \| "upcoming-active" \| "upcoming-inactive" \| "numeric" \| "error" \| "disabled"` | —       | Visual state of the item indicator                     |
-| `statuses` | `PillProps[]`                                                                                                | —       | Status pills shown alongside the item (max 2 rendered) |
-
-## Variants
-
-| `variant`             | Usage                                |
-| --------------------- | ------------------------------------ |
-| `"completed"`         | Step or event is done                |
-| `"current"`           | Step currently in progress           |
-| `"upcoming-active"`   | Next actionable step                 |
-| `"upcoming-inactive"` | Future step, not yet actionable      |
-| `"error"`             | Step has an error                    |
-| `"disabled"`          | Step is not available                |
-| `"numeric"`           | Numbered step — use for instructions |
-
-## Props — `TimelineItemProps`
-
-| Prop         | Type                    | Default                                                                      | Description                                                                                                                    |
-| ------------ | ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `title` \*   | `string \| JSX.Element` | —                                                                            | Title of the step.                                                                                                             |
-| `content` \* | `string \| JSX.Element` | —                                                                            | Body content of the step.                                                                                                      |
-| `statuses`   | `PillProps[]`           | —                                                                            | Up to two status `Pill` descriptors rendered below the title. Only the first two entries are displayed when more are provided. |
-| `variant`    | `Variant`               | "current" for the first item and "upcoming-active" for all subsequent items. | Visual state of this step.                                                                                                     |
-
-## Props — `TimelineProps`
-
-| Prop                         | Type                  | Default | Description                                                                                         |
-| ---------------------------- | --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
-| `items` \*                   | `TimelineItemProps[]` | —       | Ordered list of steps to render.                                                                    |
-| `title`                      | `string`              | —       | Heading text displayed above the step list.                                                         |
-| `startCol`                   | `number`              | —       | CSS grid column the timeline wrapper starts on. Useful if component is wrapped in a css grid div.   |
-| `colSpan`                    | `number`              | —       | Number of grid columns the timeline wrapper spans. Useful if component is wrapped in a css grid div |
-| `headingLevel`               | `number`              | 2       | Heading level assigned to the `title` element. Item titles are rendered at `headingLevel + 1`.      |
-| `counterOffset`              | `number`              | 0       | Value added to each step's displayed counter when `variant` is `"numeric"`.                         |
-| `className`                  | `string`              | —       | —                                                                                                   |
-| `id`                         | `string`              | —       | —                                                                                                   |
-| `data-base-indicator-testid` | `string`              | —       | —                                                                                                   |
-
-## Rules
-
--   The first item defaults to `variant="current"` and subsequent items default to `variant="upcoming-active"` when `variant` is not specified.
--   Only a maximum of 2 `statuses` pills will render per item regardless of how many are provided.
--   `counterOffset` shifts the numeric counter: if `offset=2`, the first item shows `3`.
--   Always set `headingLevel` when `title` is provided — ensures correct heading hierarchy.
--   Use `counterOffset` when showing a partial sequence (e.g. steps 3–5 of a larger flow).
--   Use `statuses` with `PillProps` — follow Pill color semantics (see `pill.md`).
--   Use `"numeric"` variant consistently across all items in an instruction list — do not mix with status variants.
-
-## Anti-patterns
-
--   Mixing `"numeric"` and status variants in the same timeline — choose one paradigm per use case.
--   Providing more than 2 status pills per item — only 2 will render.
--   Using Timeline for non-sequential content — use a list or table instead.
diff --git a/skills/fds-build/resources/v4/components/timetable.md b/skills/fds-build/resources/v4/components/timetable.md
deleted file mode 100644
index 1a74d42025..0000000000
--- a/skills/fds-build/resources/v4/components/timetable.md
+++ /dev/null
@@ -1,123 +0,0 @@
-# Timetable
-
-Import: `import { Timetable } from "@lifesg/react-design-system/timetable"`
-
-## TimeTableRowData
-
-| Prop                    | Type                                                       | Default   | Description                                               |
-| ----------------------- | ---------------------------------------------------------- | --------- | --------------------------------------------------------- |
-| `name` \*               | `string`                                                   | —         | Row header name                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                   | —         | Array of row cells; sorted by start time automatically    |
-| `id`                    | `string`                                                   | —         | Row identifier; passed to `onRowNameClick`                |
-| `subtitle`              | `string \| JSX.Element`                                    | —         | Row header subtitle                                       |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                    | —         | Custom popover for the row header                         |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                    | —         | Custom popover for auto-filled blocked cells              |
-| `rowMinTime`            | `string`                                                   | `minTime` | Row start time; blocked cells are auto-filled before this |
-| `rowMaxTime`            | `string`                                                   | `maxTime` | Row end time; blocked cells are auto-filled after this    |
-| `onRowNameClick`        | `(rowData: TimeTableRowData, e: React.MouseEvent) => void` | —         | Called when the row header name is clicked                |
-
-## TimeTableRowCellData
-
-| Prop                  | Type                                                            | Default | Description                                                        |
-| --------------------- | --------------------------------------------------------------- | ------- | ------------------------------------------------------------------ |
-| `startTime` \*        | `string`                                                        | —       | Cell start time in `HH:mm` (duration must be a multiple of 15 min) |
-| `endTime` \*          | `string`                                                        | —       | Cell end time in `HH:mm` (duration must be a multiple of 15 min)   |
-| `id`                  | `string`                                                        | —       | Cell identifier; passed to `onClick`                               |
-| `status`              | `"filled" \| "blocked" \| "default" \| "pending" \| "disabled"` | —       | Cell status, determines rendering style                            |
-| `title`               | `string`                                                        | —       | Title shown for this cell                                          |
-| `subtitle`            | `string`                                                        | —       | Subtitle shown for this cell                                       |
-| `customPopover`       | `TimeTablePopoverProps`                                         | —       | Custom popover for the cell                                        |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                  | —       | Custom style attributes; falls back to default row bar colors      |
-| `onClick`             | `(data: TimeTableRowCellData, e: React.MouseEvent) => void`     | —       | Called when the cell is clicked                                    |
-
-## TimeTableCellStyleAttributes
-
-| Prop                      | Type                                           | Description                                                                      |
-| ------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------- |
-| `backgroundColor`         | `string \| (props: ThemeStyleProps) => string` | Main background color                                                            |
-| `altBackgroundColor`      | `string \| (props: ThemeStyleProps) => string` | Alternate background color for striped displays                                  |
-| `hoverBackgroundColor`    | `string \| (props: ThemeStyleProps) => string` | Background on hover                                                              |
-| `altHoverBackgroundColor` | `string \| (props: ThemeStyleProps) => string` | Alternate background on hover                                                    |
-| `styleType`               | `"default" \| "solid" \| "stripes"`            | Display style; defaults to cell type (blocked/pending = striped, others = solid) |
-
-## Props — `TimeTableCellStyleAttributes`
-
-| Prop                      | Type                     | Default   | Description                                                                |
-| ------------------------- | ------------------------ | --------- | -------------------------------------------------------------------------- |
-| `backgroundColor`         | `string`                 | —         | Main background color for the cell.                                        |
-| `altBackgroundColor`      | `string`                 | —         | Alternate background color used for the second stripe in striped patterns. |
-| `hoverBackgroundColor`    | `string`                 | —         | Background color applied on hover.                                         |
-| `altHoverBackgroundColor` | `string`                 | —         | Alternate background color applied on hover for striped patterns.          |
-| `styleType`               | `TimeTableCellStyleType` | "default" | Cell background pattern.                                                   |
-
-## Props — `TimeTableRef`
-
-| Prop             | Type         | Default | Description                                                                                   |
-| ---------------- | ------------ | ------- | --------------------------------------------------------------------------------------------- |
-| `resetScroll` \* | `() => void` | —       | Scrolls the timetable back to `initialScrollTime`. No-op when `initialScrollTime` is not set. |
-
-## Props — `TimeTableRowData`
-
-| Prop                    | Type                                                            | Default | Description                                                                                                     |
-| ----------------------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `id`                    | `string`                                                        | —       | Unique identifier for the row.                                                                                  |
-| `name` \*               | `string`                                                        | —       | Display name shown in the row header.                                                                           |
-| `rowCells` \*           | `TimeTableRowCellData[]`                                        | —       | Cells occupying time slots within this row.                                                                     |
-| `subtitle`              | `string \| JSX.Element`                                         | —       | Secondary text or element rendered beneath the row name in the header.                                          |
-| `rowHeaderPopover`      | `TimeTablePopoverProps`                                         | —       | Popover attached to the row header label.                                                                       |
-| `outOfRangeCellPopover` | `TimeTablePopoverProps`                                         | —       | Popover shown when the user interacts with cells outside the active time range.                                 |
-| `rowMinTime`            | `string`                                                        | —       | Earliest time this row is active, in `HH:mm` format. Time slots before this value are rendered as out-of-range. |
-| `rowMaxTime`            | `string`                                                        | —       | Latest time this row is active, in `HH:mm` format. Time slots after this value are rendered as out-of-range.    |
-| `onRowNameClick`        | `\| ((rowData: TimeTableRowData, e: React.MouseEvent) => void)` | —       | Called when the row header name is clicked.                                                                     |
-
-## Props — `TimeTablePopoverProps`
-
-| Prop         | Type                                               | Default | Description                                                                                                    |
-| ------------ | -------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
-| `trigger` \* | `PopoverTriggerType`                               | —       | Interaction that opens the popover                                                                             |
-| `content` \* | `string \| JSX.Element \| (() => React.ReactNode)` | —       | Content rendered inside the popover.                                                                           |
-| `delay`      | `\| { open?: number; close?: number }`             | —       | Open and close delays in milliseconds. Useful for hover popovers to avoid flickering on quick mouse movements. |
-| `offset`     | `number`                                           | —       | Distance in pixels between the popover and its trigger element.                                                |
-
-## Props — `TimeTableProps`
-
-| Prop                     | Type                              | Default | Description                                                                                                                             |
-| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                     | `string`                          | —       | —                                                                                                                                       |
-| `className`              | `string`                          | —       | —                                                                                                                                       |
-| `date` \*                | `string`                          | —       | The date currently displayed.                                                                                                           |
-| `emptyContentMessage`    | `string`                          | —       | Text shown in the empty state when `rowData` is empty or `totalRecords` is `0`.                                                         |
-| `rowData` \*             | `TimeTableRowData[]`              | —       | Rows to render in the timetable grid.                                                                                                   |
-| `loading`                | `boolean`                         | —       | When `true`, replaces row content with a loading spinner.                                                                               |
-| `minTime`                | `string`                          | "00:00" | Earliest hour column displayed, in `HH:mm` format. Rounded to the nearest full hour internally.                                         |
-| `maxTime`                | `string`                          | "23:00" | Latest hour column displayed, in `HH:mm` format. Rounded up to the nearest full hour internally.                                        |
-| `initialScrollTime`      | `string`                          | —       | Time to scroll to on mount in `HH:mm` format (e.g. `"09:00"`).                                                                          |
-| `minDate`                | `string`                          | —       | Earliest date the user can navigate to in the date picker.                                                                              |
-| `maxDate`                | `string`                          | —       | Latest date the user can navigate to in the date picker                                                                                 |
-| `totalRecords`           | `number`                          | —       | Total number of records across all pages. When `0`, the empty state is shown regardless of `rowData`.                                   |
-| `showCurrentDateAsToday` | `boolean`                         | —       | When `true`, the date header displays `"Today"` instead of the formatted date string when `date` matches the current calendar day.      |
-| `showDateAsShortForm`    | `boolean`                         | —       | When `true`, the date header uses an abbreviated date format.                                                                           |
-| `roundInitialScrollTime` | `boolean`                         | true    | When `true`, `initialScrollTime` is snapped to the nearest time interval (e.g. `"06:30"` snaps to `"06:00"` with a 60-minute interval). |
-| `onRefresh`              | `(() => void)`                    | —       | Called when the user clicks the refresh button in the header.                                                                           |
-| `onPage`                 | `(() => void)`                    | —       | Called when the timetable needs to load the next page of rows.                                                                          |
-| `onPreviousDayClick` \*  | `(currentDate: string) => void`   | —       | Called when the user navigates to the previous day.                                                                                     |
-| `onNextDayClick` \*      | `(currentDate: string) => void`   | —       | Called when the user navigates to the next day.                                                                                         |
-| `onCalendarDateSelect`   | `((currentDate: string) => void)` | —       | Called when the user selects a date from the calendar picker.                                                                           |
-
-## Props — `TimeTableRowCellData`
-
-| Prop                  | Type                                                             | Default | Description                                             |
-| --------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------------------- |
-| `id`                  | `string`                                                         | —       | Unique identifier for the cell.                         |
-| `startTime` \*        | `string`                                                         | —       | Start time of the cell in `HH:mm` format.               |
-| `endTime` \*          | `string`                                                         | —       | End time of the cell in `HH:mm` format.                 |
-| `status` \*           | `TimeTableCellType`                                              | —       | Visual and interaction state of the cell.               |
-| `title`               | `string`                                                         | —       | Primary label rendered inside the cell.                 |
-| `subtitle`            | `string`                                                         | —       | Secondary label rendered below `title` inside the cell. |
-| `customPopover`       | `TimeTablePopoverProps`                                          | —       | Popover shown when the user interacts with this cell.   |
-| `cellStyleAttributes` | `TimeTableCellStyleAttributes`                                   | —       | Color and pattern overrides for this cell.              |
-| `onClick`             | `\| ((data: TimeTableRowCellData, e: React.MouseEvent) => void)` | —       | Called when the user clicks this cell.                  |
-
-## Rules
-
--   Do not combine `onClick` on a cell with a `trigger="click"` popover on the same cell — they conflict.
diff --git a/skills/fds-build/resources/v4/components/toast.md b/skills/fds-build/resources/v4/components/toast.md
deleted file mode 100644
index 82c044c2a9..0000000000
--- a/skills/fds-build/resources/v4/components/toast.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Toast
-
-Import: `import { Toast } from "@lifesg/react-design-system/toast"`
-
-## When to use
-
-Use for brief, non-blocking feedback on system or user actions — "Changes saved", "Upload complete", "Request failed". Does not replace persistent callouts — use Alert for section-specific notices.
-
-## Sub-components
-
-### ActionButtonProps
-
-| Prop      | Type         | Default | Description                                         |
-| --------- | ------------ | ------- | --------------------------------------------------- |
-| `label`   | `string`     | —       | Label of the action button — required               |
-| `onClick` | `() => void` | —       | Called when the action button is clicked — required |
-
-## Variants
-
-| `type`      | When to use                   |
-| ----------- | ----------------------------- |
-| `"success"` | Action completed successfully |
-| `"error"`   | Action failed or system error |
-| `"warning"` | Completed with caution        |
-| `"info"`    | Neutral status update         |
-
-## Usage
-
-```tsx
-import { Toast } from "@lifesg/react-design-system/toast";
-
-<Toast
-    type="success"
-    label="Changes saved successfully."
-    autoDismiss
-    onDismiss={() => {}}
-/>;
-```
-
-## Props — `ToastActionButtonProps`
-
-| Prop         | Type         | Default | Description                              |
-| ------------ | ------------ | ------- | ---------------------------------------- |
-| `label` \*   | `string`     | —       | The label of the action button           |
-| `onClick` \* | `() => void` | —       | Called when the action button is clicked |
-
-## Props — `ToastProps`
-
-| Prop              | Type                        | Default   | Description                                                                                                                           |
-| ----------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` \*         | `ToastType`                 | "success" | Visual variant controlling the icon and color treatment.                                                                              |
-| `label` \*        | `string \| React.ReactNode` | —         | Main text content of the toast. When `title` is also provided, rendered as a supporting description using a smaller typography style. |
-| `title`           | `string \| React.ReactNode` | —         | Optional heading displayed above `label`.                                                                                             |
-| `autoDismiss`     | `boolean`                   | —         | When `true`, the toast dismisses itself automatically after `autoDismissTime` milliseconds.                                           |
-| `autoDismissTime` | `number`                    | 4000      | Duration in milliseconds before the toast auto-dismisses. Only takes effect when `autoDismiss` is `true`.                             |
-| `onDismiss`       | `(() => void)`              | —         | Called after the dismissal animation completes.                                                                                       |
-| `fixed`           | `boolean`                   | true      | Pins the toast in a fixed position at the top of the viewport.                                                                        |
-| `actionButton`    | `ToastActionButtonProps`    | —         | Optional action button rendered alongside the toast content.                                                                          |
-
-## Rules
-
--   `autoDismissTime` only takes effect when `autoDismiss` is `true`.
--   Use `autoDismiss` for non-critical updates — keep visible for errors that require user action.
--   Use `actionButton` for recoverable errors (retry, undo).
--   Use `title` + `label` together when the toast message has a heading and a description.
--   Do not use Toast for persistent notices — use Alert or NotificationBanner instead.
-
-## Anti-patterns
-
--   Using Toast for errors that require user action without providing an `actionButton`.
--   Setting `autoDismiss` on error toasts — errors should remain visible until the user dismisses them.
--   Replacing Alert with Toast for section-specific inline messages.
diff --git a/skills/fds-build/resources/v4/components/toggle.md b/skills/fds-build/resources/v4/components/toggle.md
deleted file mode 100644
index 73d1b055bb..0000000000
--- a/skills/fds-build/resources/v4/components/toggle.md
+++ /dev/null
@@ -1,119 +0,0 @@
-# Toggle
-
-Import: `import { Toggle } from "@lifesg/react-design-system/toggle"`
-
-## When to use
-
--   Form inputs for boolean choices, single/multi-option selection, and yes/no questions.
--   Preferred over bare `Checkbox` and `RadioButton` when building form inputs that need a card-style visible label container.
-
-## Variants
-
-| `type`       | When to use                                                  |
-| ------------ | ------------------------------------------------------------ |
-| `"checkbox"` | Multiple options can be selected or deselected independently |
-| `"radio"`    | Exactly one option must be selected — cannot be deselected   |
-| `"yes"`      | Binary yes answer — use with a paired `type="no"` Toggle     |
-| `"no"`       | Binary no answer — use with a paired `type="yes"` Toggle     |
-
-| `styleType`   | When to use                                                  |
-| ------------- | ------------------------------------------------------------ |
-| `"default"`   | Standard bordered card                                       |
-| `"no-border"` | Borderless — for contexts where the border is visually noisy |
-
-| `type`       | Behaviour                            |
-| ------------ | ------------------------------------ |
-| `"checkbox"` | Allows deselection — standard toggle |
-| `"radio"`    | No deselection — radio-style         |
-| `"yes"`      | No deselection — tick indicator      |
-| `"no"`       | No deselection — cross indicator     |
-
-## Usage
-
-```tsx
-import { Toggle } from "@lifesg/react-design-system/toggle";
-import { Form } from "@lifesg/react-design-system/form";
-
-{/* Checkbox group */}
-<Form.Label>Select your preferences</Form.Label>
-<Toggle type="checkbox" indicator checked={emailChecked} onChange={(e) => {}}>
-  Email notifications
-</Toggle>
-<Toggle type="checkbox" indicator checked={smsChecked} onChange={(e) => {}}>
-  SMS notifications
-</Toggle>
-```
-
-## Props — `ToggleProps`
-
-| Prop                    | Type                                                         | Default    | Description                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`                  | `ToggleType`                                                 | "checkbox" | Determines selection behavior and the indicator icon style.                                                                                                                                                                                                             |
-| `indicator`             | `boolean`                                                    | —          | Whether to render the selection indicator icon inside the toggle. The icon shape depends on `type`: - `"checkbox"` renders a tick box. - `"radio"` renders a filled circle. - `"yes"` renders a tick. - `"no"` renders a cross.                                         |
-| `checked`               | `boolean`                                                    | —          | Controlled checked state of the toggle.                                                                                                                                                                                                                                 |
-| `styleType`             | `ToggleStyleType`                                            | "default"  | Visual presentation of the toggle container.                                                                                                                                                                                                                            |
-| `children` \*           | `React.ReactNode`                                            | —          | Label content for the toggle.                                                                                                                                                                                                                                           |
-| `childrenMaxLines`      | `\| { mobile?: number; desktop?: number; tablet?: number; }` | —          | Maximum number of visible label lines at each breakpoint. Lines beyond the limit are truncated with an ellipsis. Omit a breakpoint key to leave that viewport unconstrained.                                                                                            |
-| `subLabel`              | `(() => JSX.Element) \| JSX.Element \| string`               | —          | Secondary content rendered below the main label.                                                                                                                                                                                                                        |
-| `disabled`              | `boolean`                                                    | —          | —                                                                                                                                                                                                                                                                       |
-| `error`                 | `boolean`                                                    | —          | Renders the input in an error state.                                                                                                                                                                                                                                    |
-| `className`             | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `name`                  | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `id`                    | `string`                                                     | —          | —                                                                                                                                                                                                                                                                       |
-| `onChange`              | `\| ((event: React.ChangeEvent<HTMLInputElement>) => void)`  | —          | Called when the toggle selection state changes. When provided, the caller is responsible for reflecting the new value back via `checked`.                                                                                                                               |
-| `compositeSection`      | `ToggleCompositeSectionProps`                                | —          | Optional collapsible body section rendered below the toggle label. The section automatically expands when the toggle becomes selected.                                                                                                                                  |
-| `removable`             | `boolean`                                                    | —          | Renders a "Remove" button alongside the label. Clicking the button calls `onRemove` when the toggle is not disabled.                                                                                                                                                    |
-| `onRemove`              | `(() => void)`                                               | —          | Called when the remove button is clicked and the toggle is not disabled.                                                                                                                                                                                                |
-| `useContentWidth`       | `boolean`                                                    | —          | Constrains the toggle width to its content rather than filling the container.                                                                                                                                                                                           |
-| `focusableWhenDisabled` | `boolean`                                                    | —          | Keeps the toggle keyboard-focusable when `disabled` is `true`. When set alongside `disabled`, the native `disabled` attribute is omitted in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element keyboard-reachable. `onChange` is still suppressed. |
-
-## Props — `ToggleCompositeSectionProps`
-
-| Prop              | Type                      | Default | Description                                                                                                                                                                                          |
-| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children` \*     | `React.ReactNode`         | —       | Content rendered inside the composite section body.                                                                                                                                                  |
-| `collapsible`     | `boolean`                 | true    | Whether the section can be collapsed and expanded by the user.                                                                                                                                       |
-| `initialExpanded` | `boolean`                 | false   | Whether the composite section starts in the expanded state. When the toggle becomes selected, the section automatically expands regardless of this value. Only applies when `collapsible` is `true`. |
-| `errors`          | `string[] \| JSX.Element` | —       | Errors shown in an alert banner when the section is collapsed. Pass a `string[]` to render a titled error list, or a `JSX.Element` for a custom error presentation.                                  |
-
-## Rules
-
--   `children` (main label) is mandatory.
--   `indicator` is recommended when using `type="yes"` or `type="no"` to show the tick/cross icon.
--   Always pass `indicator` for `type="checkbox"`, `type="radio"`, `type="yes"`, and `type="no"` — it shows the relevant icon (tick, dot, tick, cross) inside the toggle.
--   Use `type="radio"` when the option cannot be deselected (e.g. single-select from a list).
--   Use `compositeSection` to reveal dependent fields when a Toggle is selected — do not conditionally render fields outside the Toggle.
--   Use `subLabel` for secondary supporting text — do not embed long descriptions in `children`.
--   Use `childrenMaxLines` to constrain label height in dense list layouts.
--   Place a `Form.Label` above each toggle group to provide the question or field label.
-
-### Spacing
-
-| Layout                    | Gap                                  |
-| ------------------------- | ------------------------------------ |
-| Stacked (checkbox, radio) | `spacing-8` between each Toggle      |
-| Side by side (yes / no)   | `spacing-16` between the two Toggles |
-
-```tsx
-{/* Stacked — checkbox or radio */}
-<Form.Label>Declaration</Form.Label>
-<ToggleWrapper> {/* margin-bottom: spacing-32 — matches Form field built-in */}
-  <Toggle indicator checked={a} onChange={...}>Option A</Toggle>
-  <div style={{ marginBottom: Spacing["spacing-8"] }} />
-  <Toggle indicator checked={b} onChange={...}>Option B</Toggle>
-</ToggleWrapper>
-
-{/* Side by side — yes / no */}
-<Form.Label>Do you have a disability?</Form.Label>
-<YesNoGroup> {/* display: flex; gap: spacing-16 */}
-  <Toggle type="yes" indicator checked={val === "yes"} onChange={...}>Yes</Toggle>
-  <Toggle type="no"  indicator checked={val === "no"}  onChange={...}>No</Toggle>
-</YesNoGroup>
-```
-
-## Anti-patterns
-
--   Do not use bare `Checkbox` or `RadioButton` in forms when a labelled card container is needed — use `Toggle` instead.
--   Do not conditionally render dependent fields outside the Toggle — use `compositeSection`.
--   Do not use `type="yes"` or `type="no"` without pairing both options together in the UI.
--   Do not omit `indicator` for any Toggle type — it is required for all variants.
diff --git a/skills/fds-build/resources/v4/components/typography.md b/skills/fds-build/resources/v4/components/typography.md
deleted file mode 100644
index ef489dbe6f..0000000000
--- a/skills/fds-build/resources/v4/components/typography.md
+++ /dev/null
@@ -1,86 +0,0 @@
-# Typography
-
-Import: `import { Typography } from "@lifesg/react-design-system/typography"`
-
-## When to use
-
-Use Typography components to render text content — headings, paragraphs, and links. Do not use for parent containers that have text children; use Font tokens instead (see `foundations/typography.md`).
-
-## Sub-components
-
-**Headings:** `Typography.HeadingXXL`, `Typography.HeadingXL`, `Typography.HeadingLG`, `Typography.HeadingMD`, `Typography.HeadingSM`, `Typography.HeadingXS`
-
-**Body:** `Typography.BodyBL`, `Typography.BodyMD`, `Typography.BodySM`, `Typography.BodyXS`
-
-**Links:** `Typography.LinkBL`, `Typography.LinkMD`, `Typography.LinkSM`, `Typography.LinkXS`
-
-## Variants
-
-| Component         | Default element | Usage                                  |
-| ----------------- | --------------- | -------------------------------------- |
-| `HeadingXXL`      | `h1`            | Hero/page-level title                  |
-| `HeadingXL`       | `h2`            | Page title or primary section heading  |
-| `HeadingLG`       | `h3`            | Section heading                        |
-| `HeadingMD`       | `h4`            | Subsection heading                     |
-| `HeadingSM`       | —               | Card heading, secondary heading        |
-| `HeadingXS`       | —               | Small heading                          |
-| `BodyBL`          | —               | Default paragraph text                 |
-| `BodyMD`          | —               | Medium body text                       |
-| `BodySM`          | —               | Helper text                            |
-| `BodyXS`          | —               | Metadata, timestamps                   |
-| `LinkBL/MD/SM/XS` | `<a>`           | Inline links, sized to match body text |
-
-## Usage
-
-```tsx
-import { Typography } from "@lifesg/react-design-system/typography";
-
-<>
-    <Typography.HeadingXL>Page title</Typography.HeadingXL>
-    <Typography.BodyBL paragraph>
-        Supporting body text for the section. Use{" "}
-        <Typography.LinkMD href="/learn-more">
-            link components
-        </Typography.LinkMD>{" "}
-        for inline anchors.
-    </Typography.BodyBL>
-</>;
-```
-
-## Props — `TypographyLinkProps`
-
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
-
-## Props — `TypographyProps`
-
-| Prop        | Type               | Default   | Description                                                                                                         |
-| ----------- | ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| `weight`    | `TypographyWeight` | "regular" | Font weight of the rendered text.                                                                                   |
-| `inline`    | `boolean`          | —         | Renders the element as an inline `span`. When `true`, the `as` prop is ignored and `maxLines` clamping is disabled. |
-| `paragraph` | `boolean`          | —         | Adds a bottom margin to separate the element from following content.                                                |
-| `maxLines`  | `number`           | —         | Clamps visible text to the given number of lines, truncating the remainder.                                         |
-| `as`        | `T`                | —         | Overrides the rendered HTML element, e.g. `"h2"`.                                                                   |
-
-## Rules
-
--   Default HTML elements: `HeadingXXL` → `h1`, `HeadingXL` → `h2`, `HeadingLG` → `h3`, `HeadingMD` → `h4`.
--   Text color is not set by the component — apply via `styled()` using Colour tokens.
--   Do not pass `color` as a prop — `TypographyProps` extends `HTMLAttributes` and forwards the value to the DOM, triggering a React warning.
--   Do not use Typography for parent containers — use Font tokens instead.
--   Heading components render default HTML elements — use the `as` prop when visual size and reading order don't match.
--   Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
--   Apply text color via `styled()` using Colour tokens — never pass `color` as a prop.
--   Use the `weight` prop to adjust emphasis, not opacity.
--   Links are underlined by default — use `underlineStyle="none"` only when context makes the link obvious.
--   Always use the `external` prop for links that navigate outside the domain.
-
-## Anti-patterns
-
--   Passing `color` directly as a prop — it forwards a Colour object to the DOM and triggers a React warning.
--   Skipping heading levels for visual sizing — use the `as` prop instead.
--   Using `<h1>` raw HTML inside a Typography component instead of `as="h1"`.
--   Using Typography on a container element to inherit font styles — use Font tokens.
diff --git a/skills/fds-build/resources/v4/components/uneditable-section.md b/skills/fds-build/resources/v4/components/uneditable-section.md
deleted file mode 100644
index deb443a0e0..0000000000
--- a/skills/fds-build/resources/v4/components/uneditable-section.md
+++ /dev/null
@@ -1,84 +0,0 @@
-# UneditableSection
-
-Import: `import { UneditableSection } from "@lifesg/react-design-system/uneditable-section"`
-
-## When to use
-
--   Displaying read-only label/value pairs on summary or review screens.
--   Showing retrieved or pre-filled data the user cannot edit.
-
-## Sub-components
-
--   `UneditableSection.ItemSection` — wraps a group of items (extends `HTMLUListElement`)
--   `UneditableSection.Item` — individual label/value item
-
-## Usage
-
-```tsx
-import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
-
-<UneditableSection
-    title="Personal details"
-    items={[
-        { label: "Full name", value: "Jane Tan", displayWidth: "half" },
-        { label: "Date of birth", value: "1 Jan 1990", displayWidth: "half" },
-        { label: "Address", value: "123 Example Road, Singapore 123456" },
-    ]}
-/>;
-```
-
-## Props — `UneditableSectionItemProps`
-
-| Prop                | Type                                    | Default | Description                                                                                                                                         |
-| ------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                | —       | —                                                                                                                                                   |
-| `label` \*          | `string`                                | —       | Field label shown above the item value.                                                                                                             |
-| `value` \*          | `string \| React.ReactNode`             | —       | The display value for the field.                                                                                                                    |
-| `displayWidth`      | `UneditableSectionItemDisplayWidth`     | "full"  | Grid column span for the item within the section layout.                                                                                            |
-| `maskState`         | `UneditableSectionItemMaskState`        | —       | Controls whether the value is masked or unmasked. When undefined, no mask or unmask controls are rendered.                                          |
-| `maskLoadingState`  | `UneditableSectionItemMaskLoadingState` | —       | Async loading state during a mask or unmask action. When undefined, the resolved value is rendered directly.                                        |
-| `disableMaskUnmask` | `boolean`                               | —       | Prevents the user from toggling the mask or unmask control.                                                                                         |
-| `alert`             | `AlertProps`                            | —       | Alert rendered below the item value.                                                                                                                |
-| `maskRange`         | `number[]`                              | —       | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
-| `unmaskRange`       | `number[]`                              | —       | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
-| `maskRegex`         | `RegExp`                                | —       | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
-| `maskTransformer`   | `((value: string) => string)`           | —       | Custom function that receives the raw value and returns the fully masked string. Takes precedence over `maskRegex`, `maskRange`, and `unmaskRange`. |
-| `maskChar`          | `string`                                | "•"     | Character used to replace each masked character in the displayed value.                                                                             |
-
-## Props — `UneditableSectionItemSectionProps`
-
-| Prop      | Type      | Default | Description                                                    |
-| --------- | --------- | ------- | -------------------------------------------------------------- |
-| `stretch` | `boolean` | —       | Stretches every child item to fill the full width of the grid. |
-
-## Props — `UneditableSectionProps`
-
-| Prop            | Type                                           | Default | Description                                                                                      |
-| --------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `items`         | `UneditableSectionItemProps[]`                 | —       | List of labeled read-only field items to render in a responsive grid.                            |
-| `title`         | `string`                                       | —       | Optional heading rendered above the items grid.                                                  |
-| `description`   | `string`                                       | —       | Optional description rendered below `title` and above the items grid.                            |
-| `topSection`    | `JSX.Element`                                  | —       | Custom content rendered above the items grid, below `description`.                               |
-| `bottomSection` | `JSX.Element`                                  | —       | Custom content rendered below the items grid.                                                    |
-| `children`      | `JSX.Element \| JSX.Element[]`                 | —       | Fully custom section body.                                                                       |
-| `className`     | `string`                                       | —       | —                                                                                                |
-| `id`            | `string`                                       | —       | —                                                                                                |
-| `background`    | `boolean`                                      | true    | Applies a grey background to the section container. Set to `false` for a transparent background. |
-| `stretch`       | `boolean`                                      | —       | Stretches every item to fill the full column width of the grid.                                  |
-| `fullWidth`     | `boolean`                                      | —       | When `true`, allows the section to span the full available width of its parent.                  |
-| `onMask`        | `((item: UneditableSectionItemProps) => void)` | —       | Called when a mask control is activated on an item.                                              |
-| `onUnmask`      | `((item: UneditableSectionItemProps) => void)` | —       | Called when an unmask control is activated on an item.                                           |
-| `onTryAgain`    | `((item: UneditableSectionItemProps) => void)` | —       | Called when the retry button is clicked on an item in error state.                               |
-
-## Rules
-
--   Always supply `items` with a `label` and `value` for each field.
--   Use `displayWidth: "half"` for short values (names, dates, codes) to show two per row; omit for long values.
--   Show `"—"` for any unanswered or empty field rather than leaving `value` blank.
--   Set `background={false}` when rendering inside a `BoxContainer` — the container already provides the visual boundary; the default background creates an unwanted nested box appearance.
--   Set `fullWidth` when rendering inside a container such as `BoxContainer` to remove the default `Layout.Content` spacing and allow content to fill the full width.
-
-## Anti-patterns
-
--   Do not use `UneditableSection` for editable fields — use `Form.*` components with `readOnly` instead.
--   Do not nest `UneditableSection` inside another `UneditableSection`.
diff --git a/skills/fds-build/resources/v4/setup/setup.md b/skills/fds-build/resources/v4/setup/setup.md
deleted file mode 100644
index 8d2b2a09c7..0000000000
--- a/skills/fds-build/resources/v4/setup/setup.md
+++ /dev/null
@@ -1,207 +0,0 @@
-# App Setup — Flagship v4
-
-Full project setup for `@lifesg/react-design-system` v4. Work through all four steps before writing any component code.
-
----
-
-## Step 1 — Install packages
-
-```bash
-pnpm add @lifesg/react-design-system @lifesg/react-icons @floating-ui/react @mui/icons-material
-```
-
-Do NOT install `styled-components` — it is not used in v4.
-
----
-
-## Step 2 — CSS (src/index.css)
-
-Two imports are required. Order matters.
-
-```css
-/* 1. Font — CDN path is v3 but fonts are shared across versions */
-@import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
-
-/* 2. Theme CSS — defines ALL --fds-* custom properties AND component styles */
-@import "@lifesg/react-design-system/theme/styles/lifesg.css";
-```
-
-> **Note:** There is no `default.css` in v4. Each theme CSS file is self-contained and defines every `--fds-spacing-*`, `--fds-colour-*`, `--fds-radius-*`, etc. Do not import `default.css` — it does not exist.
-
-Replace `lifesg.css` with your chosen theme slug. Available slugs:
-`lifesg` · `bookingsg` · `ccube` · `mylegacy` · `oneservice` · `pa` · `supportgowhere` · `sgw-digital-lobby` · `careercompass` · `rbs` · `imda` · `spf` · `smgs` · `a11y-playground`
-
-> Vite resolves `node_modules` CSS `@import` automatically. Other build tools may need a CSS resolver configured.
-
-Font-to-theme mapping:
-
-| Font stylesheet                  | Themes                                             |
-| -------------------------------- | -------------------------------------------------- |
-| `open-sans.css`                  | `lifesg`, `ccube`, `mylegacy`, `oneservice`, `rbs` |
-| `plus-jakarta-sans.css`          | `bookingsg`, `careercompass`, `smgs`               |
-| `lato.css`                       | `pa`                                               |
-| `libre-franklin.css`             | `supportgowhere`, `sgw-digital-lobby`              |
-| `montserrat.css`                 | `imda`                                             |
-| `public-sans.css`                | `spf`                                              |
-| `atkinson-hyperlegible-next.css` | `a11y-playground`                                  |
-
-### Reset block
-
-> **CRITICAL — read before writing any CSS reset:**
->
-> v4 wraps **all** component styles inside `@layer fds { }`. CSS cascade layers mean that **any unlayered rule beats all layered rules**, regardless of selector specificity. A `* { padding: 0; margin: 0 }` reset is unlayered and will silently override component padding, nav item margins, filter spacing, etc. — all of which live in `@layer fds`.
->
-> **Use only the minimal reset below.** Never add broad element resets (`h1–h6`, `p`, `ul`, `ol`, `li`, `dl`, etc.) — FDS components render those elements internally and depend on their default or computed styles.
-
-```css
-html {
-    -moz-text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    text-size-adjust: none;
-    box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: inherit;
-    /* DO NOT add padding: 0 or margin: 0 here — it overrides @layer fds component styles */
-}
-
-body {
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: var(--fds-font-family-body, "Open Sans", sans-serif);
-    color: var(--fds-colour-text);
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-a {
-    cursor: pointer;
-    text-decoration: none;
-    color: inherit;
-}
-
-button,
-select,
-input[type="button"],
-input[type="submit"],
-input[type="reset"],
-::file-selector-button {
-    color: inherit;
-}
-
-img, picture, video, canvas, svg {
-    display: block;
-    max-width: 100%;
-}
-
-#root {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-/* v4 ThemeProvider renders a wrapper div as the only child of #root.
-   Make it the flex column so Navbar/main/Footer are proper flex children
-   and the footer sticks to the bottom on short pages. */
-#root > div {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-```
-
-### Next.js App Router adaptation
-
-Next.js App Router renders into `<body>` directly — there is no `#root`. Replace the `#root` rules with:
-
-```css
-/* Next.js: body is the mount point, not #root */
-body > div {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-```
-
-And move `min-height: 100vh; display: flex; flex-direction: column` onto `body` (already shown above).
-
-For `ThemeProvider`, create a client component wrapper (`providers.tsx`) since Next.js layouts are Server Components by default:
-
-```tsx
-// src/app/providers.tsx
-"use client";
-import { ThemeProvider } from "@lifesg/react-design-system/theme";
-
-export default function Providers({ children }: { children: React.ReactNode }) {
-    return <ThemeProvider theme="lifesg" mode="light">{children}</ThemeProvider>;
-}
-```
-
----
-
-## Step 3 — ThemeProvider (src/App.tsx)
-
-Wrap your app root. Theme is a string matching the slug used in Step 2. Do NOT re-import the CSS here — it is already imported via `index.css`.
-
-```tsx
-// src/App.tsx
-import { ThemeProvider } from "@lifesg/react-design-system/theme";
-import { Navbar } from "@lifesg/react-design-system/navbar";
-import { Footer } from "@lifesg/react-design-system/footer";
-
-export default function App() {
-    return (
-        <ThemeProvider theme="lifesg" mode="light">
-            <Navbar
-                masthead
-                items={{
-                    desktop: [{ id: "home", children: "Home", href: "/" }],
-                }}
-            />
-            <main style={{ flex: 1 }}>{/* page content */}</main>
-            <Footer />
-        </ThemeProvider>
-    );
-}
-```
-
-**Dark/light mode:** `mode` prop defaults to `"auto"` (OS preference).
-
-```tsx
-<ThemeProvider theme="lifesg" mode="light">  {/* force light */}
-<ThemeProvider theme="lifesg" mode="dark">   {/* force dark */}
-```
-
----
-
-## Step 4 — Vite config
-
-No special configuration needed for the design system. Standard React setup:
-
-```ts
-// vite.config.ts
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({
-    plugins: [react()],
-});
-```
-
----
-
-## Verification checklist
-
--   [ ] `@lifesg/react-design-system`, `@lifesg/react-icons`, `@floating-ui/react` installed
--   [ ] `styled-components` NOT installed
--   [ ] Font CDN stylesheet imported first in `index.css` and matches selected theme
--   [ ] `@lifesg/react-design-system/theme/styles/{theme}.css` imported in `index.css` (no `default.css` — it does not exist in v4)
--   [ ] CSS reset uses ONLY `body { margin: 0 }` — no broad `* { padding: 0; margin: 0 }` or element-level resets
--   [ ] `body { min-height: 100vh; display: flex; flex-direction: column }` in `index.css`
--   [ ] `#root > div { display: flex; flex-direction: column; flex: 1 }` (or `body > div` for Next.js)
--   [ ] `ThemeProvider` wraps app root with correct theme string

From 9643f9d14eec32c1617ed58f8d5e9cbf66f6ad8d Mon Sep 17 00:00:00 2001
From: qroll <quek.ruoling@gmail.com>
Date: Mon, 5 Oct 2026 11:33:03 +0800
Subject: [PATCH 12/15] [MISC][RL] Align setup instructions with storybook

---
 .../fds-build/resources/foundations/tokens.md | 110 +++++----
 skills/fds-build/resources/setup/setup.md     | 220 +++++++++---------
 skills/fds-build/resources/templates/form.md  |  46 ++--
 .../fds-build/resources/templates/listing.md  |  42 ++--
 4 files changed, 214 insertions(+), 204 deletions(-)

diff --git a/skills/fds-build/resources/foundations/tokens.md b/skills/fds-build/resources/foundations/tokens.md
index 0a09e5006e..81656fda6f 100644
--- a/skills/fds-build/resources/foundations/tokens.md
+++ b/skills/fds-build/resources/foundations/tokens.md
@@ -1,4 +1,4 @@
-# Design Tokens — v4
+# Design Tokens
 
 All tokens are imported from `@lifesg/react-design-system/theme`.
 
@@ -11,7 +11,7 @@ import {
 } from "@lifesg/react-design-system/theme";
 ```
 
-In v4, tokens are **plain CSS variable strings** — use them directly in inline `style={{}}` props or as values in CSS Modules. They do not need to be called as functions and do not require `styled-components` or `useTheme`.
+Tokens are **plain CSS variable strings** scoped to `[data-fds-<theme>]` — use them directly in inline `style={{}}` props or as values in CSS Modules. They do not need to be called as functions and do not require `styled-components` or `useTheme`.
 
 ```tsx
 // Inline style
@@ -22,12 +22,13 @@ In v4, tokens are **plain CSS variable strings** — use them directly in inline
     }}
 />;
 
-// CSS Modules — assign to a variable then reference
-const bg = Colour["bg-stronger"]; // "var(--fds-colour-bg-stronger)"
+// CSS Modules
+.container {
+    background: var(--fds-colour-bg-stronger);
+    padding: var(--fds-spacing-16);
+}
 ```
 
-No `styled.d.ts` augmentation required. No `useTheme()` hook needed.
-
 ---
 
 ## Anti-patterns
@@ -40,6 +41,41 @@ No `styled.d.ts` augmentation required. No `useTheme()` hook needed.
 
 ---
 
+## Overriding
+
+### In CSS
+
+Override tokens by setting the same variables in your own CSS, scoped to the theme attribute:
+
+```css
+[data-fds-theme="lifesg"] {
+    --fds-colour-primary-50: #1768be;
+    --fds-colour-text-error: #a04747;
+}
+
+/* Dark mode overrides */
+[data-fds-theme="lifesg"][data-fds-theme-mode="dark"] {
+    --fds-colour-primary-50: #6cb4ff;
+}
+```
+
+Place overrides after the theme CSS import so they take precedence.
+
+### In JavaScript
+
+Override CSS variables dynamically via the `style` prop on `ThemeProvider`:
+
+```tsx
+<ThemeProvider
+    theme="lifesg"
+    style={{
+        "--fds-colour-bg-primary": "#1768be",
+    }}
+/>
+```
+
+---
+
 ## Colour
 
 ### Quick decision
@@ -77,7 +113,7 @@ Single-word tokens use dot notation: `Colour.text`, `Colour.border`, `Colour.bg`
 
 Hyphenated tokens use bracket notation: `Colour["text-subtle"]`, `Colour["bg-hover"]`
 
-### Usage in v4
+### Usage
 
 ```tsx
 // Inline style — most common
@@ -250,33 +286,17 @@ All follow bracket notation: `Colour["bg-success"]`, `Colour["text-error"]`.
 | `focus-ring`         | Keyboard focus outline colour     |
 | `focus-ring-inverse` | Focus outline on dark backgrounds |
 
-### Overriding
-
-Pass a `colorScheme` override when creating a custom ThemeProvider theme:
-
-```tsx
-<ThemeProvider
-    theme="lifesg"
-    overrides={{
-        primitiveColour: { "primary-50": "#1768BE" },
-        semanticColour: { "text-error": "#A04747" },
-    }}
->
-```
-
-For dark mode overrides, use `primitiveColourDark` / `semanticColourDark`.
-
 ### Rules
 
 -   Never hardcode hex values — always use a Colour token
--   Use `hyperlink` for link text — not `text-primary`
+-   Use a token that most closely matches the semantics e.g. `hyperlink` for link text — not `text-primary`
 -   DS components (Button, Form.Input, Card, etc.) handle their own colour states — only apply Colour tokens to custom elements
 
 ---
 
 ## Spacing
 
-Base-4 system. Import: `Spacing["spacing-{n}"]` — returns a CSS variable string.
+Base-4 system
 
 ```tsx
 <div style={{ gap: Spacing["spacing-16"], padding: Spacing["spacing-24"] }} />
@@ -312,8 +332,6 @@ Never hardcode `px` values — always use a Spacing token.
 
 ## Radius
 
-`Radius.*` returns a CSS variable string. Use in `style={{ borderRadius: Radius.md }}`.
-
 | Token         | Value  | Use                                                  |
 | ------------- | ------ | ---------------------------------------------------- |
 | `Radius.none` | 0px    | Full-bleed, tables                                   |
@@ -331,7 +349,7 @@ DS components have radius baked in — do not override.
 
 ## Typography
 
-Use `Typography.*` components for all rendered text — same as v3.
+Use `Typography.*` components for all rendered text.
 
 | Component                | Default element | When to use                       |
 | ------------------------ | --------------- | --------------------------------- |
@@ -360,22 +378,24 @@ Heading levels must be sequential (h1 → h2 → h3) — never skip levels.
 -   Sentence case for all UI text — "Save changes" not "Save Changes"
 -   Heading level follows reading order, not visual size
 
-### Font tokens in v4
+### Font tokens
 
-In v4, `Font[...]` tokens return CSS variable strings for individual font properties. Use `Typography.*` components for all text content in JSX — only use `Font` tokens when you need to apply font styles to a non-text container element.
+`Font.Spec[...]` tokens return CSS variable strings for individual font properties. Use `Typography.*` components for all text content in JSX — only use `Font` tokens when you need to apply font styles to a non-text container element.
 
 ```tsx
 // Match an icon size to adjacent text — use Font.Spec for raw values
 <img style={{ height: Font.Spec["heading-size-xxl"] }} />
 ```
 
-There is no multi-property CSS block injection in v4 (that was styled-components only). Use `Typography.*` components instead.
-
 ---
 
 ## Breakpoints / Media Queries
 
-In v4 there is no `MediaQuery` helper for CSS-in-JS. Use standard CSS media queries in your CSS Modules files.
+`ThemeProvider` automatically adds `fds-breakpoint-*` classes to `<body>` based on the current viewport width. Use these classes in CSS to apply responsive styles:
+
+-   `body.fds-breakpoint-{tier}` — viewport is within that tier's range
+-   `body.fds-breakpoint-{tier}-min` — viewport is at or above the tier's minimum
+-   `body.fds-breakpoint-{tier}-max` — viewport is at or below the tier's maximum
 
 ```css
 /* Card.module.css */
@@ -384,14 +404,12 @@ In v4 there is no `MediaQuery` helper for CSS-in-JS. Use standard CSS media quer
     grid-template-columns: 1fr;
 }
 
-@media (min-width: 769px) {
-    .grid {
-        grid-template-columns: repeat(3, 1fr);
-    }
+:global(body.fds-breakpoint-lg-min) .grid {
+    grid-template-columns: repeat(3, 1fr);
 }
 ```
 
-For JS conditional logic, use the v4 media query hooks instead of `window.innerWidth`:
+For JS conditional logic, use the media query hooks:
 
 ```tsx
 import {
@@ -434,12 +452,8 @@ const ExampleComponent = () => {
 
 ## Shadow Tokens
 
-`Shadow[...]` returns a CSS variable string. Use in `style={{ boxShadow: Shadow["sm-subtle"] }}`.
-
 ```tsx
-import { Shadow } from "@lifesg/react-design-system/theme";
-
-<div style={{ boxShadow: Shadow["sm-subtle"] }} />;
+<div style={{ boxShadow: Shadow["sm-subtle"] }} />
 ```
 
 | Token key         | Common use                            |
@@ -457,7 +471,7 @@ import { Shadow } from "@lifesg/react-design-system/theme";
 
 ## Border Tokens
 
-`Border` is a flat object of CSS variable strings.
+`Border` is a flat object of CSS variable strings. Compose border properties manually using the tokens.
 
 ```tsx
 import { Border } from "@lifesg/react-design-system/theme";
@@ -475,8 +489,6 @@ import { Border } from "@lifesg/react-design-system/theme";
 <div style={{ border: `${Border["width-010"]} ${Border.solid} ${Colour.border}` }} />
 ```
 
-There is no `Border.Util` in v4 — compose border properties manually using the tokens above.
-
 For dashed border styling, use the `DashedBorder` component instead:
 
 ```tsx
@@ -506,16 +518,12 @@ import { Border, Colour, Radius } from "@lifesg/react-design-system/theme";
 
 ## Motion Tokens
 
-`Motion[...]` returns a CSS variable string. Use in `style={{ transition: ... }}` or in CSS Modules.
-
 ```tsx
-import { Motion } from "@lifesg/react-design-system/theme";
-
 <button
     style={{
         transition: `background ${Motion["duration-250"]} ${Motion["ease-default"]}`,
     }}
-/>;
+/>
 ```
 
 For elements with dynamic height or width (e.g. expandable panels), use `react-spring` instead — CSS transitions cannot handle layout animation with dynamic content.
diff --git a/skills/fds-build/resources/setup/setup.md b/skills/fds-build/resources/setup/setup.md
index fd3f25c68e..f80f873140 100644
--- a/skills/fds-build/resources/setup/setup.md
+++ b/skills/fds-build/resources/setup/setup.md
@@ -1,6 +1,6 @@
 # App Setup — Flagship v4
 
-Full project setup for `@lifesg/react-design-system` v4. Work through all four steps before writing any component code.
+Full project setup for `@lifesg/react-design-system` v4. Work through all five steps before writing any component code.
 
 ---
 
@@ -14,11 +14,9 @@ Do NOT install `styled-components` — it is not used in v4.
 
 ---
 
-## Step 2 — CSS
+## Step 2 — CDN stylesheets
 
-### 2a — CDN stylesheet (index.html `<head>`)
-
-Add `main.css` from the v4 CDN. This handles fonts, base reset, and cascade layer ordering.
+Add these stylesheets to normalise browser styles and display fonts.
 
 ```html
 <link
@@ -26,58 +24,134 @@ Add `main.css` from the v4 CDN. This handles fonts, base reset, and cascade laye
     type="text/css"
     href="https://assets.life.gov.sg/react-design-system/v4/css/main.css"
 />
+<link
+    rel="stylesheet"
+    type="text/css"
+    href="https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css"
+/>
+```
+
+Or if you are importing to an existing CSS file:
+
+```css
+@import url("https://assets.life.gov.sg/react-design-system/v4/css/main.css");
+@import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
+```
+
+Replace `open-sans` with the font for your theme:
+
+| Theme                                    | Font CSS                           |
+| ---------------------------------------- | ---------------------------------- |
+| lifesg, ccube, mylegacy, oneservice, rbs | `open-sans`                        |
+| bookingsg, careercompass, smgs           | `plus-jakarta-sans`                |
+| spf, vica, websg, wise, wogaa            | `public-sans`                      |
+| sgw-digital-lobby, supportgowhere        | `libre-franklin`                   |
+| pa                                       | `lato`                             |
+| imda                                     | `montserrat`                       |
+| tote-board                               | `inter`                            |
+| a11y-playground                          | `atkinson-hyperlegible-next`       |
+| sportsg-orange                           | `apfel-grotezk` + `hanken-grotesk` |
+
+---
+
+## Step 3 — Theme stylesheet
+
+In your application's CSS entrypoint, import the theme stylesheet:
+
+```css
+@import "@lifesg/react-design-system/theme/styles/lifesg.css";
 ```
 
-For Next.js App Router, add it in `layout.tsx`:
+> CSS `@import` from `node_modules` requires your framework or build tool to support it. Vite and Next.js resolve this automatically; other build tools may need a CSS resolver configured.
+
+Or in your application's JavaScript entrypoint, import the theme stylesheet:
 
 ```tsx
-// src/app/layout.tsx
-export default function RootLayout({
-    children,
-}: {
-    children: React.ReactNode;
-}) {
+import "@lifesg/react-design-system/theme/styles/lifesg.css";
+```
+
+Replace `lifesg` with your chosen theme slug: `a11y-playground` · `bookingsg` · `careercompass` · `ccube` · `imda` · `lifesg` · `mylegacy` · `oneservice` · `pa` · `rbs` · `sgw-digital-lobby` · `smgs` · `spf` · `sportsg-orange` · `supportgowhere` · `tote-board` · `vica` · `websg` · `wise` · `wogaa`
+
+---
+
+## Step 4 — ThemeProvider
+
+Wrap your app root in `ThemeProvider`. The `theme` prop is a string matching the slug used in Step 3.
+
+```tsx
+import { ThemeProvider } from "@lifesg/react-design-system/theme";
+
+const App = () => {
     return (
-        <html lang="en">
-            <head>
-                <link
-                    rel="stylesheet"
-                    type="text/css"
-                    href="https://assets.life.gov.sg/react-design-system/v4/css/main.css"
-                />
-            </head>
-            <body>{children}</body>
-        </html>
+        <ThemeProvider theme="lifesg">
+            <Component />
+        </ThemeProvider>
     );
-}
+};
 ```
 
-### 2b — Theme CSS (src/index.css)
+**Dark/light mode:** `mode` prop defaults to `"auto"` (OS preference).
 
-```css
-@import "@lifesg/react-design-system/theme/styles/lifesg.css";
+```tsx
+<ThemeProvider theme="lifesg" mode="light">  {/* force light */}
+<ThemeProvider theme="lifesg" mode="dark">   {/* force dark */}
+```
+
+---
+
+## Vite
+
+No special configuration needed for the design system. Standard React setup:
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+    plugins: [react()],
+});
 ```
 
-Replace `lifesg` with your chosen theme slug: `lifesg` · `bookingsg` · `ccube` · `mylegacy` · `oneservice` · `pa` · `supportgowhere` · `sgw-digital-lobby` · `careercompass` · `rbs` · `imda` · `spf` · `smgs` · `a11y-playground`
+---
+
+## Next.js App Router
 
-> Vite resolves `node_modules` CSS `@import` automatically. Other build tools may need a CSS resolver configured.
+No special `next.config.js` is needed. Suggested configuration below.
 
-### Next.js App Router adaptation
+### CSS
 
-Next.js App Router renders into `<body>` directly — there is no `#root`. Replace the `#root` rules with:
+Create a global CSS file with all three imports — CDN stylesheets and theme:
 
 ```css
-/* Next.js: body is the mount point, not #root */
-body > div {
+/* global.css */
+@import url("https://assets.life.gov.sg/react-design-system/v4/css/main.css");
+@import url("https://assets.life.gov.sg/react-design-system/v3/css/open-sans.css");
+@import "@lifesg/react-design-system/theme/styles/lifesg.css";
+```
+
+Wrap the app in a flex column layout so the footer stays pinned to the bottom on short pages:
+
+```css
+body {
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
+}
+
+main {
     flex: 1;
 }
+
+.theme-provider {
+    display: flex;
+    flex-direction: column;
+}
 ```
 
-And move `min-height: 100vh; display: flex; flex-direction: column` onto `body` (already shown above).
+### ThemeProvider
 
-For `ThemeProvider`, create a client component wrapper and use it in `layout.tsx`:
+`ThemeProvider` is a client component, so create a wrapper:
 
 ```tsx
 // src/app/providers.tsx
@@ -86,15 +160,20 @@ import { ThemeProvider } from "@lifesg/react-design-system/theme";
 
 export default function Providers({ children }: { children: React.ReactNode }) {
     return (
-        <ThemeProvider theme="lifesg" mode="light">
+        <ThemeProvider theme="lifesg" className="theme-provider">
             {children}
         </ThemeProvider>
     );
 }
 ```
 
+### Root layout
+
+Import the global CSS and the providers wrapper in `layout.tsx`:
+
 ```tsx
 // src/app/layout.tsx
+import "./global.css";
 import Providers from "./providers";
 
 export default function RootLayout({
@@ -112,79 +191,12 @@ export default function RootLayout({
 }
 ```
 
-```tsx
-// src/app/page.tsx
-import { Navbar } from "@lifesg/react-design-system/navbar";
-import { Footer } from "@lifesg/react-design-system/footer";
-
-export default function Page() {
-    return (
-        <>
-            <Navbar masthead items={{ desktop: [] }} />
-            <main style={{ flex: 1 }}>{/* page content */}</main>
-            <Footer />
-        </>
-    );
-}
-```
-
----
-
-## Step 3 — ThemeProvider (src/App.tsx)
-
-Wrap your app root. Theme is a string matching the slug used in Step 2. Do NOT re-import the CSS here — it is already imported via `index.css`.
-
-```tsx
-// src/App.tsx
-import { ThemeProvider } from "@lifesg/react-design-system/theme";
-import { Navbar } from "@lifesg/react-design-system/navbar";
-import { Footer } from "@lifesg/react-design-system/footer";
-
-export default function App() {
-    return (
-        <ThemeProvider theme="lifesg" mode="light">
-            <Navbar
-                masthead
-                items={{
-                    desktop: [{ id: "home", children: "Home", href: "/" }],
-                }}
-            />
-            <main style={{ flex: 1 }}>{/* page content */}</main>
-            <Footer />
-        </ThemeProvider>
-    );
-}
-```
-
-**Dark/light mode:** `mode` prop defaults to `"auto"` (OS preference).
-
-```tsx
-<ThemeProvider theme="lifesg" mode="light">  {/* force light */}
-<ThemeProvider theme="lifesg" mode="dark">   {/* force dark */}
-```
-
----
-
-## Step 4 — Vite config
-
-No special configuration needed for the design system. Standard React setup:
-
-```ts
-// vite.config.ts
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({
-    plugins: [react()],
-});
-```
-
 ---
 
 ## Verification checklist
 
 -   [ ] `@lifesg/react-design-system`, `@lifesg/react-icons`, `@floating-ui/react` installed
 -   [ ] `styled-components` NOT installed
--   [ ] `main.css` CDN link in `index.html` (or `layout.tsx` for Next.js)
--   [ ] `@lifesg/react-design-system/theme/styles/{theme}.css` imported in `index.css`
+-   [ ] `main.css` and font CDN links imported in HTML doc or CSS file
+-   [ ] `@lifesg/react-design-system/theme/styles/{theme}.css` imported in entrypoint or CSS file
 -   [ ] `ThemeProvider` wraps app root with correct theme string
diff --git a/skills/fds-build/resources/templates/form.md b/skills/fds-build/resources/templates/form.md
index 28c4052b00..b5479900c4 100644
--- a/skills/fds-build/resources/templates/form.md
+++ b/skills/fds-build/resources/templates/form.md
@@ -1,6 +1,6 @@
-# Form Template (v4)
+# Form Template
 
-Single or multi-step form page built with `@lifesg/react-design-system` v4.
+Single or multi-step form page.
 
 ## When to use
 
@@ -12,26 +12,24 @@ Single or multi-step form page built with `@lifesg/react-design-system` v4.
 ## Page anatomy
 
 ```
-┌──────────────────────────────────────────────────────────┐
-│ Header                                                   │
-├──────────────────────────────────────────────────────────┤
-│  <main>                                                  │
-│  └─ pageWrapper (padding: spacing-32 0; lg: spacing-64) │
-│     └─ Layout.Container type="grid"                     │
-│        ├─ Layout.ColDiv xxsCols={[1, -1]}               │
-│        │  └─ ProgressIndicator  (multi-step only)       │
-│        └─ Layout.ColDiv xxsCols={12} lgCols={8}         │
-│           │  flex column · gap: spacing-32               │
-│           ├─ pageHeadingBlock (flex column · gap: 16)   │
-│           │  ├─ h1                                       │
-│           │  └─ p (optional)                             │
-│           ├─ div (form content)                          │
-│           │  └─ Form fields (built-in margin-bottom: 32)│
-│           │     Non-form components → margin-bottom: 32 │
-│           └─ FormNav                                     │
-├──────────────────────────────────────────────────────────┤
-│ Footer                                                   │
-└──────────────────────────────────────────────────────────┘
+Navbar
+──────────────────────────────────────────────────────────
+<main>
+└─ pageWrapper (padding: spacing-32 0; lg: spacing-64)
+   └─ Layout.Container type="grid"
+      ├─ Layout.ColDiv xxsCols={[1, -1]}
+      │  └─ ProgressIndicator (multi-step only)
+      └─ Layout.ColDiv xxsCols={12} lgCols={8}
+         │  flex column · gap: spacing-32
+         ├─ pageHeadingBlock (flex column · gap: 16)
+         │  ├─ h1
+         │  └─ p (optional)
+         ├─ div (form content)
+         │  └─ Form fields (built-in margin-bottom: 32)
+         │     Non-form components → margin-bottom: 32
+         └─ FormNav
+──────────────────────────────────────────────────────────
+Footer
 ```
 
 ---
@@ -40,8 +38,8 @@ Single or multi-step form page built with `@lifesg/react-design-system` v4.
 
 |                          | Wrong                | Correct                                                                                                                                                                                  |
 | ------------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Column width             | `lgCols={12}`        | `xxsCols={12} lgCols={8}`                                                                                                                                                                |
-| Progress indicator       | Inside 8-col div     | Separate `lgCols={12}` ColDiv; `currentIndex` is zero-based                                                                                                                              |
+| Content column width     | `lgCols={12}`        | `xxsCols={12} lgCols={8}`                                                                                                                                                                |
+| Progress indicator       | Inside 8-col div     | Separate `lgCols={12}` ColDiv                                                                                                                                                            |
 | Page heading             | Static string        | Defaults to `{STEPS[step]}`; override per step as needed                                                                                                                                 |
 | Field spacing            | `gap` on wrapper div | Rely on component built-in `margin-bottom: 32`; add `margin-bottom: var(--fds-spacing-32)` via CSS Module class for components without it (BoxContainer, Toggle, FileUpload, ESignature) |
 | Constrained-width inputs | `width` on element   | `max-width` — works alongside internal `width: 100%`                                                                                                                                     |
diff --git a/skills/fds-build/resources/templates/listing.md b/skills/fds-build/resources/templates/listing.md
index e0b86c9e00..06e082c1dd 100644
--- a/skills/fds-build/resources/templates/listing.md
+++ b/skills/fds-build/resources/templates/listing.md
@@ -1,4 +1,4 @@
-# Listing Template (v4)
+# Listing Template
 
 Pages whose primary goal is finding, scanning, or filtering a collection of records.
 
@@ -15,37 +15,29 @@ Do not use for:
 
 ---
 
-## Styling approach
-
-v4 uses **CSS Modules** — no `styled-components`.
-
--   Design tokens are plain CSS variable strings (`var(--fds-spacing-32)`, `var(--fds-colour-text)`, etc.)
--   Responsive styles use the breakpoint class selector: `:where(body.fds-breakpoint-lg-min) &`
--   `ThemeProvider` adds breakpoint classes to `document.body` at runtime
-
----
-
 ## Page anatomy
 
 ```
 Navbar
-main
-  pageWrapper (padding: spacing-32 0; lg: spacing-48)
-  └── Layout.Container type="grid"
-        └── Layout.ColDiv xsCols={8} lgCols={12}
-              searchRow (optional)
-              twoColumn
-                ├── filterSidebar (278px) — omit for search-only variant
-                │     Filter
-                └── resultsArea (flex-1)
-                      resultCountRow
-                      ErrorDisplay type="no-item-found"  ← empty state
-                      Card list / DataTable
-                      paginationWrapper (centred)
+──────────────────────────────────────────────────────────
+<main>
+└─ pageWrapper (padding: spacing-32 0; lg: spacing-48)
+└─ Layout.Container type="grid"
+    └─ Layout.ColDiv xxsCols={[1, -1]}
+    ├─ searchRow (optional)
+    └─ twoColumn
+        ├─ filterSidebar (278px) — omit for search-only variant
+        ├─ Filter
+        └─ resultsArea (flex 1)
+            ├─ resultCountRow
+            ├─ ErrorDisplay type="no-item-found" ← empty state
+            ├─ Card list / DataTable
+            └─ paginationWrapper (centred)
+──────────────────────────────────────────────────────────
 Footer
 ```
 
-On mobile the filter sidebar should be hidden behind a modal — `Filter` handles this automatically when `toggleFilterAtBreakpoint` is set.
+On mobile the `Filter` sidebar automatically collapses into a button that opens a modal.
 
 ---
 

From 0814ae4b0991538e93d38c1eb378843d3d7a76fa Mon Sep 17 00:00:00 2001
From: qroll <quek.ruoling@gmail.com>
Date: Mon, 5 Oct 2026 11:37:32 +0800
Subject: [PATCH 13/15] [MISC][RL] Regen latest props

---
 .../resources/components/breadcrumb.md        |  9 +-
 .../fds-build/resources/components/drawer.md  | 19 ++--
 .../resources/components/file-download.md     | 24 ++---
 .../fds-build/resources/components/filter.md  |  6 +-
 .../resources/components/form-input.md        |  2 +-
 .../resources/components/form-masked-input.md | 10 +-
 .../resources/components/form-multi-select.md | 12 +--
 .../components/form-nested-multi-select.md    | 26 +++---
 .../components/form-nested-select.md          | 28 +++---
 .../resources/components/form-select.md       | 32 +++----
 .../resources/components/form-textarea.md     |  2 +-
 .../components/fullscreen-image-carousel.md   | 91 +++++++++++--------
 .../fds-build/resources/components/input.md   |  2 +-
 .../resources/components/local-nav.md         | 16 +++-
 skills/fds-build/resources/components/menu.md | 27 +++---
 .../fds-build/resources/components/modal.md   | 54 ++++++-----
 .../fds-build/resources/components/navbar.md  | 19 ++--
 .../resources/components/pagination.md        |  3 +-
 18 files changed, 204 insertions(+), 178 deletions(-)

diff --git a/skills/fds-build/resources/components/breadcrumb.md b/skills/fds-build/resources/components/breadcrumb.md
index bae6aa4b34..41f37a4657 100644
--- a/skills/fds-build/resources/components/breadcrumb.md
+++ b/skills/fds-build/resources/components/breadcrumb.md
@@ -33,14 +33,7 @@ import { Breadcrumb } from "@lifesg/react-design-system/breadcrumb";
 />;
 ```
 
-## Props — `FadeColorSet`
-
-| Prop    | Type       | Default | Description                                      |
-| ------- | ---------- | ------- | ------------------------------------------------ |
-| `left`  | `string[]` | —       | Gradient color stops for the left fade overlay.  |
-| `right` | `string[]` | —       | Gradient color stops for the right fade overlay. |
-
-## Props — `BreadcrumbProps`
+## Props
 
 | Prop             | Type                                              | Default      | Description                                                                                                                                                                                                                              |
 | ---------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/skills/fds-build/resources/components/drawer.md b/skills/fds-build/resources/components/drawer.md
index 551c385163..471293c85b 100644
--- a/skills/fds-build/resources/components/drawer.md
+++ b/skills/fds-build/resources/components/drawer.md
@@ -53,15 +53,16 @@ const FilterDrawer = () => {
 
 ## Props
 
-| Prop             | Type              | Default | Description                                                                               |
-| ---------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `children`       | `React.ReactNode` | —       | —                                                                                         |
-| `className`      | `string`          | —       | —                                                                                         |
-| `id`             | `string`          | —       | —                                                                                         |
-| `heading`        | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.        |
-| `show`           | `boolean`         | —       | Controls whether the drawer is visible.                                                   |
-| `onClose`        | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key. |
-| `onOverlayClick` | `(() => void)`    | —       | Called when the user clicks the background overlay.                                       |
+| Prop                 | Type              | Default | Description                                                                                                                                                                    |
+| -------------------- | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`           | `React.ReactNode` | —       | —                                                                                                                                                                              |
+| `className`          | `string`          | —       | —                                                                                                                                                                              |
+| `id`                 | `string`          | —       | —                                                                                                                                                                              |
+| `heading`            | `string`          | —       | Text rendered as the drawer title and used as the accessible label for the dialog.                                                                                             |
+| `show`               | `boolean`         | —       | Controls whether the drawer is visible.                                                                                                                                        |
+| `onClose`            | `(() => void)`    | —       | Called when the user requests to close the drawer via the close button or the Escape key.                                                                                      |
+| `onOverlayClick`     | `(() => void)`    | —       | Called when the user clicks the background overlay.                                                                                                                            |
+| `customCallToAction` | `React.ReactNode` | —       | Optional element rendered in the header, e.g. a link or button. Sits beside the title on wider drawers, and wraps onto its own line below the title once the drawer is narrow. |
 
 ## Rules
 
diff --git a/skills/fds-build/resources/components/file-download.md b/skills/fds-build/resources/components/file-download.md
index e19e6640e5..058ef19a0b 100644
--- a/skills/fds-build/resources/components/file-download.md
+++ b/skills/fds-build/resources/components/file-download.md
@@ -22,17 +22,18 @@ Import: `import { FileDownload } from "@lifesg/react-design-system/file-download
 
 ## Props — `FileItemDownloadProps`
 
-| Prop                    | Type                        | Default | Description                                                                                                                           |
-| ----------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `id` \*                 | `string`                    | —       | —                                                                                                                                     |
-| `name` \*               | `string`                    | —       | The display name of the file.                                                                                                         |
-| `mimeType` \*           | `string`                    | —       | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
-| `size`                  | `number`                    | —       | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
-| `filePath` \*           | `string`                    | —       | The remote path or URL used to fetch the file for download.                                                                           |
-| `errorMessage`          | `string \| React.ReactNode` | —       | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
-| `thumbnailImageDataUrl` | `string`                    | —       | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
-| `truncateText`          | `boolean`                   | true    | Truncates long file names with an ellipsis when `true`.                                                                               |
-| `ready`                 | `boolean`                   | true    | Indicates the file is available and ready to be downloaded.                                                                           |
+| Prop                    | Type                        | Default       | Description                                                                                                                           |
+| ----------------------- | --------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `id` \*                 | `string`                    | —             | —                                                                                                                                     |
+| `name` \*               | `string`                    | —             | The display name of the file.                                                                                                         |
+| `mimeType` \*           | `string`                    | —             | The MIME type of the file (e.g. `"application/pdf"`).                                                                                 |
+| `size`                  | `number`                    | —             | The size of the file in bytes. Displayed as formatted text when provided.                                                             |
+| `filePath` \*           | `string`                    | —             | The remote path or URL used to fetch the file for download.                                                                           |
+| `errorMessage`          | `string \| React.ReactNode` | —             | Error message shown on the file item to indicate a download failure. Accepts a plain string or a React node for richer error display. |
+| `thumbnailImageDataUrl` | `string`                    | —             | URL or data URL for a thumbnail image shown alongside the file entry.                                                                 |
+| `truncateText`          | `boolean`                   | true          | Truncates long file names with an ellipsis when `true`.                                                                               |
+| `ready`                 | `boolean`                   | true          | Indicates the file is available and ready to be downloaded.                                                                           |
+| `clickLabel`            | `string`                    | the file name | Name for the card, used when `FileDownload` is given an `onClick`.                                                                    |
 
 ## Props — `FileDownloadProps`
 
@@ -45,6 +46,7 @@ Import: `import { FileDownload } from "@lifesg/react-design-system/file-download
 | `className`     | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
 | `id`            | `string`                                                 | —          | —                                                                                                                                                                                                                                                                                       |
 | `onDownload` \* | `(file: FileItemDownloadProps) => void \| Promise<void>` | —          | Called when the user triggers a download for an individual file item. May return a `Promise` to handle async download logic; the component awaits resolution. If the callback throws or the promise rejects, the item is marked as failed and the error UI is shown for that file card. |
+| `onClick`       | `((file: FileItemDownloadProps) => void)`                | —          | Called when a file card itself is activated, as opposed to its download button. When omitted, activating the card triggers `onDownload` instead.                                                                                                                                        |
 
 ## Rules
 
diff --git a/skills/fds-build/resources/components/filter.md b/skills/fds-build/resources/components/filter.md
index 38bd0cc470..5b85101b52 100644
--- a/skills/fds-build/resources/components/filter.md
+++ b/skills/fds-build/resources/components/filter.md
@@ -165,13 +165,13 @@ Key points:
 | Prop                      | Type                                                              | Default | Description                                                                                                                                                                                  |
 | ------------------------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `customLabels`            | `\| FilterModalCustomLabelProps \| FilterSidebarCustomLabelProps` | —       | Overrides default labels for the active variant. Only the labels relevant to the current mode (sidebar or modal) are used.                                                                   |
-| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
-| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
 | `id`                      | `string`                                                          | —       | —                                                                                                                                                                                            |
-| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
+| `className`               | `string`                                                          | —       | —                                                                                                                                                                                            |
+| `style`                   | `CSSProperties`                                                   | —       | —                                                                                                                                                                                            |
 | `count`                   | `number`                                                          | —       | Number of active filter selections displayed as a badge on the header and toggle button.                                                                                                     |
 | `clearButtonDisabled`     | `boolean`                                                         | false   | When `true`, the clear button is rendered in a disabled state.                                                                                                                               |
 | `onClear`                 | `(() => void)`                                                    | —       | Called when the clear button is pressed.                                                                                                                                                     |
+| `children`                | `ReactNode \| ((mode: Mode) => ReactNode)`                        | —       | Content rendered inside the filter panel. Pass a render function to receive the current `Mode` and conditionally render different content for desktop (`"default"`) and mobile (`"mobile"`). |
 | `headerTitle`             | `string`                                                          | —       | —                                                                                                                                                                                            |
 | `toggleFilterButtonLabel` | `string`                                                          | —       | —                                                                                                                                                                                            |
 | `doneButtonLabel`         | `string`                                                          | —       | —                                                                                                                                                                                            |
diff --git a/skills/fds-build/resources/components/form-input.md b/skills/fds-build/resources/components/form-input.md
index ebd534f5ca..0c64781046 100644
--- a/skills/fds-build/resources/components/form-input.md
+++ b/skills/fds-build/resources/components/form-input.md
@@ -30,9 +30,9 @@ import { Form } from "@lifesg/react-design-system/form";
 
 | Prop           | Type                        | Default    | Description                                                                                                                                      |
 | -------------- | --------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
 | `spacing`      | `number`                    | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                    |
 | `allowClear`   | `boolean`                   | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                           |
+| `onClear`      | `() => void`                | —          | Called when the user activates the clear button. Use this to clear the controlled value.                                                         |
 | `styleType`    | `InputStyleType`            | "bordered" | Visual style variant.                                                                                                                            |
 | `label`        | `FormLabelProps \| string`  | —          | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
 | `errorMessage` | `string \| React.ReactNode` | —          | Inline error text rendered below the input.                                                                                                      |
diff --git a/skills/fds-build/resources/components/form-masked-input.md b/skills/fds-build/resources/components/form-masked-input.md
index 0e430dfc49..336a9379f6 100644
--- a/skills/fds-build/resources/components/form-masked-input.md
+++ b/skills/fds-build/resources/components/form-masked-input.md
@@ -20,20 +20,20 @@ Import: `import { Form } from "@lifesg/react-design-system/form"`
 | Prop                | Type                          | Default          | Description                                                                                                                                         |
 | ------------------- | ----------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `value`             | `string`                      | —                | —                                                                                                                                                   |
-| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
-| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
-| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
-| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
 | `iconUnmask`        | `JSX.Element`                 | <EyeIcon />      | Icon rendered inside the toggle button while the value is masked                                                                                    |
 | `iconMask`          | `JSX.Element`                 | <EyeSlashIcon /> | Icon rendered inside the toggle button while the value is unmasked                                                                                  |
 | `iconActiveColor`   | `string`                      | —                | CSS color value applied to the mask-toggle icon when it is active                                                                                   |
 | `iconInactiveColor` | `string`                      | —                | CSS color value applied to the mask-toggle icon in its default inactive state.                                                                      |
-| `disableMask`       | `boolean`                     | false            | When `true`, masking is permanently disabled and the raw value is always shown. The toggle icon is not rendered.                                    |
+| `disableMask`       | `boolean`                     | false            | When `true`, the value is permanently unmasked.                                                                                                     |
 | `transformInput`    | `"uppercase" \| "lowercase"`  | —                | Automatically transforms the typed value before it is stored and passed to `onChange`.                                                              |
 | `loadState`         | `MaskedInputLoadState`        | —                | Retrieval state for the value. Only applies when `readOnly` is `true`.                                                                              |
 | `onMask`            | `(() => void)`                | —                | Called when the value transitions from unmasked to masked.                                                                                          |
 | `onUnmask`          | `(() => void)`                | —                | Called when the value transitions from masked to unmasked.                                                                                          |
 | `onTryAgain`        | `(() => void)`                | —                | Called when the user clicks the "Try again?" button shown in the `loadState="fail"` state. Only relevant when `readOnly` is `true`.                 |
+| `spacing`           | `number`                      | —                | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`.                                       |
+| `allowClear`        | `boolean`                     | false            | Shows a clear button when the field has a value and is neither disabled nor read-only.                                                              |
+| `onClear`           | `() => void`                  | —                | Called when the user activates the clear button. Use this to clear the controlled value.                                                            |
+| `styleType`         | `InputStyleType`              | "bordered"       | Visual style variant.                                                                                                                               |
 | `maskRange`         | `number[]`                    | —                | Index range `[start, end]` of the characters to mask (inclusive, zero-based). Characters outside this range remain visible.                         |
 | `unmaskRange`       | `number[]`                    | —                | Index range `[start, end]` of the characters to keep visible (inclusive, zero-based). Characters outside this range are masked.                     |
 | `maskRegex`         | `RegExp`                      | —                | Regular expression whose matches are replaced with `maskChar`.                                                                                      |
diff --git a/skills/fds-build/resources/components/form-multi-select.md b/skills/fds-build/resources/components/form-multi-select.md
index 3923e0d2a3..69530e7217 100644
--- a/skills/fds-build/resources/components/form-multi-select.md
+++ b/skills/fds-build/resources/components/form-multi-select.md
@@ -39,29 +39,29 @@ const options = [
 
 | Prop                       | Type                                                          | Default       | Description                                                                                                                                      |
 | -------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
-| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
 | `valueExtractor`           | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
 | `listExtractor`            | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
 | `renderListItem`           | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
 | `renderCustomCallToAction` | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `readOnly`                 | `boolean`                                                     | —             | —                                                                                                                                                |
 | `selectedOptions`          | `T[]`                                                         | —             | The currently selected options.                                                                                                                  |
 | `onSelectOptions`          | `((options: T[]) => void)`                                    | —             | Called when the selection changes. Receives the updated array of selected options after each user interaction.                                   |
+| `onBlur`                   | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
 | `variant`                  | `DropdownVariantType`                                         | "default"     | Controls the height of the trigger and dropdown items.                                                                                           |
 | `alignment`                | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
 | `dropdownZIndex`           | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
 | `maxSelectable`            | `number`                                                      | —             | Caps the number of options that can be simultaneously selected.                                                                                  |
+| `customLabels`             | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
 | `dropdownWidth`            | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
 | `dropdownRootNode`         | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
 | `options` \*               | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
 | `optionsLoadState`         | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `optionTruncationType`     | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow. Specify `"none"` to display option labels in full.                             |
 | `onShowOptions`            | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
 | `onHideOptions`            | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
 | `onRetry`                  | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                     | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                 | `boolean`                                                     | —             | —                                                                                                                                                |
 | `enableSearch`             | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
 | `hideNoResultsDisplay`     | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
 | `noResultsDescription`     | `React.ReactNode`                                             | —             | —                                                                                                                                                |
diff --git a/skills/fds-build/resources/components/form-nested-multi-select.md b/skills/fds-build/resources/components/form-nested-multi-select.md
index 9ce4685481..fe04d8fb5d 100644
--- a/skills/fds-build/resources/components/form-nested-multi-select.md
+++ b/skills/fds-build/resources/components/form-nested-multi-select.md
@@ -100,32 +100,32 @@ const NestedMultiSelectExample = () => {
 
 | Prop                    | Type                                                                                      | Default       | Description                                                                                                                                                           |
 | ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
+| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
+| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow. Specify `"none"` to display option labels in full.                                                  |
+| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
+| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
+| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
+| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
+| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
+| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
 | `onBlur`                | `(() => void)`                                                                            | —             | Called when focus leaves both the trigger and dropdown.                                                                                                               |
 | `customLabels`          | `DropdownCustomLabelProps`                                                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                            |
-| `disabled`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `name`                  | `string`                                                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                            |
 | `readOnly`              | `boolean`                                                                                 | —             | —                                                                                                                                                                     |
-| `onSelectOptions`       | `\| (( keyPaths: string[][], values: InputNestedMultiSelectValues<V1, V2, V3> ) => void)` | —             | Called after the selection changes.                                                                                                                                   |
+| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
 | `variant`               | `DropdownVariantType`                                                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                |
 | `alignment`             | `DropdownAlignmentType`                                                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                  |
 | `dropdownZIndex`        | `number`                                                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                        |
-| `dropdownWidth`         | `string`                                                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                            |
 | `dropdownRootNode`      | `RefObject<HTMLElement>`                                                                  | document.body | The root element that contains the dropdown element.                                                                                                                  |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                                                             | —             | —                                                                                                                                                                     |
-| `optionsLoadState`      | `ItemsLoadStateType`                                                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                               |
-| `optionTruncationType`  | `TruncateType`                                                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                     |
-| `onShowOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list becomes visible.                                                                                                                        |
-| `onHideOptions`         | `(() => void)`                                                                            | —             | Called when the dropdown list is hidden.                                                                                                                              |
-| `onRetry`               | `(() => void)`                                                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                 |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
 | `enableSearch`          | `boolean`                                                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                 |
 | `hideNoResultsDisplay`  | `boolean`                                                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                             |
 | `noResultsDescription`  | `React.ReactNode`                                                                         | —             | —                                                                                                                                                                     |
 | `searchPlaceholder`     | `string`                                                                                  | —             | —                                                                                                                                                                     |
 | `searchFunction`        | `((searchValue: string) => T[])`                                                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                 |
 | `onSearch`              | `(() => void)`                                                                            | —             | Called when the user types in the search input.                                                                                                                       |
-| `selectedKeyPaths`      | `string[][]`                                                                              | —             | The currently selected options expressed as an array of key paths. Each key path is an ordered array of `key` strings from the root option down to the selected item. |
-| `mode`                  | `ExpandMode`                                                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                              |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                                                     | —             | Function to convert selected value into a string                                                                                                                      |
 | `label`                 | `FormLabelProps \| string`                                                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                              |
 | `errorMessage`          | `string \| React.ReactNode`                                                               | —             | Inline error text rendered below the input.                                                                                                                           |
 | `layoutType`            | `FormElementLayoutType`                                                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                          |
diff --git a/skills/fds-build/resources/components/form-nested-select.md b/skills/fds-build/resources/components/form-nested-select.md
index b60446a40d..a0e28d7a57 100644
--- a/skills/fds-build/resources/components/form-nested-select.md
+++ b/skills/fds-build/resources/components/form-nested-select.md
@@ -92,33 +92,33 @@ const NestedSelectExample = () => {
 
 | Prop                    | Type                                                      | Default       | Description                                                                                                                                                                                         |
 | ----------------------- | --------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
+| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
+| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow. Specify `"none"` to display option labels in full.                                                                                |
+| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
+| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
+| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
+| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
+| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
+| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
+| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
 | `onBlur`                | `(() => void)`                                            | —             | Called when focus leaves both the trigger and the dropdown.                                                                                                                                         |
 | `customLabels`          | `DropdownCustomLabelProps`                                | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                                                                          |
-| `disabled`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
-| `name`                  | `string`                                                  | —             | Name attribute forwarded to the underlying button element.                                                                                                                                          |
 | `readOnly`              | `boolean`                                                 | —             | —                                                                                                                                                                                                   |
+| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
 | `variant`               | `DropdownVariantType`                                     | "default"     | Controls the height of the trigger and dropdown items.                                                                                                                                              |
 | `alignment`             | `DropdownAlignmentType`                                   | —             | Aligns the dropdown relative to the trigger element.                                                                                                                                                |
 | `dropdownZIndex`        | `number`                                                  | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                                                                      |
-| `dropdownWidth`         | `string`                                                  | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                                                                          |
 | `dropdownRootNode`      | `RefObject<HTMLElement>`                                  | document.body | The root element that contains the dropdown element.                                                                                                                                                |
-| `options` \*            | `L1OptionProps<V1, V2, V3>[]`                             | —             | —                                                                                                                                                                                                   |
-| `optionsLoadState`      | `ItemsLoadStateType`                                      | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.                                                             |
-| `optionTruncationType`  | `TruncateType`                                            | "end"         | Controls how long option labels are truncated when they overflow.                                                                                                                                   |
-| `onShowOptions`         | `(() => void)`                                            | —             | Called when the dropdown list becomes visible.                                                                                                                                                      |
-| `onHideOptions`         | `(() => void)`                                            | —             | Called when the dropdown list is hidden.                                                                                                                                                            |
-| `onRetry`               | `(() => void)`                                            | —             | Called when the user activates the retry action after a load failure.                                                                                                                               |
+| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
 | `enableSearch`          | `boolean`                                                 | —             | Renders a search bar inside the dropdown when `true`.                                                                                                                                               |
 | `hideNoResultsDisplay`  | `boolean`                                                 | —             | Suppresses the built-in "no results" message when `true`.                                                                                                                                           |
 | `noResultsDescription`  | `React.ReactNode`                                         | —             | —                                                                                                                                                                                                   |
 | `searchPlaceholder`     | `string`                                                  | —             | —                                                                                                                                                                                                   |
 | `searchFunction`        | `((searchValue: string) => T[])`                          | —             | Custom filter function invoked on each keystroke in the search input.                                                                                                                               |
 | `onSearch`              | `(() => void)`                                            | —             | Called when the user types in the search input.                                                                                                                                                     |
-| `mode`                  | `ExpandMode`                                              | —             | Specifies if items are expanded or collapsed when the dropdown is opened                                                                                                                            |
-| `valueToStringFunction` | `((value: V1 \| V2 \| V3) => string)`                     | —             | Function to convert selected value into a string                                                                                                                                                    |
-| `selectedKeyPath`       | `string[]`                                                | —             | Key path identifying the currently selected option. Each entry is the `key` of the option at that nesting level, ordered from level 1 to the selected level. Drives the controlled selection state. |
-| `selectableCategory`    | `boolean`                                                 | —             | When `true`, parent category labels are themselves selectable as options, not just expand/collapse toggles.                                                                                         |
-| `onSelectOption`        | `\| ((keyPath: string[], value: V1 \| V2 \| V3) => void)` | —             | Called when the user selects an option.                                                                                                                                                             |
 | `label`                 | `FormLabelProps \| string`                                | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                                                                            |
 | `errorMessage`          | `string \| React.ReactNode`                               | —             | Inline error text rendered below the input.                                                                                                                                                         |
 | `layoutType`            | `FormElementLayoutType`                                   | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                                                                        |
diff --git a/skills/fds-build/resources/components/form-select.md b/skills/fds-build/resources/components/form-select.md
index 175946f3af..235942cf46 100644
--- a/skills/fds-build/resources/components/form-select.md
+++ b/skills/fds-build/resources/components/form-select.md
@@ -38,38 +38,38 @@ const options = [
 
 | Prop                         | Type                                                          | Default       | Description                                                                                                                                      |
 | ---------------------------- | ------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
-| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
-| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
 | `readOnly`                   | `boolean`                                                     | —             | —                                                                                                                                                |
-| `isOptionDisabled`           | `((item: T) => boolean)`                                      | —             | Returns `true` if the given option should be shown but not selectable.                                                                           |
-| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
-| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
-| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
-| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
+| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
+| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
+| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
+| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
+| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
+| `onBlur`                     | `(() => void)`                                                | —             | Called when focus leaves both the trigger and dropdown.                                                                                          |
 | `variant`                    | `DropdownVariantType`                                         | "default"     | Visual size variant of the trigger and dropdown.                                                                                                 |
 | `alignment`                  | `DropdownAlignmentType`                                       | —             | Aligns the dropdown relative to the trigger element.                                                                                             |
 | `dropdownZIndex`             | `number`                                                      | —             | CSS `z-index` applied to the dropdown overlay.                                                                                                   |
-| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
 | `dropdownRootNode`           | `RefObject<HTMLElement>`                                      | document.body | The root element that contains the dropdown element.                                                                                             |
+| `dropdownWidth`              | `string`                                                      | —             | Custom width for the dropdown. When specified, the dropdown uses this width instead of matching the trigger element width.                       |
+| `customLabels`               | `DropdownCustomLabelProps`                                    | —             | Overrides the default labels shown inside the dropdown and on the trigger.                                                                       |
 | `options` \*                 | `T[]`                                                         | —             | The list of selectable options rendered in the dropdown.                                                                                         |
 | `optionsLoadState`           | `ItemsLoadStateType`                                          | "success"     | Indicates the load state of options fetched asynchronously. Renders a loading spinner, error retry, or the list depending on the state.          |
-| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow.                                                                                |
+| `optionTruncationType`       | `TruncateType`                                                | "end"         | Controls how long option labels are truncated when they overflow. Specify `"none"` to display option labels in full.                             |
 | `onShowOptions`              | `(() => void)`                                                | —             | Called when the dropdown list becomes visible.                                                                                                   |
 | `onHideOptions`              | `(() => void)`                                                | —             | Called when the dropdown list is hidden.                                                                                                         |
 | `onRetry`                    | `(() => void)`                                                | —             | Called when the user activates the retry action after a load failure.                                                                            |
+| `name`                       | `string`                                                      | —             | Name attribute forwarded to the underlying button element.                                                                                       |
+| `disabled`                   | `boolean`                                                     | —             | —                                                                                                                                                |
+| `valueExtractor`             | `((item: T) => V)`                                            | —             | Extracts the comparable value from an option item.                                                                                               |
+| `listExtractor`              | `((item: T) => string \| ListItemDisplayProps)`               | —             | Extracts the display text for a list item.                                                                                                       |
+| `isOptionDisabled`           | `((item: T) => boolean)`                                      | —             | Returns `true` if the given option should be shown but not selectable.                                                                           |
+| `renderListItem`             | `\| ((item: T, args: ListItemRenderArgs) => JSX.Element)`     | —             | Renders a fully custom element for each list item.                                                                                               |
+| `renderCustomCallToAction`   | `\| ((hideOptions: () => void, options: T[]) => JSX.Element)` | —             | Renders a custom call-to-action at the bottom of the dropdown list.                                                                              |
 | `enableSearch`               | `boolean`                                                     | —             | Renders a search bar inside the dropdown when `true`.                                                                                            |
 | `hideNoResultsDisplay`       | `boolean`                                                     | —             | Suppresses the built-in "no results" message when `true`.                                                                                        |
 | `noResultsDescription`       | `React.ReactNode`                                             | —             | —                                                                                                                                                |
 | `searchPlaceholder`          | `string`                                                      | —             | —                                                                                                                                                |
 | `searchFunction`             | `((searchValue: string) => T[])`                              | —             | Custom filter function invoked on each keystroke in the search input.                                                                            |
 | `onSearch`                   | `(() => void)`                                                | —             | Called when the user types in the search input.                                                                                                  |
-| `valueToStringFunction`      | `((value: V) => string)`                                      | —             | Function to convert selected value into a display string                                                                                         |
-| `onSelectOption`             | `((option: T, extractedValue: V) => void)`                    | —             | Called when the user picks an item from the dropdown.                                                                                            |
-| `selectedOption`             | `T`                                                           | —             | The currently selected option. The component syncs to this value on each render.                                                                 |
-| `displayValueExtractor`      | `((option: T) => string)`                                     | —             | Derives the display string shown in the trigger for the selected option. Takes precedence over `valueExtractor` + `valueToStringFunction`.       |
-| `renderCustomSelectedOption` | `((option: T) => JSX.Element)`                                | —             | Renders a custom element for the currently selected option.                                                                                      |
 | `label`                      | `FormLabelProps \| string`                                    | —             | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
 | `errorMessage`               | `string \| React.ReactNode`                                   | —             | Inline error text rendered below the input.                                                                                                      |
 | `layoutType`                 | `FormElementLayoutType`                                       | —             | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
diff --git a/skills/fds-build/resources/components/form-textarea.md b/skills/fds-build/resources/components/form-textarea.md
index d935b0cfe9..2f6097f0b3 100644
--- a/skills/fds-build/resources/components/form-textarea.md
+++ b/skills/fds-build/resources/components/form-textarea.md
@@ -82,9 +82,9 @@ The prop signature is `(maxLength: number, currentValueLength: number) => JSX.El
 
 | Prop                  | Type                                                                  | Default | Description                                                                                                                                      |
 | --------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
 | `errorMessage`        | `string \| React.ReactNode`                                           | —       | Inline error text rendered below the textarea. Also sets the input into an error state.                                                          |
 | `transformValue`      | `((value: string) => string)`                                         | —       | Transforms user input on every change event.                                                                                                     |
+| `prefix`              | `string`                                                              | —       | A read-only string permanently displayed at the start of the textarea.                                                                           |
 | `renderCustomCounter` | `\| ((maxLength: number, currentValueLength: number) => JSX.Element)` | —       | Replaces the built-in character counter displayed below the textarea. Called only when `maxLength` is provided.                                  |
 | `label`               | `FormLabelProps \| string`                                            | —       | Label rendered above the input. Accepts a plain string or a `FormLabelProps` object to provide additional configuration.                         |
 | `layoutType`          | `FormElementLayoutType`                                               | —       | Controls whether the container uses flex layout or a responsive column grid.                                                                     |
diff --git a/skills/fds-build/resources/components/fullscreen-image-carousel.md b/skills/fds-build/resources/components/fullscreen-image-carousel.md
index 43c2def61d..3a59c86eca 100644
--- a/skills/fds-build/resources/components/fullscreen-image-carousel.md
+++ b/skills/fds-build/resources/components/fullscreen-image-carousel.md
@@ -76,46 +76,58 @@ const DocViewer = () => {
 | `goToPrevItem` \*     | `() => void`                         | —       | Navigates to the previous item, wrapping from the first item to the last. |
 | `goToNextItem` \*     | `() => void`                         | —       | Navigates to the next item, wrapping from the last item to the first.     |
 
+## Props — `FullscreenImageCarouselCustomAction`
+
+| Prop           | Type                                                              | Default | Description                              |
+| -------------- | ----------------------------------------------------------------- | ------- | ---------------------------------------- |
+| `icon` \*      | `JSX.Element`                                                     | —       | Icon element rendered inside the button. |
+| `ariaLabel` \* | `string`                                                          | —       | Accessible name for the button.          |
+| `onClick` \*   | `(item: FullscreenImageCarouselItemProps, index: number) => void` | —       | Called when the action is activated.     |
+
 ## Props — `FullscreenImageCarouselProps`
 
-| Prop                     | Type                                                                   | Default  | Description                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                           |
-| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                     |
-| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                |
-| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                          |
-| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                            |
-| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop. |
-| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                               |
-| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                        |
-| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.  |
-| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                         |
-| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                          |
-| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                            |
-| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                      |
+| Prop                     | Type                                                                   | Default  | Description                                                                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `items` \*               | `FullscreenImageCarouselItemProps[]`                                   | —        | The list of items to display. Each item is either an image or a custom content item.                                                                                           |
+| `initialActiveItemIndex` | `number`                                                               | 0        | Zero-based index of the item that is active when the carousel first opens.                                                                                                     |
+| `hideThumbnail`          | `boolean`                                                              | false    | Hides the thumbnail strip below the main slide.                                                                                                                                |
+| `hideNavigation`         | `boolean`                                                              | false    | Hides the previous and next arrow navigation buttons.                                                                                                                          |
+| `hideCounter`            | `boolean`                                                              | false    | Hides the slide position counter chip (e.g. "2/5").                                                                                                                            |
+| `hideMagnifier`          | `boolean`                                                              | false    | Hides the zoom in/out magnifier button. Has no effect on custom items, which never show the magnifier regardless of this prop.                                                 |
+| `customActions`          | `FullscreenImageCarouselCustomAction[]`                                | —        | Additional icon buttons rendered in the top bar, positioned before the default buttons. Applies to every item. An item's own `customActions` replaces this list for that item. |
+| `onDelete`               | `\| ((item: FullscreenImageCarouselItemProps, index: number) => void)` | —        | Called when the delete button is activated for the current item.                                                                                                               |
+| `onClose`                | `(() => void)`                                                         | —        | Called when the close button is activated or the Escape key is pressed.                                                                                                        |
+| `insets`                 | `Insets`                                                               | —        | Additional pixel insets applied to keep content within a safe area of the viewport and avoid overlap with device UI elements.                                                  |
+| `topBarRef`              | `React.Ref<HTMLDivElement>`                                            | —        | Ref to the top bar element, which holds the file info and the action buttons.                                                                                                  |
+| `show` \*                | `boolean`                                                              | false    | Controls whether the modal is visible.                                                                                                                                         |
+| `rootComponentId`        | `string`                                                               | —        | The `id` of the DOM element to portal the modal into.                                                                                                                          |
+| `animationFrom`          | `ModalAnimationDirection`                                              | "bottom" | Direction from which the modal animates in and out.                                                                                                                            |
+| `zIndex`                 | `number`                                                               | —        | The z-index applied to the overlay stack.                                                                                                                                      |
 
 ## Props — `FullscreenImageCarouselImageItemProps`
 
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `src` \*        | `string`  | —       | URL of the full-resolution image shown in the slide.                                     |
-| `alt`           | `string`  | —       | Accessible label for the image.                                                          |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+| Prop            | Type                                    | Default | Description                                                                                                                                                                         |
+| --------------- | --------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`          | `"image"`                               | —       | —                                                                                                                                                                                   |
+| `src` \*        | `string`                                | —       | URL of the full-resolution image shown in the slide.                                                                                                                                |
+| `alt`           | `string`                                | —       | Accessible label for the image.                                                                                                                                                     |
+| `thumbnailSrc`  | `string`                                | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.                                                                                                    |
+| `renderContent` | `never`                                 | —       | —                                                                                                                                                                                   |
+| `fileName`      | `string`                                | —       | Display name of the file shown in the top info bar.                                                                                                                                 |
+| `fileSize`      | `string`                                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                                                                            |
+| `customActions` | `FullscreenImageCarouselCustomAction[]` | —       | Replaces the component-level `customActions` while this item is active. Leave `undefined` to inherit the component-level list. Pass `[]` to render no custom actions for this item. |
 
 ## Props — `FullscreenImageCarouselCustomItemProps`
 
-| Prop               | Type                    | Default | Description                                                                                                                          |
-| ------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `type` \*          | `"custom"`              | —       | —                                                                                                                                    |
-| `thumbnailSrc`     | `string`                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                  |
-| `itemLabel`        | `string`                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                |
-| `renderContent` \* | `() => React.ReactNode` | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). |
-| `fileName`         | `string`                | —       | Display name of the file shown in the top info bar.                                                                                  |
-| `fileSize`         | `string`                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                             |
+| Prop               | Type                                    | Default | Description                                                                                                                                                                         |
+| ------------------ | --------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` \*          | `"custom"`                              | —       | —                                                                                                                                                                                   |
+| `thumbnailSrc`     | `string`                                | —       | The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip.                                                                                                 |
+| `itemLabel`        | `string`                                | "image" | Label for this item used in aria-labels (e.g. "PDF").                                                                                                                               |
+| `renderContent` \* | `() => React.ReactNode`                 | —       | Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer).                                                |
+| `fileName`         | `string`                                | —       | Display name of the file shown in the top info bar.                                                                                                                                 |
+| `fileSize`         | `string`                                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                                                                            |
+| `customActions`    | `FullscreenImageCarouselCustomAction[]` | —       | Replaces the component-level `customActions` while this item is active. Leave `undefined` to inherit the component-level list. Pass `[]` to render no custom actions for this item. |
 
 ## Props — `ImageDimension`
 
@@ -126,13 +138,14 @@ const DocViewer = () => {
 
 ## Props — `FullscreenImageCarouselItemProps`
 
-| Prop            | Type      | Default | Description                                                                              |
-| --------------- | --------- | ------- | ---------------------------------------------------------------------------------------- |
-| `type`          | `"image"` | —       | —                                                                                        |
-| `thumbnailSrc`  | `string`  | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.         |
-| `renderContent` | `never`   | —       | —                                                                                        |
-| `fileName`      | `string`  | —       | Display name of the file shown in the top info bar.                                      |
-| `fileSize`      | `string`  | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB"). |
+| Prop            | Type                                    | Default | Description                                                                                                                                                                         |
+| --------------- | --------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`          | `"image"`                               | —       | —                                                                                                                                                                                   |
+| `thumbnailSrc`  | `string`                                | —       | URL of the image shown in the thumbnail strip. Falls back to `src` when omitted.                                                                                                    |
+| `renderContent` | `never`                                 | —       | —                                                                                                                                                                                   |
+| `fileName`      | `string`                                | —       | Display name of the file shown in the top info bar.                                                                                                                                 |
+| `fileSize`      | `string`                                | —       | Human-readable file size shown alongside `fileName` in the top info bar (e.g. "2.4 MB").                                                                                            |
+| `customActions` | `FullscreenImageCarouselCustomAction[]` | —       | Replaces the component-level `customActions` while this item is active. Leave `undefined` to inherit the component-level list. Pass `[]` to render no custom actions for this item. |
 
 ## Rules
 
diff --git a/skills/fds-build/resources/components/input.md b/skills/fds-build/resources/components/input.md
index fb1a741fbc..2ad6979937 100644
--- a/skills/fds-build/resources/components/input.md
+++ b/skills/fds-build/resources/components/input.md
@@ -27,9 +27,9 @@ Use `Input` for standalone inputs that do not need a label or error message —
 
 | Prop         | Type             | Default    | Description                                                                                                   |
 | ------------ | ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
 | `spacing`    | `number`         | —          | Inserts a space after every `spacing` characters in the displayed value. Only applies when `type` is `"tel"`. |
 | `allowClear` | `boolean`        | false      | Shows a clear button when the field has a value and is neither disabled nor read-only.                        |
+| `onClear`    | `() => void`     | —          | Called when the user activates the clear button. Use this to clear the controlled value.                      |
 | `styleType`  | `InputStyleType` | "bordered" | Visual style variant.                                                                                         |
 
 ## Rules
diff --git a/skills/fds-build/resources/components/local-nav.md b/skills/fds-build/resources/components/local-nav.md
index 3fd0b9c364..d9a0db7e27 100644
--- a/skills/fds-build/resources/components/local-nav.md
+++ b/skills/fds-build/resources/components/local-nav.md
@@ -51,12 +51,20 @@ const navItems = [
 />;
 ```
 
+## Props — `TitleAddonProps`
+
+| Prop    | Type          | Default | Description                                                             |
+| ------- | ------------- | ------- | ----------------------------------------------------------------------- |
+| `left`  | `JSX.Element` | —       | Element rendered immediately before the title.                          |
+| `right` | `JSX.Element` | —       | Element rendered after the title, flushed to the far right of the item. |
+
 ## Props — `LocalNavItemProps`
 
-| Prop       | Type                        | Default | Description |
-| ---------- | --------------------------- | ------- | ----------- |
-| `title` \* | `string \| React.ReactNode` | —       | —           |
-| `id`       | `string`                    | —       | —           |
+| Prop         | Type                        | Default | Description                                                                                                                                                 |
+| ------------ | --------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title` \*   | `string \| React.ReactNode` | —       | —                                                                                                                                                           |
+| `id`         | `string`                    | —       | —                                                                                                                                                           |
+| `titleAddon` | `TitleAddonProps`           | —       | Optional addon element rendered alongside the item title. Ignored when a custom `renderItem` is provided, since the caller then controls the item's layout. |
 
 ## Props — `LocalNavMenuItemRenderProps`
 
diff --git a/skills/fds-build/resources/components/menu.md b/skills/fds-build/resources/components/menu.md
index 251c61e634..626ac316ec 100644
--- a/skills/fds-build/resources/components/menu.md
+++ b/skills/fds-build/resources/components/menu.md
@@ -52,11 +52,11 @@ import { Button } from "@lifesg/react-design-system/button";
 | ------------------ | -------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `menuContent` \*   | `FunctionComponentElement<MenuContentProps>` | —                  | The `Menu.Content` element to display inside the popover panel.                                                                                                                 |
 | `position`         | `PopoverPosition`                            | "bottom-start"     | Preferred placement of the popover relative to the trigger.                                                                                                                     |
-| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
-| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
 | `children` \*      | `React.ReactNode`                            | —                  | The trigger element rendered inside a focusable wrapper div.                                                                                                                    |
-| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
 | `trigger`          | `PopoverTriggerType`                         | "click"            | Interaction that opens the popover.                                                                                                                                             |
+| `id`               | `string`                                     | —                  | —                                                                                                                                                                               |
+| `zIndex`           | `number`                                     | —                  | Overrides the stacking context z-index for the floating popover layer. Falls back to the inherited floating context z-index when omitted.                                       |
+| `className`        | `string`                                     | —                  | —                                                                                                                                                                               |
 | `rootNode`         | `RefObject<HTMLElement>`                     | document.body      | The root element that contains the popover element.                                                                                                                             |
 | `customOffset`     | `number`                                     | 16                 | Distance in pixels between the trigger element and the popover panel.                                                                                                           |
 | `delay`            | `\| { open?: number; close?: number }`       | —                  | Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.                                                                                                |
@@ -71,19 +71,20 @@ import { Button } from "@lifesg/react-design-system/button";
 
 ## Props — `MenuContentProps`
 
-| Prop          | Type                                                                        | Default | Description                                                      |
-| ------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `children` \* | `\| ReactElement<typeof MenuSection> \| ReactElement<typeof MenuSection>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
-| `overflow`    | `PopoverOverflowType`                                                       | —       | CSS `overflow` value applied to the popover card body.           |
-| `maxHeight`   | `number`                                                                    | —       | Maximum height of the popover card in pixels.                    |
+| Prop          | Type                                                                 | Default | Description                                                      |
+| ------------- | -------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `children` \* | `ReactElement<MenuSectionProps> \| ReactElement<MenuSectionProps>[]` | —       | One or more `Menu.Section` elements that make up the panel body. |
+| `overflow`    | `PopoverOverflowType`                                                | —       | CSS `overflow` value applied to the popover card body.           |
+| `maxHeight`   | `number`                                                             | —       | Maximum height of the popover card in pixels.                    |
 
 ## Props — `MenuSectionProps`
 
-| Prop          | Type                                   | Default | Description                                                                 |
-| ------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
-| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.        |
-| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above. |
-| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                    |
+| Prop          | Type                                   | Default | Description                                                                                                                                                                                                                                      |
+| ------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children` \* | `MenuSectionItem \| MenuSectionItem[]` | —       | One or more `Menu.Item` or `Menu.Link` elements within this section.                                                                                                                                                                             |
+| `showDivider` | `boolean`                              | true    | Whether to render a top divider separating this section from the one above.                                                                                                                                                                      |
+| `columns`     | `number`                               | —       | Renders section children in a grid with the given number of columns on desktop. Items flow vertically (top-to-bottom) within each column before wrapping to the next. Has no effect on mobile viewports, which always render as a single column. |
+| `label`       | `string`                               | —       | Accessible group label rendered above the section items.                                                                                                                                                                                         |
 
 ## Props — `MenuItemProps`
 
diff --git a/skills/fds-build/resources/components/modal.md b/skills/fds-build/resources/components/modal.md
index 463cbae341..940956bc5e 100644
--- a/skills/fds-build/resources/components/modal.md
+++ b/skills/fds-build/resources/components/modal.md
@@ -87,35 +87,26 @@ const ConfirmDeleteModal = () => {
 </ModalV2>
 ```
 
-## Props — `ModalV2Props`
-
-| Prop                    | Type                      | Default       | Description                                                                                  |
-| ----------------------- | ------------------------- | ------------- | -------------------------------------------------------------------------------------------- |
-| `show` \*               | `boolean`                 | false         | Controls whether the modal is visible.                                                       |
-| `children` \*           | `React.JSX.Element`       | —             | The content of the modal. Must be a valid HTML element or a component that forwards a ref.   |
-| `animationFrom`         | `ModalAnimationDirection` | "bottom"      | Direction from which the modal animates in and out.                                          |
-| `enableOverlayClick`    | `boolean`                 | true          | Whether clicking the overlay backdrop triggers `onOverlayClick`.                             |
-| `rootComponentId`       | `string`                  | document.body | The `id` of the DOM element to portal the modal into.                                        |
-| `zIndex`                | `number`                  | —             | Z-index applied to the overlay stack.                                                        |
-| `onClose`               | `(() => void)`            | —             | Called when dismissed via the Escape key or close button.                                    |
-| `onOverlayClick`        | `(() => void)`            | —             | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.              |
-| `dismissKeyboardOnShow` | `boolean`                 | true          | Blurs the focused element when the modal opens, dismissing the on-screen keyboard on mobile. |
-| `disableInitialFocus`   | `boolean`                 | false         | Disables automatic focus on the modal container when it opens.                               |
-
 ## Props — `ModalCardProps`
 
-| Prop          | Type                        | Default | Description                                                                                     |
-| ------------- | --------------------------- | ------- | ----------------------------------------------------------------------------------------------- |
-| `children` \* | `React.ReactNode`           | —       | Slot content — `ModalV2.Header`, `ModalV2.Content`, `ModalV2.Footer`, or `ModalV2.CloseButton`. |
-| `fullscreen`  | `boolean`                   | —       | Expands the card to fill the viewport with no border-radius, padding, or box-shadow.            |
-| `elementRef`  | `React.Ref<HTMLDivElement>` | —       | Ref to the card DOM element.                                                                    |
+| Prop          | Type                        | Default | Description                                                                                                                       |
+| ------------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `children` \* | `React.ReactNode`           | —       | —                                                                                                                                 |
+| `elementRef`  | `React.Ref<HTMLDivElement>` | —       | Ref to the modal card DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead. |
+| `fullscreen`  | `boolean`                   | —       | When `true`, the card expands to fill the viewport with no border-radius, padding, or box-shadow.                                 |
 
 ## Props — `ModalHeaderProps`
 
-| Prop                  | Type                | Default | Description                                        |
-| --------------------- | ------------------- | ------- | -------------------------------------------------- |
-| `title`               | `string`            | —       | Heading text. Omit for a close-button-only header. |
-| `closeButtonPosition` | `"left" \| "right"` | "right" | Which side the close button appears on.            |
+| Prop                  | Type                | Default | Description                                                                                                                    |
+| --------------------- | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `title`               | `string`            | —       | Heading text rendered in the header. Always centered regardless of `closeButtonPosition`. Omit for a close-button-only header. |
+| `closeButtonPosition` | `"left" \| "right"` | "right" | Which side of the header the close button is placed on. The title alignment adjusts automatically.                             |
+
+## Props — `ModalContentProps`
+
+| Prop          | Type              | Default | Description |
+| ------------- | ----------------- | ------- | ----------- |
+| `children` \* | `React.ReactNode` | —       | —           |
 
 ## Props — `ModalFooterProps`
 
@@ -124,6 +115,21 @@ const ConfirmDeleteModal = () => {
 | `primaryButton`   | `React.ReactNode` | —       | Node rendered in the primary action position.   |
 | `secondaryButton` | `React.ReactNode` | —       | Node rendered in the secondary action position. |
 
+## Props — `ModalV2Props`
+
+| Prop                    | Type                      | Default  | Description                                                                                                                                             |
+| ----------------------- | ------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` \*               | `boolean`                 | false    | Controls whether the modal is visible.                                                                                                                  |
+| `children` \*           | `React.JSX.Element`       | —        | The content of the modal. The parent element must be a valid HTML element or a component that forwards a ref to a valid HTML element.                   |
+| `animationFrom`         | `ModalAnimationDirection` | "bottom" | Direction from which the modal animates in and out.                                                                                                     |
+| `enableOverlayClick`    | `boolean`                 | true     | Whether clicking the overlay backdrop triggers `onOverlayClick`. The caller is responsible for dismissing the modal in the callback.                    |
+| `rootComponentId`       | `string`                  | —        | The `id` of the DOM element to portal the modal into.                                                                                                   |
+| `zIndex`                | `number`                  | —        | The z-index applied to the overlay stack.                                                                                                               |
+| `onClose`               | `(() => void)`            | —        | Called when the modal is dismissed via the Escape key and close button.                                                                                 |
+| `onOverlayClick`        | `(() => void)`            | —        | Called when the overlay backdrop is clicked and `enableOverlayClick` is `true`.                                                                         |
+| `dismissKeyboardOnShow` | `boolean`                 | true     | Blurs the currently focused element when the modal becomes visible, dismissing the on-screen keyboard on mobile to prevent it from obscuring the modal. |
+| `disableInitialFocus`   | `boolean`                 | false    | Disables automatic focus on the modal container when it opens. When `true`, the consumer is responsible for focusing an element within the modal.       |
+
 ## Rules
 
 -   Always pass `onClose` to `ModalV2` — it is used by `ModalV2.Header` / `ModalV2.CloseButton` via context.
diff --git a/skills/fds-build/resources/components/navbar.md b/skills/fds-build/resources/components/navbar.md
index c904041390..af8a0a5bef 100644
--- a/skills/fds-build/resources/components/navbar.md
+++ b/skills/fds-build/resources/components/navbar.md
@@ -89,15 +89,16 @@ Key points:
 
 ## Props — `NavItemLinkProps`
 
-| Prop             | Type                       | Default     | Description                                                                                                   |
-| ---------------- | -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `itemType`       | `"link"`                   | —           | —                                                                                                             |
-| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                             |
-| `id` \*          | `string`                   | —           | —                                                                                                             |
-| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                    |
-| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                 |
-| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site. |
-| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                           |
+| Prop             | Type                       | Default     | Description                                                                                                                                                                                                                                     |
+| ---------------- | -------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `itemType`       | `"link"`                   | —           | —                                                                                                                                                                                                                                               |
+| `subMenu`        | `NavItemCommonProps<T>[]`  | —           | —                                                                                                                                                                                                                                               |
+| `subMenuColumns` | `number`                   | —           | Renders `subMenu` as a multi-column layout on desktop. Items flow vertically (top-to-bottom) within each column before wrapping to the next. Has no effect on the mobile drawer, which always renders `subMenu` as an expandable vertical list. |
+| `id` \*          | `string`                   | —           | —                                                                                                                                                                                                                                               |
+| `options`        | `T`                        | —           | Arbitrary data passed through to callback arguments such as `onItemClick`.                                                                                                                                                                      |
+| `weight`         | `TypographyWeight`         | "regular"   | Font weight of the link text.                                                                                                                                                                                                                   |
+| `external`       | `boolean`                  | —           | Appends an external-link icon after the link text to signal that the destination is outside the current site.                                                                                                                                   |
+| `underlineStyle` | `TypographyUnderlineStyle` | "underline" | Text-decoration style for the link.                                                                                                                                                                                                             |
 
 ## Props — `NavItemComponentProps`
 
diff --git a/skills/fds-build/resources/components/pagination.md b/skills/fds-build/resources/components/pagination.md
index f322cfb154..e20716b857 100644
--- a/skills/fds-build/resources/components/pagination.md
+++ b/skills/fds-build/resources/components/pagination.md
@@ -68,12 +68,13 @@ const [pageSize, setPageSize] = useState(10);
 | --------------------- | -------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------- |
 | `id`                  | `string`                                     | —                   | —                                                                                                             |
 | `className`           | `string`                                     | —                   | —                                                                                                             |
+| `variant`             | `"default" \| "full" \| "compact"`           | "default"           | Controls whether the pagination follows the responsive layout or always renders the full or compact layout.   |
 | `pageSize`            | `number`                                     | 10                  | Number of items displayed per page.                                                                           |
 | `totalItems` \*       | `number`                                     | —                   | Total number of items across all pages. Used to compute the total page count.                                 |
 | `activePage` \*       | `number`                                     | —                   | The currently active 1-based page number. This is a controlled prop; update it in response to `onPageChange`. |
 | `pageSizeOptions`     | `PageSizeItemProps[]`                        | 10, 20, 30 per page | Options listed in the page-size changer dropdown. Only relevant when `showPageSizeChanger` is `true`.         |
 | `showFirstAndLastNav` | `boolean`                                    | —                   | When `true`, renders first-page and last-page navigation buttons alongside the previous/next buttons.         |
-| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown on desktop viewports to change the `pageSize`.                                |
+| `showPageSizeChanger` | `boolean`                                    | false               | When `true`, renders a dropdown in the full layout to change the `pageSize`.                                  |
 | `onPageChange`        | `((page: number) => void)`                   | —                   | Called when the user navigates to a different page.                                                           |
 | `onPageSizeChange`    | `((page: number, pageSize: number) => void)` | —                   | Called when the user selects a different page size from the dropdown and `showPageSizeChanger` is `true`.     |
 

From 94a32f6a508b0d766cc009ed79cb39bc3199a72f Mon Sep 17 00:00:00 2001
From: qroll <quek.ruoling@gmail.com>
Date: Mon, 5 Oct 2026 11:46:59 +0800
Subject: [PATCH 14/15] [MISC][RL] Remove v4 references

---
 skills/fds-build/resources/components/form-date-input.md        | 2 --
 skills/fds-build/resources/components/form-date-range-input.md  | 2 --
 .../fds-build/resources/components/form-phone-number-input.md   | 2 --
 skills/fds-build/resources/components/form-time-range-picker.md | 2 --
 skills/fds-build/resources/components/form-timepicker.md        | 2 --
 skills/fds-build/resources/components/form-unit-number-input.md | 2 --
 skills/fds-build/resources/components/layout.md                 | 2 --
 skills/fds-build/resources/components/modal.md                  | 2 +-
 skills/fds-build/resources/setup/setup.md                       | 2 +-
 9 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/skills/fds-build/resources/components/form-date-input.md b/skills/fds-build/resources/components/form-date-input.md
index 02ada2b211..9143167b6a 100644
--- a/skills/fds-build/resources/components/form-date-input.md
+++ b/skills/fds-build/resources/components/form-date-input.md
@@ -1,7 +1,5 @@
 # Form.DateInput
 
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
 Import: `import { Form } from "@lifesg/react-design-system/form"`
 
 ## When to use
diff --git a/skills/fds-build/resources/components/form-date-range-input.md b/skills/fds-build/resources/components/form-date-range-input.md
index 2c3690bafb..a3ff41d107 100644
--- a/skills/fds-build/resources/components/form-date-range-input.md
+++ b/skills/fds-build/resources/components/form-date-range-input.md
@@ -1,7 +1,5 @@
 # Form.DateRangeInput
 
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
 Import: `import { Form } from "@lifesg/react-design-system/form"`
 
 ## When to use
diff --git a/skills/fds-build/resources/components/form-phone-number-input.md b/skills/fds-build/resources/components/form-phone-number-input.md
index 345e09b551..16e1ce32ac 100644
--- a/skills/fds-build/resources/components/form-phone-number-input.md
+++ b/skills/fds-build/resources/components/form-phone-number-input.md
@@ -1,7 +1,5 @@
 # Form.PhoneNumberInput
 
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
 Import: `import { Form } from "@lifesg/react-design-system/form"`
 
 Type import: `import type { PhoneNumberInputValue } from "@lifesg/react-design-system/phone-number-input"`
diff --git a/skills/fds-build/resources/components/form-time-range-picker.md b/skills/fds-build/resources/components/form-time-range-picker.md
index 9664cf5937..733b36ab0b 100644
--- a/skills/fds-build/resources/components/form-time-range-picker.md
+++ b/skills/fds-build/resources/components/form-time-range-picker.md
@@ -1,7 +1,5 @@
 # Form.TimeRangePicker
 
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
 Import: `import { Form } from "@lifesg/react-design-system/form"`
 
 ## When to use
diff --git a/skills/fds-build/resources/components/form-timepicker.md b/skills/fds-build/resources/components/form-timepicker.md
index ddb91e9be7..a5d70d1e45 100644
--- a/skills/fds-build/resources/components/form-timepicker.md
+++ b/skills/fds-build/resources/components/form-timepicker.md
@@ -1,7 +1,5 @@
 # Form.Timepicker
 
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
 Import: `import { Form } from "@lifesg/react-design-system/form"`
 
 > **Casing:** the export is `Form.Timepicker` (lowercase `p`), not `Form.TimePicker`.
diff --git a/skills/fds-build/resources/components/form-unit-number-input.md b/skills/fds-build/resources/components/form-unit-number-input.md
index 1d9856a220..705823bf47 100644
--- a/skills/fds-build/resources/components/form-unit-number-input.md
+++ b/skills/fds-build/resources/components/form-unit-number-input.md
@@ -1,7 +1,5 @@
 # Form.UnitNumberInput
 
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
 Import: `import { Form } from "@lifesg/react-design-system/form"`
 
 ## When to use
diff --git a/skills/fds-build/resources/components/layout.md b/skills/fds-build/resources/components/layout.md
index 766ae91dac..b77a8d0948 100644
--- a/skills/fds-build/resources/components/layout.md
+++ b/skills/fds-build/resources/components/layout.md
@@ -1,7 +1,5 @@
 # Layout
 
-> v4 — CSS Modules replace styled-components. See SKILL-v4.md for setup.
-
 Import: `import { Layout } from "@lifesg/react-design-system/layout"`
 
 ## Composition
diff --git a/skills/fds-build/resources/components/modal.md b/skills/fds-build/resources/components/modal.md
index 940956bc5e..091e7e1f52 100644
--- a/skills/fds-build/resources/components/modal.md
+++ b/skills/fds-build/resources/components/modal.md
@@ -6,7 +6,7 @@ Import: `import { ModalV2 } from "@lifesg/react-design-system/modal-v2"`
 
 Use for focused interactions that interrupt the user's flow — confirmations, detail views, or short multi-field forms that do not warrant a new page.
 
-> **v4 note:** `Modal` is deprecated. Use `ModalV2` — it provides improved scroll behaviour, proper focus management via `@floating-ui/react`, and a composable slot-based API.
+> **Note:** `Modal` is deprecated. Use `ModalV2` — it provides improved scroll behaviour, proper focus management via `@floating-ui/react`, and a composable slot-based API.
 
 ## Sub-components
 
diff --git a/skills/fds-build/resources/setup/setup.md b/skills/fds-build/resources/setup/setup.md
index f80f873140..c21562363c 100644
--- a/skills/fds-build/resources/setup/setup.md
+++ b/skills/fds-build/resources/setup/setup.md
@@ -1,6 +1,6 @@
 # App Setup — Flagship v4
 
-Full project setup for `@lifesg/react-design-system` v4. Work through all five steps before writing any component code.
+Full project setup for `@lifesg/react-design-system` v4. Work through all steps before writing any component code.
 
 ---
 

From 88ba237fd95de9c9e04706fa12c74026514443c6 Mon Sep 17 00:00:00 2001
From: qroll <quek.ruoling@gmail.com>
Date: Mon, 5 Oct 2026 12:09:21 +0800
Subject: [PATCH 15/15] [MISC][RL] Remove v3 components from catalogue

---
 skills/fds-build/catalogue.md | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/skills/fds-build/catalogue.md b/skills/fds-build/catalogue.md
index 1169f9ac2b..a712a6e849 100644
--- a/skills/fds-build/catalogue.md
+++ b/skills/fds-build/catalogue.md
@@ -1,16 +1,14 @@
 # Flagship Component Catalogue
 
-One-liner per component. Read `./resources/v3/components/{key}.md` for full props and usage rules before writing code.
+One-liner per component. Read `./resources/components/{key}.md` for full props and usage rules before writing code.
 
 ---
 
 ## Buttons & Actions
 
-| Component        | Key                | Also known as                                     | Pairs with               | Description                                                                                                                                 | Key props                              |
-| ---------------- | ------------------ | ------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| `Button`         | `button`           | CTA, action button, submit button, primary button | `Form`, `Modal`, `Alert` | Text button. Variants: `Button.Default` (standard), `Button.Small`, `Button.Large`. Style types: default/secondary/light/link + danger flag | `styleType` (req), `loading`, `danger` |
-| `IconButton`     | `icon-button`      | icon action, icon-only button                     | `Navbar`                 | Icon-only button — `aria-label` always required. **v3 only — not available in v4**                                                          | `icon` (req), `aria-label` (req)       |
-| `ButtonWithIcon` | `button-with-icon` | labeled icon button, button with icon             | `Form`, `Modal`          | Text + icon button. Icon position: left (default) or right. **v3 only — not available in v4**                                               | `icon` (req), `iconPosition`           |
+| Component | Key      | Also known as                                     | Pairs with               | Description                                                                                | Key props                                      |
+| --------- | -------- | ------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------- |
+| `Button`  | `button` | CTA, action button, submit button, primary button | `Form`, `Modal`, `Alert` | Button with optional text or icon. Style types: default/secondary/light/link + danger flag | `styleType` (req), `loading`, `danger`, `icon` |
 
 ---
 
@@ -31,6 +29,7 @@ All `Form.*` components import from `@lifesg/react-design-system/form`. `label`
 | `Form.OtpVerification`     | `form-otp-verification`      | OTP, one-time password, verification code, 2FA                     | —                      | Full OTP send-and-verify flow                        | `label` (req), `length`, `onComplete`                          |
 | `Form.ESignature`          | `form-e-signature`           | signature pad, e-signature, digital signature, sign                | —                      | Signature capture canvas — returns base64            | `label` (req), `onResult`                                      |
 | `Input`                    | `input`                      | standalone input, bare input                                       | —                      | Text input without label — use `Form.Input` in forms | `value`, `onChange`                                            |
+| `OtpInput`                 | `otp-input`                  | OTP field, one-time password, verification code, 2FA               | —                      | Individual OTP digit inputs with countdown           | `numOfInput` (req), `cooldownDuration`, `onChange`             |
 
 ---
 
@@ -76,7 +75,7 @@ All `Form.*` components import from `@lifesg/react-design-system/form`. `label`
 | `Timeline`     | `timeline`      | step list, event history, process steps, progress list     | `Typography`                     | Vertical sequence of events or steps                                             | `items` (req)                                        |
 | `LinkList`     | `link-list`     | related links, link group, resource list                   | `Card`                           | Styled list of links with descriptions and show-more toggle                      | `items` (req — `{title, href, description}[]`)       |
 | `Typography`   | `typography`    | text, heading, body text, paragraph, label, caption        | `Colour` tokens                  | Text components — `HeadingXXL`→`HeadingXS`, `BodyBL`→`BodyXS`, `LinkBL`→`LinkXS` | `weight`, `as` (override element)                    |
-| `Badge`        | `badge`         | count badge, notification dot, number badge, unread count  | `Navbar`, `IconButton`           | Numeric badge overlaid on another element                                        | `value` (req)                                        |
+| `Badge`        | `badge`         | count badge, notification dot, number badge, unread count  | `Navbar`, `Button (icon)`        | Numeric badge overlaid on another element                                        | `value` (req)                                        |
 | `Avatar`       | `avatar`        | user avatar, profile picture, initials, profile icon       | `Navbar`                         | User representation — image or initials fallback                                 | `name` or `imageUrl`                                 |
 
 ---
@@ -104,19 +103,18 @@ All `Form.*` components import from `@lifesg/react-design-system/form`. `label`
 | `Sidenav`    | `sidenav`    | sidebar navigation, side menu, left nav            | `Layout`                      | Vertical sidebar navigation — 4-level nesting                 | `items` (req), `selectedId`                                                                     |
 | `Tab`        | `tab`        | tabs, tabbed navigation, tab strip, tab bar        | `Filter`, `DataTable`         | Tabbed content switching                                      | `items` (req), `activeTabKey`, `onClickTab`                                                     |
 | `LocalNav`   | `local-nav`  | in-page nav, anchor links, section nav, jump links | `Layout`                      | In-page section navigation                                    | `items` (req — `{id, label}[]`)                                                                 |
-| `Menu`       | `menu`       | dropdown menu, context menu, action menu           | `Button`, `IconButton`        | Dropdown menu attached to a trigger                           | `items` (req), `trigger` (req)                                                                  |
+| `Menu`       | `menu`       | dropdown menu, context menu, action menu           | `Button`                      | Dropdown menu attached to a trigger                           | `items` (req), `trigger` (req)                                                                  |
 | `Pagination` | `pagination` | page controls, paging, page numbers                | `DataTable`, `Filter`, `Card` | Page navigation controls — always set `showFirstAndLastNav`   | `totalItems` (req), `pageSize` (req), `activePage`, `onPageChange`, `showFirstAndLastNav` (req) |
 
 ---
 
 ## Overlays
 
-| Component | Key       | Also known as                                 | Pairs with             | Description                                                                                                  | Key props                                            |
-| --------- | --------- | --------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- |
-| `Modal`   | `modal`   | dialog, popup, lightbox, confirmation dialog  | `Button`, `Form`       | Full overlay dialog — blocks background interaction                                                          | `show` (req); nest `Modal.Box` with `onClose` inside |
-| `Drawer`  | `drawer`  | side sheet, slide-in panel, tray, side drawer | `Filter`, `Sidenav`    | Slide-in panel from screen edge                                                                              | `show` (req), `onClose`                              |
-| `Popover` | `popover` | anchored popup, floating panel, overlay panel | `IconButton`, `Button` | Anchored floating content panel                                                                              | `trigger` (req), `content` (req)                     |
-| `Tooltip` | `tooltip` | hover tip, info tip, hint                     | `Form`                 | Short hover/focus tooltip — no interactive content. **v3 only — use `Popover` with `trigger="hover"` in v4** | `content` (req)                                      |
+| Component | Key       | Also known as                                 | Pairs with          | Description                                         | Key props                                            |
+| --------- | --------- | --------------------------------------------- | ------------------- | --------------------------------------------------- | ---------------------------------------------------- |
+| `Modal`   | `modal`   | dialog, popup, lightbox, confirmation dialog  | `Button`, `Form`    | Full overlay dialog — blocks background interaction | `show` (req); nest `Modal.Box` with `onClose` inside |
+| `Drawer`  | `drawer`  | side sheet, slide-in panel, tray, side drawer | `Filter`, `Sidenav` | Slide-in panel from screen edge                     | `show` (req), `onClose`                              |
+| `Popover` | `popover` | anchored popup, floating panel, overlay panel | `Button`            | Anchored floating content panel                     | `trigger` (req), `content` (req)                     |
 
 ---
 
@@ -171,12 +169,13 @@ All `Form.*` components import from `@lifesg/react-design-system/form`. `label`
 | `Divider`         | `divider`          | horizontal rule, separator, hr, line                                        | `Card`, `Accordion`  | Visual separator between sections                                                                                                                    | _(none required)_                                              |
 | `ImageButton`     | `image-button`     | image CTA, image card button, clickable image                               | `Layout`             | Image with text overlay as a button                                                                                                                  | `imageUrl` (req), `label`, `onClick`                           |
 | `Table`           | `table`            | basic table, html table, simple table, read-only table                      | `Typography`         | Styled HTML table wrapper — `Table.Container` + `Table` + `Table.Head/Body/Row/HeaderCell/Cell`. No sorting or selection — use `DataTable` for those | `children`                                                     |
+| `DashedBorder`    | `dashed-border`    | dashed outline, drop zone border, placeholder region                        | `FileUpload`         | Container with dashed SVG border — for drop zones, placeholder regions, or empty-state containers                                                    | `children`                                                     |
 
 ---
 
 ## Icons
 
-| Component   | Key         | Also known as                                                          | Pairs with                       | Description                                                                                                                                                                                             | Key props                           |
-| ----------- | ----------- | ---------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
-| Icons       | `icon`      | icon, svg icon, react icon, arrow icon, tick icon, MUI                 | `Button`, `Navbar`, `IconButton` | Icons from `@lifesg/react-icons` — separate package. Each icon is its own named export: `import { ArrowRightIcon } from "@lifesg/react-icons/arrow-right"`. Never guess names — read the resource file. | `aria-label` (for standalone icons) |
-| `Animation` | `animation` | loading spinner, spinner, loading indicator, animate, transition, dots | —                                | Loading and transition animations — `LoadingSpinner`, `LoadingDots`, `LoadingDotsSpinner`. Import from `@lifesg/react-design-system/animations`                                                         | _(none required)_                   |
+| Component   | Key         | Also known as                                                          | Pairs with         | Description                                                                                                                                                                                             | Key props                           |
+| ----------- | ----------- | ---------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| Icons       | `icon`      | icon, svg icon, react icon, arrow icon, tick icon, MUI                 | `Button`, `Navbar` | Icons from `@lifesg/react-icons` — separate package. Each icon is its own named export: `import { ArrowRightIcon } from "@lifesg/react-icons/arrow-right"`. Never guess names — read the resource file. | `aria-label` (for standalone icons) |
+| `Animation` | `animation` | loading spinner, spinner, loading indicator, animate, transition, dots | —                  | Loading and transition animations — `LoadingSpinner`, `LoadingDots`, `LoadingDotsSpinner`. Import from `@lifesg/react-design-system/animations`                                                         | _(none required)_                   |